.NET Core 基于Websocket的在线聊天室实现

什么是Websocket

我们在传统的客户端程序要实现实时双工通讯第一想到的技术就是socket通讯，但是在web体系是用不了socket通讯技术的，因为http被设计成无状态，每次跟服务器通讯完成后就会断开连接。

在没有websocket之前web系统如果要做双工通讯往往使用http long polling技术。http long polling 每次往服务器发送请求后，服务端不会立刻返回信息来结束请求，而是一直挂着直到有数据需要返回，或者等待超时了才会返回。客户端在结束上一次请求后立刻再发送一次请求，如此反复。http long polling虽然能实现web系统的双工通讯，但是有个很大的问题，就是基于http协议客户端每次发送请求都需要携带巨大的头部。在并发交互少量数据的时候非常不划算，对服务器资源的消耗也是巨大的。

websocket很好的改善了以上问题。它基于tcp重新设计了一套协议，同时又兼容http，默认跟http一样使用80/443端口。

websocket链接建立本质上就是一次http请求，直接使用http协议的upgrade头来标识这是一次websocket请求，服务端回复101状态码表示“握手”成功。

1. //客户端请求
2. GET / HTTP/1.1
3. Upgrade: websocket
4. Connection: Upgrade
5. Host: example.com
6. Origin: http://example.com
7. Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==
8. Sec-WebSocket-Version: 13
9.  
10. //服务端响应
11. HTTP/1.1 101 Switching Protocols
12. Upgrade: websocket
13. Connection: Upgrade
14. Sec-WebSocket-Accept: fFBooB7FAkLlXgRSz0BT3v4hq5s=
15. Sec-WebSocket-Location: ws://example.com/

使用asp.net core来处理websocket

上面我们简单的了解了websocket，那么如何来使用asp.net core处理websocket呢？因为websocket的握手就是一次http请求，那么我们就可以使用一个middleware来拦截websocket的请求，把建立的链接统一进行管理，其实微软已经帮我们简单的封装过了。

新建一个asp.net core网站

新建WebsocketHandlerMiddleware中间件

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

在Invoke方法内接收websocket链接

1. public async Task Invoke(HttpContext context)
2. {
3. if (context.Request.Path == "/ws")
4. {
5. if (context.WebSockets.IsWebSocketRequest)
6. {
7. WebSocket webSocket = await context.WebSockets.AcceptWebSocketAsync();
8. string clientId = Guid.NewGuid().ToString(); ;
9. var wsClient = new WebsocketClient
10. {
11. Id = clientId,
12. WebSocket = webSocket
13. };
14. try
15. {
16. await Handle(wsClient);
17. }
18. catch (Exception ex)
19. {
20. _logger.LogError(ex, "Echo websocket client {0} err .", clientId);
21. await context.Response.WriteAsync("closed");
22. }
23. }
24. else
25. {
26. context.Response.StatusCode = 404;
27. }
28. }
29. else
30. {
31. await _next(context);
32. }
33. }

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

1. private async Task Handle(WebsocketClient webSocket)
2. {
3. WebsocketClientCollection.Add(webSocket);
4. _logger.LogInformation($"Websocket client added.");
5.  
6. WebSocketReceiveResult result = null;
7. do
8. {
9. var buffer = new byte[1024 * 1];
10. result = await webSocket.WebSocket.ReceiveAsync(new ArraySegment<byte>(buffer),CancellationToken.None);
11. if (result.MessageType == WebSocketMessageType.Text && !result.CloseStatus.HasValue)
12. {
13. var msgString = Encoding.UTF8.GetString(buffer);
14. _logger.LogInformation($"Websocket client ReceiveAsync message {msgString}.");
15. var message = JsonConvert.DeserializeObject<Message>(msgString);
16. message.SendClientId = webSocket.Id;
17. MessageRoute(message);
18. }
19. }
20. while (!result.CloseStatus.HasValue);
21. WebsocketClientCollection.Remove(webSocket);
22. _logger.LogInformation($"Websocket client closed.");
23. }

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

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

