第0節：.Net版基於WebSocket的聊天室樣例
阿新 • • 發佈：2020-11-04
一. 說在前面的話
該篇文章為實時通訊系列的第一節，基於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天一篇，有興趣的朋友可以關注該系列，互相討論，共同提高。
**********轉摘：https://www.cnblogs.com/yaopengfei/p/9263950.html