欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-05 19:36:53
什么是websocket我们在传统的客户端程序要实现实时双工通讯第一想到的技术就是socket通讯,但是在web体系是用不了socket通讯技术的,因为http被设计成无状态,每次跟服务器通讯完成后就...

什么是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网站

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

新建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 !

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

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

源码

源码已上传github
corewebsocketchatroom

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