//客户端请求
GET / HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: example.com
Origin: http://example.com
Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==
Sec-WebSocket-Version: 13

//服务端响应
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: fFBooB7FAkLlXgRSz0BT3v4hq5s=
Sec-WebSocket-Location: ws://example.com/

新建WebsocketHandlerMiddleware中间件

这个中间件就是我们管理websocket链接的入口，我们调用context.WebSockets.AcceptWebSocketAsync()方法把请求转换为websocket链接。

在Invoke方法内接收websocket链接

 public async Task Invoke(HttpContext context)
 {
  if (context.Request.Path == "/ws")
  {
  if (context.WebSockets.IsWebSocketRequest)
  {
   WebSocket webSocket = await context.WebSockets.AcceptWebSocketAsync();
   string clientId = Guid.NewGuid().ToString(); ;
   var wsClient = new WebsocketClient
   {
   Id = clientId,
   WebSocket = webSocket
   };
   try
   {
   await Handle(wsClient);
   }
   catch (Exception ex)
   {
   _logger.LogError(ex, "Echo websocket client {0} err .", clientId);
   await context.Response.WriteAsync("closed");
   }
  }
  else
  {
   context.Response.StatusCode = 404;
  }
  }
  else
  {
  await _next(context);
  }
 }

在Hanle方法等待客户端的消息

 private async Task Handle(WebsocketClient webSocket)
 {
  WebsocketClientCollection.Add(webSocket);
  _logger.LogInformation($"Websocket client added.");
  
  WebSocketReceiveResult result = null;
  do
  {
  var buffer = new byte[1024 * 1];
  result = await webSocket.WebSocket.ReceiveAsync(new ArraySegment(buffer), CancellationToken.None);
  if (result.MessageType == WebSocketMessageType.Text && !result.CloseStatus.HasValue)
  {
   var msgString = Encoding.UTF8.GetString(buffer);
   _logger.LogInformation($"Websocket client ReceiveAsync message {msgString}.");
   var message = JsonConvert.DeserializeObject(msgString);
   message.SendClientId = webSocket.Id;
   MessageRoute(message);
  }
  }
  while (!result.CloseStatus.HasValue);
  WebsocketClientCollection.Remove(webSocket);
  _logger.LogInformation($"Websocket client closed.");
 }

在MessageRoute方法内对客户端的消息进行转发

对客户端的消息定义几个标准的action，对不同的action进行特定的处理，比如加入房间、离开房间、在房间内广播消息等。

private void MessageRoute(Message message)
 {
  var client = WebsocketClientCollection.Get(message.SendClientId);
  switch (message.action)
  {
  case "join":
   client.RoomNo = message.msg;
   client.SendMessageAsync($"{message.nick} join room {client.RoomNo} success .");
   _logger.LogInformation($"Websocket client {message.SendClientId} join room {client.RoomNo}.");
   break;
  case "send_to_room":
   if (string.IsNullOrEmpty(client.RoomNo))
   {
   break;
   }
   var clients = WebsocketClientCollection.GetRoomClients(client.RoomNo);
   clients.ForEach(c =>
   {
   c.SendMessageAsync(message.nick + " : " + message.msg);
   });
   _logger.LogInformation($"Websocket client {message.SendClientId} send message {message.msg} to room {client.RoomNo}");

   break;
  case "leave":
   var roomNo = client.RoomNo;
   client.RoomNo = "";
   client.SendMessageAsync($"{message.nick} leave room {roomNo} success .");
   _logger.LogInformation($"Websocket client {message.SendClientId} leave room {roomNo}");
   break;
  default:
   break;
  }
 }

新建WebsocketClientCollection管理类

这个类是个容器，用来存放所有的websocket链接，便于统一管理。

 public class WebsocketClientCollection
 {
 private static List _clients = new List();

 public static void Add(WebsocketClient client)
 {
  _clients.Add(client);
 }

 public static void Remove(WebsocketClient client)
 {
  _clients.Remove(client);
 }

 public static WebsocketClient Get(string clientId)
 {
  var client = _clients.FirstOrDefault(c=>c.Id == clientId);

  return client;
 }

 public static List GetRoomClients(string roomNo)
 {
  var client = _clients.Where(c => c.RoomNo == roomNo);
  return client.ToList();
 }
 }

在Startup中使用中间件

有了上面的中间件，我们需要use一下。

 app.UseWebSockets(new WebSocketOptions
  {
  KeepAliveInterval = TimeSpan.FromSeconds(60),
  ReceiveBufferSize = 1* 1024
  });
 app.UseMiddleware();

到此我们的服务端基本完成了，下面进行客户端html跟JavaScript的编写。

编写客户端界面

修改index.cshtml来实现一个简单的聊天室ui。

 room no:  join room leave room