.NET Core 基于Websocket的在線聊天室實(shí)現(xiàn)

更新時(shí)間：2020年03月05日 10:23:48 作者：Agile.Zhou

這篇文章主要介紹了.NET Core 基于Websocket的在線聊天室實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

什么是Websocket

我們?cè)趥鹘y(tǒng)的客戶端程序要實(shí)現(xiàn)實(shí)時(shí)雙工通訊第一想到的技術(shù)就是socket通訊，但是在web體系是用不了socket通訊技術(shù)的，因?yàn)閔ttp被設(shè)計(jì)成無狀態(tài)，每次跟服務(wù)器通訊完成后就會(huì)斷開連接。

在沒有websocket之前web系統(tǒng)如果要做雙工通訊往往使用http long polling技術(shù)。http long polling 每次往服務(wù)器發(fā)送請(qǐng)求后，服務(wù)端不會(huì)立刻返回信息來結(jié)束請(qǐng)求，而是一直掛著直到有數(shù)據(jù)需要返回，或者等待超時(shí)了才會(huì)返回?？蛻舳嗽诮Y(jié)束上一次請(qǐng)求后立刻再發(fā)送一次請(qǐng)求，如此反復(fù)。http long polling雖然能實(shí)現(xiàn)web系統(tǒng)的雙工通訊，但是有個(gè)很大的問題，就是基于http協(xié)議客戶端每次發(fā)送請(qǐng)求都需要攜帶巨大的頭部。在并發(fā)交互少量數(shù)據(jù)的時(shí)候非常不劃算，對(duì)服務(wù)器資源的消耗也是巨大的。

websocket很好的改善了以上問題。它基于tcp重新設(shè)計(jì)了一套協(xié)議，同時(shí)又兼容http，默認(rèn)跟http一樣使用80/443端口。

websocket鏈接建立本質(zhì)上就是一次http請(qǐng)求，直接使用http協(xié)議的upgrade頭來標(biāo)識(shí)這是一次websocket請(qǐng)求，服務(wù)端回復(fù)101狀態(tài)碼表示“握手”成功。

//客戶端請(qǐng)求
GET / HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: example.com
Origin: http://example.com
Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==
Sec-WebSocket-Version: 13

//服務(wù)端響應(yīng)
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: fFBooB7FAkLlXgRSz0BT3v4hq5s=
Sec-WebSocket-Location: ws://example.com/

使用asp.net core來處理websocket

上面我們簡單的了解了websocket，那么如何來使用asp.net core處理websocket呢？因?yàn)閣ebsocket的握手就是一次http請(qǐng)求，那么我們就可以使用一個(gè)middleware來攔截websocket的請(qǐng)求，把建立的鏈接統(tǒng)一進(jìn)行管理，其實(shí)微軟已經(jīng)幫我們簡單的封裝過了。

新建一個(gè)asp.net core網(wǎng)站

新建WebsocketHandlerMiddleware中間件

這個(gè)中間件就是我們管理websocket鏈接的入口，我們調(diào)用context.WebSockets.AcceptWebSocketAsync()方法把請(qǐng)求轉(zhuǎn)換為websocket鏈接。

在Invoke方法內(nèi)接收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<byte>(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<Message>(msgString);
   message.SendClientId = webSocket.Id;
   MessageRoute(message);
  }
  }
  while (!result.CloseStatus.HasValue);
  WebsocketClientCollection.Remove(webSocket);
  _logger.LogInformation($"Websocket client closed.");
 }

在MessageRoute方法內(nèi)對(duì)客戶端的消息進(jìn)行轉(zhuǎn)發(fā)

對(duì)客戶端的消息定義幾個(gè)標(biāo)準(zhǔn)的action，對(duì)不同的action進(jìn)行特定的處理，比如加入房間、離開房間、在房間內(nèi)廣播消息等。

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管理類

這個(gè)類是個(gè)容器，用來存放所有的websocket鏈接，便于統(tǒng)一管理。

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

 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<WebsocketClient> 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<WebsocketHandlerMiddleware>();

到此我們的服務(wù)端基本完成了，下面進(jìn)行客戶端html跟JavaScript的編寫。

編寫客戶端界面

修改index.cshtml來實(shí)現(xiàn)一個(gè)簡單的聊天室ui。

<div style="margin-bottom:5px;">
 room no: <input type="text" id="txtRoomNo" value="8888"/> <button id="btnJoin">join room</button> <button id="btnLeave">leave room</button>
</div>
<div style="margin-bottom:5px;">
 nick name: <input type="text" id="txtNickName" value="batman" /> 
</div>
<div style="height:300px;width:600px">
 <textarea style="height:100%;width:100%" id="msgList"></textarea>
 <div style="text-align: right">
 <input type="text" id="txtMsg" value="" /> <button id="btnSend">send</button>
 </div>
</div>

使用JavaScript來處理websocket鏈接及消息

現(xiàn)代瀏覽器已經(jīng)都支持websocket協(xié)議，JavaScript運(yùn)行時(shí)內(nèi)置了WebSocket類，我們僅僅需要new一個(gè)Websocket對(duì)象出來就可以對(duì)websocket進(jìn)行操作。

var server = 'ws://localhost:5000'; //如果開啟了https則這里是wss

var WEB_SOCKET = new WebSocket(server + '/ws');

WEB_SOCKET.onopen = function (evt) {
 console.log('Connection open ...');
 $('#msgList').val('websocket connection opened .');
};

WEB_SOCKET.onmessage = function (evt) {
 console.log('Received Message: ' + evt.data);
 if (evt.data) {
 var content = $('#msgList').val();
 content = content + '\r\n' + evt.data;

 $('#msgList').val(content);
 }
};

WEB_SOCKET.onclose = function (evt) {
 console.log('Connection closed.');
};

$('#btnJoin').on('click', function () {
 var roomNo = $('#txtRoomNo').val();
 var nick = $('#txtNickName').val();
 if (roomNo) {
 var msg = {
  action: 'join',
  msg: roomNo,
  nick: nick
 };
 WEB_SOCKET.send(JSON.stringify(msg));
 }
});

$('#btnSend').on('click', function () {
 var message = $('#txtMsg').val();
 var nick = $('#txtNickName').val();
 if (message) {
 WEB_SOCKET.send(JSON.stringify({
  action: 'send_to_room',
  msg: message,
  nick: nick
 }));
 }
});

$('#btnLeave').on('click', function () {
 var nick = $('#txtNickName').val();
 var msg = {
 action: 'leave',
 msg: '',
 nick: nick
 };
 WEB_SOCKET.send(JSON.stringify(msg));
});

運(yùn)行

至此我們的聊天室已經(jīng)搭建完成了，運(yùn)行一下看看效果。我們啟動(dòng)兩個(gè)頁面，進(jìn)行聊天。
可以看到我們的消息被實(shí)時(shí)的轉(zhuǎn)發(fā)出去了，good job ！