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

来源:https://www.cnblogs.com/tthjHiroki/archive/2020/07/07/13261763.html

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

④案例缺點:核心頁面斷開連接時服務端沒有去監聽,因此服務端無法及時釋放對象,對性能不友好,需要進一步改進。


您的分享是我們最大的動力!

更多相關文章
  • 一. 安裝依賴包 yum install -y wget yum install -y gcc-c++ yum install -y zlib-devel perl-ExtUtils-MakeMaker yum -y install curl-devel expat-devel gettext-de ...
  • 解決辦法: https://tunatore.wordpress.com/2015/06/15/org-jboss-tools-vpe-xulrunner-xulrunnerbundlenotfoundexception-bundle-org-mozilla-xulrunner-win32-win3 ...
  • **前言** Topological sort 又稱 Topological order,這個名字有點迷惑性,因為拓撲排序並不是一個純粹的排序演算法,它只是針對某一類圖,找到一個可以執行的線性順序。 這個演算法聽起來高大上,如今的面試也很愛考,比如當時我在面我司時有整整一輪是基於拓撲排序的設計。 但它其 ...
  • 前言 面試總是會被問到有沒有用過分散式鎖、redis 鎖,大部分讀者平時很少接觸到,所以只能很無奈的回答 “沒有”。本文通過 Spring Boot 整合 redisson 來實現分散式鎖,並結合 demo 測試結果。 首先看下大佬總結的圖 正文 添加依賴 <!--redis--> <depende ...
  • 本文屬於OData系列 目錄 武裝你的WEBAPI-OData入門 武裝你的WEBAPI-OData便捷查詢 武裝你的WEBAPI-OData分頁查詢 武裝你的WEBAPI-OData資源更新Delta 武裝你的WEBAPI-OData之EDM 武裝你的WEBAPI-OData常見問題 武裝你的WE ...
  • abp版本5.9 概述 數據遷移無非就是兩件事情,1、創建資料庫,並根據實體創建對應的表;2、添加一些初始數據 abp的數據遷移也是完成這兩件事,比較特殊的是它是多租戶saas系統,而且支持不同的租戶有獨立的資料庫。所以abp中的遷移要先遷移戶主Host,再遷移租戶Tenant的資料庫 它的遷移定義 ...
  • 前言 上一篇文章主要介紹了IL的概念以及基礎的示例代碼,在這一篇文章中我們將通過對象調用看IL。 創建對象與調用方法 class Program { static void Main(string[] args) { var obj = new MyClass(); Console.WriteLin ...
  • 找到項目中ServiceStack.Text.dll文件的版本,比如我的版本是5.0.0,到GitHub上下載對應的源碼(https://github.com/ServiceStack/ServiceStack.Text/tags) 打開解決方案,重新生成ServiceStack.Text項目,如果 ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...