在 Web 开发中，后端存在一些值得注意的通信协议，用于将更改通知给已连接的客户端。所有这些协议都用于处理同一件事。但鲜为人知的协议很少，鲜为人知的协议也很少。今天，将讨论 WebSocket，它在开发中使用最少，但它速度很快，是所有协议的根源！它通过单个持久连接在客户端和服务器之间进行全双工双向通信。这与传统的 HTTP 协议形成了鲜明对比，因为传统的 HTTP 协议每个请求-响应周期都需要建立新的连接。WebSocket 非常适合实时应用程序，因为它们允许服务器将数据推送到客户端，而无需等待客户端请求。
将使用 .NET Core Web API 应用程序进行演示。希望大家知道如何使用 Visual Studio 创建 .NET Core Web API 应用程序。因此，不会从头开始演示，而是重点介绍如何在现有应用程序中使用它，并在发生任何更改后通知连接的客户端。
1. 将 WebSocket 添加到应用程序
修改您的Program.cs以启用 WebSockets。
var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();
app.UseWebSockets();
app.UseRouting();
app.MapControllers();
app.Run();
2.创建WebSocket服务
创建服务和接口来管理 WebSocket 连接。
namespace GraphicsBackend.Services
{
public interface IWebSocketService
{
Task AddSocketAsync(WebSocket webSocket);
Task BroadcastAsync(SocketMessage message);
Task NotifyClientsAsync(string message);
}
}
namespace GraphicsBackend.Services
{
public class WebSocketService : IWebSocketService
{
private static readonly List<WebSocket> _connections = new();
public async Task AddSocketAsync(WebSocket webSocket)
{
_connections.Add(webSocket);
var buffer = new byte[1024 * 4];
while (webSocket.State == WebSocketState.Open)
{
var result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
if (result.MessageType == WebSocketMessageType.Close)
{
_connections.Remove(webSocket);
await webSocket.CloseAsync(WebSocketCloseStatus.NormalClosure, "Closed by client", CancellationToken.None);
}
}
}
public async Task NotifyClientsAsync(string message)
{
var tasks = _connections
.Where(s => s != null && s.State == WebSocketState.Open)
.Select(s => s.SendAsync(
new ArraySegment<byte>(Encoding.UTF8.GetBytes(message)),
WebSocketMessageType.Text, true, CancellationToken.None));
await Task.WhenAll(tasks);
}
public async Task BroadcastAsync(SocketMessage message)
{
var serializedMessage = JsonConvert.SerializeObject(message);
await NotifyClientsAsync(serializedMessage);
}
}
3.创建 WebSocket 控制器
该控制器将处理 WebSocket 连接。
[Route("ws")]
[ApiController]
public class WebSocketController : ControllerBase
{
private readonly IWebSocketService _webSocketService;
public WebSocketController(IWebSocketService webSocketService)
{
_webSocketService= webSocketService;
}
[HttpGet]
public async Task Get()
{
if (HttpContext.WebSockets.IsWebSocketRequest)
{
using var webSocket = await HttpContext.WebSockets.AcceptWebSocketAsync();
await _webSocketService.AddSocketAsync(webSocket);
}
else
{
HttpContext.Response.StatusCode = 400;
}
}
}
4. 将 WebSocketService 注入服务
在Program.cs中注册WebSocketService和IWebSocketService，以便可以在整个应用程序中使用它。
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddSingleton<IWebSocketService,WebSocketService>();
var app = builder.Build();
app.UseWebSockets();
app.MapControllers();
app.Run();
5. 通知客户端 API 操作中的任何操作
修改您的 API 控制器以发送通知。
[Route("api/customers")]
[ApiController]
public class HomeController: ControllerBase
{
private readonly IWebSocketService _webSocketService;
public CustomerController(IWebSocketService webSocketService)
{
_webSocketService= webSocketService;
}
[HttpPost]
public async Task<IActionResult> Create([FromBody] Model model)
{
// Save customer to DB (your logic)
// Notify clients
await _webSocketService.NotifyClientsAsync("New model added!");
return Ok();
}
}
6. 从前端连接
使用 JavaScript 监听来自 WebSocket 的消息。
const socket = new WebSocket("ws://localhost:5000/ws");
socket.onmessage = function(event) {
console.log("Notification received:", event.data);
};
socket.onopen = function() {
console.log("WebSocket connected!");
};
如果您喜欢此文章，请收藏、点赞、评论，谢谢，祝您快乐每一天。