.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状态码表示“握手”成功。
//客户端请求 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/
使用asp.net core来处理websocket
上面我们简单的了解了websocket,那么如何来使用asp.net core处理websocket呢?因为websocket的握手就是一次http请求,那么我们就可以使用一个middleware来拦截websocket的请求,把建立的链接统一进行管理,其实微软已经帮我们简单的封装过了。
新建一个asp.net core网站
新建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<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方法内对客户端的消息进行转发
对客户端的消息定义几个标准的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<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>();
到此我们的服务端基本完成了,下面进行客户端html跟javascript的编写。
编写客户端界面
修改index.cshtml来实现一个简单的聊天室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链接及消息
现代浏览器已经都支持websocket协议,javascript运行时内置了websocket类,我们仅仅需要new一个websocket对象出来就可以对websocket进行操作。
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)); });
运行
至此我们的聊天室已经搭建完成了,运行一下看看效果。我们启动两个页面,进行聊天。
可以看到我们的消息被实时的转发出去了,good job !
源码
源码已上传github
corewebsocketchatroom
推荐阅读
-
基于Kubernetes 构建.NET Core 的技术体系
-
一行代码在Linux服务器上搭建基于.Net Core的博客
-
基于Asp.Net Core MVC和AdminLTE的响应式管理后台之侧边栏处理
-
.net core 实现基于 JSON 的多语言
-
分享一个基于Net Core 3.1开发的模块化的项目
-
ASP.NET Core 2.0集成Office Online Server(OWAS)实现办公文档的在线预览与编辑(支持word\excel\ppt\pdf等格式)
-
ASP.NET5 REST API使用示例——基于云平台+云服务打造自己的在线翻译工具
-
基于aws api gateway的asp.net core验证
-
express框架实现基于Websocket建立的简易聊天室
-
一个基于 .NET Core 2.0 开发的简单易用的快速开发框架 - LinFx