結合實際需求，在webapi內利用WebSocket建立單向的消息推送平台，讓A頁面和服務端建立WebSocket連接，讓其他頁面可以及時給A頁面推送消息

1.需求示意圖

 

 

 

2.需求描述

原本是為了給做unity3d客戶端開發的同事提供不定時的消息推送，比如商城購買道具後服務端將道具資訊推送給客戶端。

本篇文章簡化理解，用「相關部門開展活動，向全市人民徵集社會服務改善意見」為例子。但核心想法一致：單向推送。所以這個功能並不是聊天室，不需要客戶端和客戶端之間互相通訊。核心介面只和服務端建立WebSocket連接，推送消息全部來自其他地方。

只有核心頁面和服務端建立WebSocket連接，其他市民們都是通過web開發者耳熟能詳的http協議在發送消息，不要以為是市民們和部門公告欄玩WebSocket互動。

3.程式碼如下，複製即可使用

①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="//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="//code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        var msgCount = 1;
        function doSend(){
            $.ajax({
            url: "//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內部標識唯一性的是SecWebSocketKey，可參考//www.jianshu.com/p/8759dda1dbfc 了解原理。

因此只要核心頁面斷開了WebSocket連接（斷點、斷網、重啟、刷新頁面等），這次的WebSocket對象都不再有效，需要重新建立連接。

②本案例的需求是市民們向部門反應意見，不是聊天室。並且市民們反應意見是傳統的http請求，服務端向核心頁面推送消息才用到WebSocket。

③WSHelper.cs類中建立了執行緒安全的單例模式，目的是讓所有用戶訪問到的保存WebSocket對象的字典集合對象唯一，如果不這樣做，那麼只有在發布公告欄那台電腦上才有用。

④案例缺點：服務端沒有監聽核心頁面的WebSocket狀態，因此只有在try-catch捕獲異常時才可以處理掉客戶端的WebSocket對象，對性能上有些不友好。

Tags:

VirMach 便宜 VPS

QNews

QNews