結合實際需求，在webapi內利用WebSocket創建單向的消息推送平臺，讓A頁面和服務端創建WebSocket鏈接，讓其餘頁面能夠及時給A頁面推送消息

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類中創建了線程安全的單例模式，目的是讓全部用戶訪問到的字典集合對象惟一。

④案例缺點：核心頁面斷開鏈接時服務端沒有去監聽，所以服務端沒法及時釋放對象，對性能不友好，須要進一步改進。