第一节：.Net版基于WebSocket的聊天室样例
一. 说在前面的话
该篇文章为实时通讯系列的第一节，基于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>
View Code
一般处理程序代码：
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 }
View Code
帮助类代码：
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 }
View Code
最终实现效果：
五. 局限与后续计划
通过上面这个小例子，我觉得WebSocket主要有这么两个缺陷：
1. 众所周知，很多低版本的浏览器不支持。
2. 代码写起来繁琐，客户端和服务器端之间不能自行指定方法名进行直接调用，比如上面单发和群发在客户端是只能通过Send方法进行发送到服务器端固定的位置，使得不得不自己约定规则进行区分；再比如：客户端消息的接受只能通过onmessage进行监听，非常局限不灵活。
而SignalR很好的解决了上面的两个问题。
补充一张websocket的兼容性，下图来自于网络。
后续章节开始详细的介绍SignalR的用法，大约3天一篇，有兴趣的朋友可以关注该系列，互相讨论，共同提高。
!
- 作 者 : Yaopengfei(姚鹏飞)
- 博客地址 : http://www.cnblogs.com/yaopengfei/
- 声 明1 : 本人才疏学浅，用郭德纲的话说“我是一个小学生”，如有错误，欢迎讨论，请勿谩骂^_^。
- 声 明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，如需代码请在评论处留下你的邮箱
版权声明：本文为yaopengfei原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。