1. private void MessageRoute(Message message)
2. {
3. var client = WebsocketClientCollection.Get(message.SendClientId);
4. switch (message.action)
5. {
6. case "join":
7. client.RoomNo = message.msg;
8. client.SendMessageAsync($"{message.nick} join room {client.RoomNo} success .");
9. _logger.LogInformation($"Websocket client {message.SendClientId} join room {client.RoomNo}.");
10. break;
11. case "send_to_room":
12. if (string.IsNullOrEmpty(client.RoomNo))
13. {
14. break;
15. }
16. var clients = WebsocketClientCollection.GetRoomClients(client.RoomNo);
17. clients.ForEach(c =>
18. {
19. c.SendMessageAsync(message.nick + " : " + message.msg);
20. });
21. _logger.LogInformation($"Websocket client {message.SendClientId} send message {message.msg} to room {client.RoomNo}");
22.  
23. break;
24. case "leave":
25. var roomNo = client.RoomNo;
26. client.RoomNo = "";
27. client.SendMessageAsync($"{message.nick} leave room {roomNo} success .");
28. _logger.LogInformation($"Websocket client {message.SendClientId} leave room {roomNo}");
29. break;
30. default:
31. break;
32. }
33. }

新建WebsocketClientCollection管理类

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

1. public class WebsocketClientCollection
2. {
3. private static List<WebsocketClient> _clients = new List<WebsocketClient>();
4.  
5. public static void Add(WebsocketClient client)
6. {
7. _clients.Add(client);
8. }
9.  
10. public static void Remove(WebsocketClient client)
11. {
12. _clients.Remove(client);
13. }
14.  
15. public static WebsocketClient Get(string clientId)
16. {
17. var client = _clients.FirstOrDefault(c=>c.Id == clientId);
18.  
19. return client;
20. }
21.  
22. public static List<WebsocketClient> GetRoomClients(string roomNo)
23. {
24. var client = _clients.Where(c => c.RoomNo == roomNo);
25. return client.ToList();
26. }
27. }

在Startup中使用中间件

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

1. app.UseWebSockets(new WebSocketOptions
2. {
3. KeepAliveInterval = TimeSpan.FromSeconds(60),
4. ReceiveBufferSize = 1* 1024
5. });
6. app.UseMiddleware<WebsocketHandlerMiddleware>();

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

编写客户端界面

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

1. <div style="margin-bottom:5px;">
2. room no: <input type="text" id="txtRoomNo" value="8888"/> <button id="btnJoin">join room</button> <button id="btnLeave">leave room</button>
3. </div>
4. <div style="margin-bottom:5px;">
5. nick name: <input type="text" id="txtNickName" value="batman" />
6. </div>
7. <div style="height:300px;width:600px">
8. <textarea style="height:100%;width:100%" id="msgList"></textarea>
9. <div style="text-align: right">
10. <input type="text" id="txtMsg" value="" /> <button id="btnSend">send</button>
11. </div>
12. </div>

使用JavaScript来处理websocket链接及消息

现代浏览器已经都支持websocket协议，JavaScript运行时内置了WebSocket类，我们仅仅需要new一个Websocket对象出来就可以对websocket进行操作。

1. var server = 'ws://localhost:5000'; //如果开启了https则这里是wss
2.  
3. var WEB_SOCKET = new WebSocket(server + '/ws');
4.  
5. WEB_SOCKET.onopen = function (evt) {
6. console.log('Connection open ...');
7. $('#msgList').val('websocket connection opened .');
8. };
9.  
10. WEB_SOCKET.onmessage = function (evt) {
11. console.log('Received Message: ' + evt.data);
12. if (evt.data) {
13. var content = $('#msgList').val();
14. content = content + '\r\n' + evt.data;
15.  
16. $('#msgList').val(content);
17. }
18. };
19.  
20. WEB_SOCKET.onclose = function (evt) {
21. console.log('Connection closed.');
22. };
23.  
24. $('#btnJoin').on('click', function () {
25. var roomNo = $('#txtRoomNo').val();
26. var nick = $('#txtNickName').val();
27. if (roomNo) {
28. var msg = {
29. action: 'join',
30. msg: roomNo,
31. nick: nick
32. };
33. WEB_SOCKET.send(JSON.stringify(msg));
34. }
35. });
36.  
37. $('#btnSend').on('click', function () {
38. var message = $('#txtMsg').val();
39. var nick = $('#txtNickName').val();
40. if (message) {
41. WEB_SOCKET.send(JSON.stringify({
42. action: 'send_to_room',
43. msg: message,
44. nick: nick
45. }));
46. }
47. });
48.  
49. $('#btnLeave').on('click', function () {
50. var nick = $('#txtNickName').val();
51. var msg = {
52. action: 'leave',
53. msg: '',
54. nick: nick
55. };
56. WEB_SOCKET.send(JSON.stringify(msg));
57. });

运行

至此我们的聊天室已经搭建完成了，运行一下看看效果。我们启动两个页面，进行聊天。
可以看到我们的消息被实时的转发出去了，good job ！

源码

源码已上传github
CoreWebsocketChatRoom

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。