1.需求示意圖 2.需求描述 原本是為了給做unity3d客戶端開發的同事提供不定時的消息推送,比如商城購買道具後服務端將道具信息推送給客戶端。 本篇文章簡化理解,用“相關部門開展活動,向全市人民徵集社會服務改善意見”為例子。但核心想法一致:單向推送(指這個需求上只需要單向)。所以這個功能並不是聊天 ...
1.需求示意圖
2.需求描述
原本是為了給做unity3d客戶端開發的同事提供不定時的消息推送,比如商城購買道具後服務端將道具信息推送給客戶端。
本篇文章簡化理解,用“相關部門開展活動,向全市人民徵集社會服務改善意見”為例子。但核心想法一致:單向推送(指這個需求上只需要單向)。所以這個功能並不是聊天室,即便websocket技術是做雙向通信的,但在本需求中不需要核心頁面和客戶端之間互相通信。核心界面只和服務端建立WebSocket連接,推送消息全部來自其他地方。
只有核心頁面和服務端建立WebSocket連接,其他市民們都是通過web開發者耳熟能詳的http協議在發送消息,不是市民們和部門公告欄玩WebSocket互動。
3.代碼如下,複製即可使用(webapi跨域的代碼不演示)
①WebSocket幫助類,負責建立連接和推送消息
using System; using System.Collections.Generic; using System.Linq; using System.Net.WebSockets; using System.Text; using System.Threading; using System.Threading.Tasks; using System.Web; using System.Web.WebSockets; namespace WSTest { public class WSHelper { /// <summary> /// 保存客戶端的WebSocket對象 /// </summary> private static readonly Dictionary<string, WebSocket> dicSockets = new Dictionary<string, WebSocket>(); #region 構建線程安全的單例模式 private static WSHelper _instance; private WSHelper() { } public static WSHelper GetInstance() { if (_instance == null) { lock (dicSockets) { if (_instance == null) { _instance = new WSHelper(); } } } return _instance; } #endregion /// <summary> /// 和客戶端建立WebSocket連接 /// </summary> /// <param name="arg">客戶端發送的WebSocket相關信息</param> /// <returns></returns> public async Task ProcessWSChat(AspNetWebSocketContext arg) { // 1.獲取請求的客戶端WebSocket對象 WebSocket socket = arg.WebSocket; // 2.獲取自定義的參數 string adminUserKey = arg.QueryString["adminUserKey"]; if (string.IsNullOrEmpty(adminUserKey)) return; // 3.將用戶編號作為標識客戶端唯一性的Key,保存客戶端的WebSocket對象 dicSockets[adminUserKey] = socket; while (true) { ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[1024 * 10]); WebSocketReceiveResult result = await socket.ReceiveAsync(buffer, CancellationToken.None); try { if (socket.State != WebSocketState.Open) { dicSockets.Remove(adminUserKey); break; } } catch { break; } } } /// <summary> /// 服務端向客戶端推送消息 /// </summary> public bool SendMsg(string message, string adminUserKey) { WebSocket socket = null; if (dicSockets.ContainsKey(adminUserKey)) { socket = dicSockets[adminUserKey]; } else { return false; } //【重要】執行下麵socket.State代碼可能會拋異常"無法訪問已經釋放的對象", // 因為客戶端已經處於斷電、斷網、強制關閉、刷新等狀態,當前的WebSocket對象已經失去價值,直接刪除即可 try { if (socket.State == WebSocketState.Open) { ArraySegment<byte> buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(message)); socket.SendAsync(buffer, WebSocketMessageType.Text, true, CancellationToken.None); return true; } } catch { dicSockets.Remove(adminUserKey); return false; } return false; } } }WSHelper
②webapi的控制器,負責建立WebSocket連接
using System.Net; using System.Net.Http; using System.Web; using System.Web.Http; namespace WSTest.Controllers { [RoutePrefix("WebSocketConn")] public class WebSocketConnController : ApiController { /// <summary> /// 創建websocket連接 /// </summary> [HttpGet] [Route("GetConnect")] public HttpResponseMessage GetConnect() { if (HttpContext.Current.IsWebSocketRequest) { HttpContext.Current.AcceptWebSocketRequest(WSHelper.GetInstance().ProcessWSChat); } return new HttpResponseMessage(HttpStatusCode.SwitchingProtocols); } } }WebSocketConnController
③webapi的業務控制器,徵集意見
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Http; using System.Web.Http; namespace WSTest.Controllers { /// <summary> /// 市民服務 /// </summary> [RoutePrefix("CitizenService")] public class CitizenServiceController : ApiController { /// <summary> /// 市民意見徵集 /// </summary> [HttpGet] [Route("GiveOpinion")] public string GiveOpinion(string userName, string msg, string sendTo) { //1.發送消息給客戶端 string sendMsg = string.Format("熱心市民{0}有話要說:{1}", userName, msg); bool result = WSHelper.GetInstance().SendMsg(sendMsg, sendTo); //2.接收結果,若發送失敗,可能客戶端還未成功連接WebSocket return result ? "已提交,您可以去相關部門的官網查看剛發送的信息了。" : "相關部門的平臺還沒開放,請耐心等待"; } } }CitizenServiceController
④測試用部門公告欄頁面【核心頁面】
<!DOCTYPE html> <html> <head> <title>教育局的市民意見徵集佈告欄</title> </head> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <body> <div id="titleMsg"></div> <div id="msgMenu"> 來自市民的話:<br> </div> <script type="text/javascript"> var webSocket; var msgCount = 1; //HTTP處理程式的地址 var handlerUrl = "ws://localhost:2465/WebSocketConn/GetConnect?adminUserKey=adminA"; $(function(){ InitWebSocket(); }); function CloseWebSocket() { webSocket.close(); webSocket = undefined; } function InitWebSocket() { //如果WebSocket對象未初始化,則初始化 if (webSocket == undefined) { webSocket = new WebSocket(handlerUrl); //打開連接處理程式 webSocket.onopen = function () { //WebSocket連接成功 $("#titleMsg").text("平臺已開放,歡迎大家留言"); }; //消息數據處理程式 webSocket.onmessage = function (e) { updMsgMenu(e.data); }; //關閉事件處理程式 webSocket.onclose = function () { //WebSocket斷開連接 }; //錯誤事件處理程式 webSocket.onerror = function (e) { updMsgMenu(e.message); }; } else { //webSocket.open();沒有open方法 } } function updMsgMenu(str){ var tempStr = $("#msgMenu").html(); tempStr = tempStr + msgCount + "." + str + "</br>"; msgCount++; $("#msgMenu").html(tempStr); } function Clear(){ msgCount = 1; $("#msgMenu").html("消息列表:<br>"); } </script> </body> </html>部門公告欄頁面
⑤測試用市民意見徵集頁面
<!DOCTYPE html> <html> <head> <title>市民意見徵集平臺</title> </head> <body> 您的姓名:<input type="text" id="userName" /><br> 您的意見:<textarea type="text" id="msg"></textarea><br> 您想給哪個部門留言:<select id="sendTo"> <option value="adminA">教育局</option> <option value="adminB">社保局</option> <option value="adminC">勞動局</option> </select> <input type="button" value="提交" onclick="doSend()" /> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script> var msgCount = 1; function doSend(){ $.ajax({ url: "http://localhost:2465/CitizenService/GiveOpinion", type: "GET", data:{ userName: $("#userName").val(), msg: $("#msg").val(), sendTo: $("#sendTo").val() }, cache: false, dataType: "json", success: function (res) { console.log(res); alert("收到消息:"+ res); }, error: function (error) { alert("服務端繁忙"); } }); } </script> </body> </html>市民意見徵集頁面
4.運行如下
①教育部門開放了自己的平臺,準備接收市民意見
②有市民向教育部門反饋問題
③公告欄收到及時推送的消息
5.總結
①只要核心頁面斷開了WebSocket連接(斷電、斷網、重啟、刷新頁面等),這次的WebSocket對象都不再有效。
②本案例的需求是市民們向部門反應意見,不需要做成聊天室類型的客戶端互動。
③WSHelper.cs類中建立了線程安全的單例模式,目的是讓所有用戶訪問到的字典集合對象唯一。
④案例缺點:核心頁面斷開連接時服務端沒有去監聽,因此服務端無法及時釋放對象,對性能不友好,需要進一步改進。