第一节：.Net版基于WebSocket的聊天室样例
程序员文章站
2022-10-27 20:14:11
一. 说在前面的话 该篇文章为实时通讯系列的第一节，基于WebSocket编写了一个简易版聊天样例，主要作用是为引出后面SignalR系列的用法及其强大方便之处，通过这个样例与后续的SignalR对比，可以体会到用原生的WebSocket编程的不灵活以及繁琐之处。（PS：下面那个案例 编写+调试 用 ......
一. 说在前面的话
该篇文章为实时通讯系列的第一节，基于WebSocket编写了一个简易版聊天样例，主要作用是为引出后面SignalR系列的用法及其强大方便之处，通过这个样例与后续的SignalR对比，可以体会到用原生的WebSocket编程的不灵活以及繁琐之处。（PS：下面那个案例 编写+调试 用了大约2个小时的时间）
特别强调：该案例只是一个简易版的Demo，实现了一些基本的功能，起到一个基本入门的作用，在一些细节方面的限制、验证、以及关键信息的存放位置是有一定缺陷的，在实际项目中，需要根据实际情况进行调整。
后面打算以一个真实的微信项目为例【二人夺宝】如下图，介绍里面需要用到的实时通讯技术，即SignalR在里面起到的作用，你会发现如果业务复杂，如果采用原生的WebSocket进行编程，“你能累死”，或者说有些功能很难实现。
最后以一个真实的App混合开发项目【红猴代派】如下图，介绍用SignalR替代推送技术的实现。
ps：鉴于保密协议，以上提到的两个项目名称并非最终上线的真实名称。
二. WebSocket简介
WebSocket可以通过JS与服务器端建立实时的双向通信，它主要包括：2个核心方法、4个监听函数、1个核心属性。
2个核心方法：
① send() 向远程服务器发送信息
② close() 关闭与远程服务器的连接
4个监听函数：
① onopen 当网络连接建立成功时触发该事件
② onerror 当网络发生错误时触发该事件
③ onclose 当网络连接被关闭时触发该事件
④ onmessage 当websocket接收到服务器发来的消息的时触发该事件
1个核心属性：readyState，它有四种状态
① WebSocket.OPEN：表示与服务器已经建立好连接
② WebSocket.CLOSED：表示与服务器连接已经断开
③ WebSocket.CONNECTING：表示正在尝试与服务建立连接
④ WebSocket.CLOSING：表示正在关闭与服务器连接
服务器端主要用到两个方法：
① SendAsync() 发送信息给客户端
② CloseAsync() 关闭该Socket连接
三. 聊天室实现的功能
1. 通过输入登录标记，进行建立连接，会提示当前所有在线的人(包括自己)，登录成功。（Ps：同一个标记不能重复登录）
2. 点击关闭连接，断开当前连接，提示除了自己以外的所有人，“某某离开了”。
3. 群发功能：给所有在线的人（自己除外）的发送消息。
4. 单发功能：点对点发送消息。（需要输入内容和接收人的标识）
四. 代码分享
代码主要分为3部分组成：前端html页面、服务器端ashx一般处理程序、封装的消息发送帮助类。
前端页面代码：
1 @{
2 Layout = null;
3 }
4
5 <!DOCTYPE html>
6
7 <html>
8 <head>
9 <meta name="viewport" content="width=device-width" />
10 <title>Index</title>
11 <script src="~/Scripts/jquery-3.3.1.min.js"></script>
12 <script>
13
14 //封装WebSocket的相关方法
15 (function (w) {
16 //声明全局对象
17 var ws; //websocket对象
18 var url = "ws://localhost:9008/webSocketHandler.ashx"; //连接地址
19 var mainUitls = {
20 //1.初始化基本事件
21 init: function () {
22 this.initClick();
23 },
24 //2.建立通讯事件
25 initConnect: function () {
26 var newUrl = url + "?userKey=" + $("#j_userKey").val();
27 ws = new WebSocket(newUrl);
28 //2.1 网络建立连接的时候触发该事件
29 ws.onopen = function () {
30 $('#j_notice').html('已经连接');
31 }
32 //2.2 接受服务器发来消息时触发事件
33 ws.onmessage = function (evt) {
34 $("#j_Msg").append("<li>" + evt.data + "</li>");
35 }
36 //2.3 网络错误时候触发
37 ws.onerror = function (evt) {
38 $('#j_notice').html(JSON.stringify(evt));
39 }
40 //2.4 当连接关闭的时候触发该事件
41 ws.onclose = function () {
42 //这里根据实际场景来编写 (比如断线重连机制)
43 //该版本只是简单的给个提示
44 $('#j_notice').html("连接断开");
45 }
46 },
47 //3. 各种点击事件
48 initClick: function () {
49 //3.1 建立连接
50 $("#j_connect").on("click", function () {
51 if ($("#j_userKey").val()=="") {
52 $('#j_notice').html("请输入用户标记");
53 return;
54 }
55 mainUitls.initConnect();
56 });
57 //3.2 关闭连接
58 $("#j_close").on("click", function () {
59 ws.close();
60 });
61 //3.3 群发发送消息
62 $("#j_send").on("click", function () {
63 //表示与服务器已经建立好连接
64 if (ws.readyState == WebSocket.OPEN) {
65 ws.send($('#j_content').val());
66 }
67 //表示与服务器连接已经断开
68 else if (ws.readyState == WebSocket.CLOSED) {
69 $('#j_notice').html('与服务器连接已经断开');
70 }
71 //表示正在尝试与服务建立连接
72 else if (ws.readyState == WebSocket.CONNECTING) {
73 $('#j_notice').html('正在尝试与服务建立连接');
74 }
75 //正在关闭与服务器连接
76 else if (ws.readyState == WebSocket.CLOSING) {
77 $('#j_notice').html('正在关闭与服务器连接');
78 }
79
80 });
81 //3.4 单发消息
82 $("#j_send2").on("click", function () {
83 var msg = $('#j_receiveUserKey').val();
84 if (msg=="") {
85 $('#j_notice').html('请输入接收人的标识');
86 return;
87 }
88 //下面对内容进行拼接
89 // "$--$--**" + msg + "$--$--**" + "发送的内容";
90
91 var finalMsg = "$--$--**" + msg + "$--$--**" + $('#j_content').val();
92
93 //表示与服务器已经建立好连接
94 if (ws.readyState == WebSocket.OPEN) {
95 ws.send(finalMsg);
96 }
97 //表示与服务器连接已经断开
98 else if (ws.readyState == WebSocket.CLOSED) {
99 $('#j_notice').html('与服务器连接已经断开');
100 }
101 //表示正在尝试与服务建立连接
102 else if (ws.readyState == WebSocket.CONNECTING) {
103 $('#j_notice').html('正在尝试与服务建立连接');
104 }
105 //正在关闭与服务器连接
106 else if (ws.readyState == WebSocket.CLOSING) {
107 $('#j_notice').html('正在关闭与服务器连接');
108 }
109
110 });
111 }
112
113 };
114
115 w.mainUitls = mainUitls;
116 })(window)
117
118 $(function () {
119 mainUitls.init();
120 });
121 </script>
122 </head>
123 <body>
124 <div>
125 <div><span>提示：</span><span id="j_notice"></span></div>
126 <div style="margin-top:20px">
127 <input type="text" name="name" value="" placeholder="请输入登录标识" id="j_userKey" />
128 <button id="j_connect">建立连接</button>
129 <button id="j_close">关闭连接</button>
130 </div>
131 <div style="margin-top:20px">
132 <input type="text" value="" placeholder="请输入发送内容" id="j_content" />
133 <button id="j_send">群发</button>
134 </div>
135
136 <div style="margin-top:20px">
137 <input type="text" value="" placeholder="请输入接收人标识" id="j_receiveUserKey" />
138 <button id="j_send2">单发</button>
139 </div>
140 <div>
141 <ul id="j_Msg"></ul>
142 </div>
143 </div>
144 </body>
145 </html>
一般处理程序代码：
1 using System;
2 using System.Collections.Concurrent;
3 using System.Collections.Generic;
4 using System.Linq;
5 using System.Net.WebSockets;
6 using System.Text;
7 using System.Threading;
8 using System.Threading.Tasks;
9 using System.Web;
10 using System.Web.SessionState;
11 using System.Web.WebSockets;
12
13 namespace WebSocketDemo
14 {
15 /// <summary>
16 /// webSocketHander
17 /// </summary>
18 public class webSocketHandler : IHttpHandler, IRequiresSessionState
19 {
20 //用户登记标识
21 private string userKey = "";
22 public void ProcessRequest(HttpContext context)
23 {
24 if (context.IsWebSocketRequest)
25 {
26 this.userKey = context.Request.QueryString["userKey"];
27 context.AcceptWebSocketRequest(ProcessChat);
28 }
29 else
30 {
31 context.Response.Write("不是WebSocket请求");
32 }
33 }
34 private async Task ProcessChat(AspNetWebSocketContext context)
35 {
36 WebSocket socket = context.WebSocket;
37 CancellationToken cancellationToken = new CancellationToken();
38 bool isExits = WebManager.AddUser(userKey, socket);
39 if (isExits == false)
40 {
41 //表示该用户有在线
42 await WebManager.SendToMySelf(cancellationToken, $"用户【{this.userKey}】 已在线", this.userKey);
43 }
44 else
45 {
46 //表示登录成功
47 //某人登陆后，给群里其他人发送提示信息(本人除外)
48 await WebManager.SendLoginSucesssNotice(cancellationToken, $"用户【{this.userKey}】 进入聊天室,当前时间：{DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")}");
49 while (socket.State == WebSocketState.Open)
50 {
51 ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[2048]);
52 //接受指令
53 WebSocketReceiveResult result = await socket.ReceiveAsync(buffer, cancellationToken);
54 //表示是关闭指令
55 if (result.MessageType == WebSocketMessageType.Close)
56 {
57 //移除该用户对应的socket对象
58 WebManager.RemoveUser(userKey);
59 //发送离开提醒
60 await WebManager.SendOutNotice(cancellationToken, $"用户【{this.userKey}】 离开聊天室,当前时间：{DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")}");
61 await socket.CloseAsync(WebSocketCloseStatus.NormalClosure, String.Empty, cancellationToken);
62 }
63 //获取是发送消息指令
64 else
65 {
66 string userMsg = Encoding.UTF8.GetString(buffer.Array, 0, result.Count);
67 //这里要区分是单发还是群发(通过与前端在内容开头做一个标记，来区分是单发还是群发)
68 if (userMsg.Length > 8 && userMsg.Substring(0, 8) == "$--$--**")
69 {
70 //表示是单发，截取内容和接受者的标记
71 var array = userMsg.Split(new string[] { "$--$--**" }, StringSplitOptions.None);
72 var receiveNotice = array[1];
73 string content = $"用户【{this.userKey}】 发来消息：{array[2]},当前时间：{DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")}";
74 WebManager.SendSingleMessage(cancellationToken, content, receiveNotice);
75 }
76 else
77 {
78 //表示群发信息
79 string content = $"用户【{this.userKey}】 群发消息：{userMsg},当前时间：{DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")}";
80 WebManager.SendAllMessage(cancellationToken, content, userKey);
81 }
82 }
83 }
84 }
85
86 }
87
88 /// <summary>
89 /// true 如果 System.Web.IHttpHandler 实例是可重复使用; 否则为 false。
90 /// </summary>
91 public bool IsReusable
92 {
93 get
94 {
95 return false;
96 }
97 }
98 }
99
100
101 }
帮助类代码：
1 using System;
2 using System.Collections.Concurrent;
3 using System.Collections.Generic;
4 using System.Linq;
5 using System.Net.WebSockets;
6 using System.Text;
7 using System.Threading;
8 using System.Threading.Tasks;
9 using System.Web;
10 using System.Web.SessionState;
11
12
13 namespace WebSocketDemo
14 {
15 /// <summary>
16 /// webSocket帮助类
17 /// </summary>
18 public class WebManager
19 {
20 /// <summary>
21 /// 这采用ConcurrentDictionary字典，是线程安全的，不需要加锁
22 /// </summary>
23 private static ConcurrentDictionary<string, WebSocket> _UserDictionary = new ConcurrentDictionary<string, WebSocket>();
24
25 #region 01-增加用户
26 /// <summary>
27 /// 增加用户
28 /// </summary>
29 /// <param name="userKey"></param>
30 /// <param name="socket"></param>
31 public static bool AddUser(string userKey, WebSocket socket)
32 {
33
34 bool flag = _UserDictionary.Select(d => d.Key).ToList().Contains(userKey);
35 if (flag == false)
36 {
37 _UserDictionary[userKey] = socket;
38 return true;
39 }
40 else
41 {
42 //表示该用户在线
43 return false;
44
45 }
46 }
47 #endregion
48
49 #region 02-移除用户
50 /// <summary>
51 /// 移除用户
52 /// </summary>
53 /// <param name="userKey"></param>
54 public static void RemoveUser(string userKey)
55 {
56 WebSocket socket = null;
57 _UserDictionary.TryRemove(userKey, out socket);
58 }
59 #endregion
60
61 #region 03-登录提醒
62
63 /// <summary>
64 /// 登录提醒（包括自己）
65 /// </summary>
66 /// <param name="cancellationToken"></param>
67 /// <param name="content"></param>
68 /// <returns></returns>
69 public static async Task SendLoginSucesssNotice(CancellationToken cancellationToken, string content)
70 {
71 ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[2048]);
72 buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(content));
73 //登录提醒（包括自己）
74 foreach (var socket in _UserDictionary.Select(d => d.Value))
75 {
76 await socket.SendAsync(buffer, WebSocketMessageType.Text, true, cancellationToken);
77 }
78 }
79
80 #endregion
81
82 #region 04-离开提醒
83
84 /// <summary>
85 /// 离开提醒
86 /// </summary>
87 /// <param name="cancellationToken"></param>
88 /// <param name="content"></param>
89 /// <returns></returns>
90 public static async Task SendOutNotice(CancellationToken cancellationToken, string content)
91 {
92 ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[2048]);
93 buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(content));
94 //离开提醒
95 foreach (var socket in _UserDictionary.Select(d => d.Value))
96 {
97 await socket.SendAsync(buffer, WebSocketMessageType.Text, true, cancellationToken);
98 }
99 }
100
101 #endregion
102
103 #region 05-群发消息，不包括自己
104 /// <summary>
105 /// 群发消息，不包括自己
106 /// </summary>
107 /// <param name="cancellationToken"></param>
108 /// <param name="content"></param>
109 /// <param name="myUserKey">当前用户标记</param>
110 /// <returns></returns>
111 public static void SendAllMessage(CancellationToken cancellationToken, string content, string myUserKey)
112 {
113 try
114 {
115 ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[2048]);
116 buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(content));
117 //群发消息，但不包括自己
118 foreach (var item in _UserDictionary)
119 {
120 if (item.Key.ToString() != myUserKey)
121 {
122 item.Value.SendAsync(buffer, WebSocketMessageType.Text, true, cancellationToken);
123 }
124 }
125 }
126 catch (Exception ex)
127 {
128 var msg = ex.Message;
129 }
130 }
131 #endregion
132
133 #region 06-单发消息
134 /// <summary>
135 /// 单发消息
136 /// </summary>
137 /// <param name="cancellationToken"></param>
138 /// <param name="content"></param>
139 /// <param name="receiveKey">接收者的标识</param>
140 /// <returns></returns>
141 public static void SendSingleMessage(CancellationToken cancellationToken, string content, string receiveKey)
142 {
143 try
144 {
145 ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[2048]);
146 buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(content));
147 //单发消息
148 foreach (var item in _UserDictionary)
149 {
150 if (item.Key.ToString() == receiveKey)
151 {
152 item.Value.SendAsync(buffer, WebSocketMessageType.Text, true, cancellationToken);
153 }
154 }
155 }
156 catch (Exception ex)
157 {
158 var msg = ex.Message;
159 }
160 }
161 #endregion
162
163 #region 07-给自己发送消息
164
165 /// <summary>
166 /// 给自己发送消息
167 /// </summary>
168 /// <param name="cancellationToken"></param>
169 /// <param name="content"></param>
170 /// <param name="userKey">当前标记</param>
171 /// <returns></returns>
172 public static async Task SendToMySelf(CancellationToken cancellationToken, string content,string userKey)
173 {
174 ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[2048]);
175 buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(content));
176 //离开提醒
177 foreach (var item in _UserDictionary)
178 {
179 if (item.Key.ToString() == userKey)
180 {
181 await item.Value.SendAsync(buffer, WebSocketMessageType.Text, true, cancellationToken);
182 }
183 }
184 }
185 #endregion
186
187 }
188 }
最终实现效果：
五. 局限与后续计划
通过上面这个小例子，我觉得WebSocket主要有这么两个缺陷：
1. 众所周知，很多低版本的浏览器不支持。
2. 代码写起来繁琐，客户端和服务器端之间不能自行指定方法名进行直接调用，比如上面单发和群发在客户端是只能通过Send方法进行发送到服务器端固定的位置，使得不得不自己约定规则进行区分；再比如：客户端消息的接受只能通过onmessage进行监听，非常局限不灵活。
而SignalR很好的解决了上面的两个问题。
补充一张websocket的兼容性，下图来自于网络。
后续章节开始详细的介绍SignalR的用法，大约3天一篇，有兴趣的朋友可以关注该系列，互相讨论，共同提高。
!
- 作 者 : Yaopengfei(姚鹏飞)
- 博客地址 :
- 声 明1 : 本人才疏学浅，用郭德纲的话说“我是一个小学生”，如有错误，欢迎讨论，请勿谩骂^_^。
- 声 明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，如需代码请在评论处留下你的邮箱
上一篇： 双重保险——前端bootstrapValidator验证+后台MVC模型验证
下一篇： 我俩心有灵犀