本站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置： 主页 > 网络编程 > asp.net >

收藏
分享到

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

asp.net 来源：互联网搜集 作者：秩名 发布时间：2020-03-07 11:42:08 人浏览
摘要

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

什么是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
3
4
5
6
7
8
9
10
11
12
13
14
15
//客户端请求
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链接

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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方法等待客户端的消息

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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进行特定的处理，比如加入房间、离开房间、在房间内广播消息等。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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链接，便于统一管理。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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一下。

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

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

编写客户端界面

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

?
1
2
3
4
5
6
7
8
9
10
11
12
<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进行操作。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
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
版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 : https://www.cnblogs.com/kklldog/p/core-for-websocket.html
相关文章

  • ASP.NET MVC使用Identity增删改查用户

    ASP.NET MVC使用Identity增删改查用户
    源码在这里：https://github.com/darrenji/UseIdentityCRUDUserInMVC，本地下载 在VS2013中创建一个MVC项目，用默认的无身份验证作为身份验证机制。 通过

  • WPF实现雷达扫描图的绘制介绍

    WPF实现雷达扫描图的绘制介绍
    实现一个雷达扫描图。 源代码在TK_King/雷达 (gitee.com) https://gitee.com/TK_King/radar，自行下载就好了 制作思路 绘制圆形（或者称之轮） 绘制分割

  • .Net Core之JWT授权介绍

    .Net Core之JWT授权介绍
    JSON Web令牌（JWT）是一个开放标准（RFC 7519），它定义了一种紧凑且自包含的方式，用于在各方之间安全地传输信息作为JSON对象。由于此信息

  • ASP.NET Core使用Middleware设置有条件允许访问路由

    ASP.NET Core使用Middleware设置有条件允许访问路由
    1.简介 有时，我们可能在Web API中包含一些具有调试功能的请求。比如我们上次的文章中为什么ASP.NETCore数据库连接串的值和appsettings.json配的

  • ASP.NET Core使用功能开关控制路由访问操作

    ASP.NET Core使用功能开关控制路由访问操作
    前言： 在前面的文章，我们介绍了使用Middleware有条件地允许访问路由（《ASP.NETCore使用Middleware设置有条件允许访问路由》）。 而对于一些

  • ASP.NET Core使用功能开关控制路由访问操作（续）

    ASP.NET Core使用功能开关控制路由访问操作（续）
    前言： 在前面的文章，我们介绍了? ?使用功能开关控制路由访问??。 但其实我们使用了2个条件做的判断： 1 2 3 4 var isDebugEndpoint = context.Re
  • 详解MediatR的使用
    环境： .NET 5 ASP.NET Core MVC (project) 1. MediatR MediatR .NET中的简单中介者模式实现，一种进程内消息传递机制（无其他外部依赖）。支持以同步或
  • .NET Core 3.0里新的JSON API介绍
    为什么需要新的 JSON API ？ JSON.NET 大家都用过，老版本的 ASP.NET Core 也依赖于 JSON.NET 。 然而这个依赖就会引起一些版本问题：例如 ASP .NET
  • Net Core Web Api项目与在NginX下发布的方法
    前言 本文将介绍Net Core的一些基础知识和如何NginX下发布Net Core的WebApi项目。 测试环境 操作系统：windows 10 开发工具：visualstudio 2019 框架：
  • ASP.NET Core中的Http缓存使用
    Http响应缓存可减少客户端或代理对web服务器发出的请求数。响应缓存还减少了web服务器生成响应所需的工作量。响应缓存由Http请求中的he
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计