Asp.Net Mvc基於Fleck開發的多人網頁版即時聊天室

来源:https://www.cnblogs.com/dissun/archive/2020/05/31/12932239.html
-Advertisement-
Play Games

本文章主要用於介紹在Asp.Net Mvc(C#)中使用Fleck製作一個Html5的即時聊天室,含有完整代碼和演示Demo。 ...


一、項目的核心說明

1、Fleck這個是實現websocket一個比較簡單第三方組件,它不需要安裝額外的容器。本身也就幾個介面可供調用。

2、項目是基於.net framework 4.7.2 ,在vs2019上開發的,沒試過在低版本上運行。但是代碼上沒怎麼用到新特性,所以估計是可以被低版本使用的。

3、這個項目並不是真實項目,也就是玩一下,但是對熟悉Fleck或者瞭解及時聊天,應該有一丁點的啟發作用。

 

二、Fleck 的簡要說明(https://github.com/statianzo/Fleck)

1、最簡單、最常用的調用方法:(ws://172.10.3.4:8111改成您的伺服器本地IP和埠)

//控制台代碼
var server = new WebSocketServer("ws://172.10.3.4:8111");
server.Start(socket =>
{
  socket.OnOpen = () => Console.WriteLine("產生連接處理");
  socket.OnClose = () => Console.WriteLine("連接斷開處理");
  socket.OnMessage = (message) => {
  //1、此方法用於接收客戶端發送來的消息
  //2、可以做一些自己的操作,例如存入資料庫
  //3、為了響應客戶端,一般會使用下麵的send函數,返迴響應結果。
  socket.Send(message);
  }
});

2、Fleck本身只負責幫你單線聯繫。也就是客戶端A和伺服器建立連接後,會產生一個IWebSocketConnection,也就是上面代碼中socket變數的類型,它包含了接收方法、發送方法,但是都僅限於單一連接內。至於客戶端A想發送消息給客戶端B、C、D亦或者想群發,不好意思Fleck本身不Care。。。當然了那並不是這個功能就不能實現了,只是要開發者自己去把每一個IWebSocketConnection存儲起來,並管理他們的生存周期,通過自己的代碼去實現客戶端A給B發信息或者群發。

3、Fleck不需要額外的容器或進程來運行,它隨著IIS網站運行,也就是在w3wp.exe。至於它是怎麼運行的,目前我還沒有去看源碼,後期有時間再瞧瞧。

 

三、聊天室源碼位置

1、GitHub:https://github.com/DisSunRestart2020/DisSunChat

2、碼雲:https://gitee.com/dissun/DisSunChat

3、微信掃碼演示(網路時好時壞)

        

 

四、核心代碼說明。

1、IWebSocketHelper介面。因為一開始,我是想用多個插件來實現聊天室,所以想用一個介面來做行為封裝。結果完成了Fleck之後,發現其他的操作模式都不太相同,很難封裝就放棄了,但是保留這個介面,是為了體現擴展性。

    /// <summary>
    /// 所有調用WebSocket的幫助類必須遵從的協議
    /// </summary>
    public interface IWebSocketHelper
    {
        /// <summary>
        /// websocket連通後觸發事件
        /// </summary>
        event SwitchEventHandler WsOpenEventHandler;
        /// <summary>
        /// websocket連接關閉後觸發事件
        /// </summary>
        event SwitchEventHandler WsCloseEventHandler;
        /// <summary>
        /// websocket監聽到消息後觸發事件
        /// </summary>
        event ListenEventHandler WsListenEventHandler;
        /// <summary>
        /// websocket響應處理事件
        /// </summary>
        event ResponseTextEventHandler WsResponseTextEventHandler;
        /// <summary>
        /// 聊天室線上人數
        /// </summary>
        int PlayerCount
        {
            get;
            set;
        }
        /// <summary>
        /// websocket初始化
        /// </summary>
        void WebSocketInit();

        /// <summary>
        /// 向全員發送信息
        /// </summary>
        /// <param name="wsocketMsg"></param>
        void SendMessageToAll(WebSocketMessage wsocketMsg);
        /// <summary>
        /// 向自己發送信息
        /// </summary>
        /// <param name="wsocketMsg"></param>
        void SendMessageToMe(WebSocketMessage wsocketMsg);
    }

介面中用到了4個委托事件,這裡稍微簡單的複習一下委托和事件。

①委托從使用形式來說,是指我們可以把一個函數作為參數進行傳遞,例如我們在解一道數學題,條件和要求都是一樣的,但是求解的過程可以多種多樣,通過委托就可以在不改變主體程式的同時,把不同的求解過程,封裝到不同的函數中,然後把函數作為參數傳入主體程式。

②委托從模式的角度來說,是在實現觀察者模式。訂閱者\觀察者告訴發佈者\主題,如果發生了某一特定事情該怎麼處理,“怎麼處理”的過程就是委托方法的內容

③事件其實就是一個委托,都說事件是一個特殊委托,特殊在哪裡,特殊在它對委托增加了約束,讓你不能毫無顧忌的使用委托,這是為了保證封裝性。

④上面的4個事件,其實我可以直接換成4個委托屬性,對程式運行不會有太大影響。但是為什麼要使用事件,還是第三點的封裝性。事件本來的用意,是達到特定條件後讓發佈者自己來觸發委托方法的執行,但是如果使用委托屬性,訂閱者本身就可以進行調用,封裝性就很差。

⑤上面的4個事件,分別是訂閱者告訴Fleck中心,新長連接接通怎麼辦、長連接斷開怎麼辦、客戶端發來消息怎麼辦、要返回客戶端的消息怎麼轉換。

 

2、Fleck類的實現。Fleck實現了IWebSocketHelper介面,這是這個項目的核心代碼。

  1 public class FleckHelper:IWebSocketHelper
  2     {
  3         /// <summary>
  4         /// websocket連通後觸發事件
  5         /// </summary>
  6         public event SwitchEventHandler WsOpenEventHandler;
  7         /// <summary>
  8         /// websocket連接關閉後觸發事件
  9         /// </summary>
 10         public event SwitchEventHandler WsCloseEventHandler;
 11         /// <summary>
 12         /// websocket監聽到消息後觸發事件
 13         /// </summary>
 14         public event ListenEventHandler WsListenEventHandler;
 15         /// <summary>
 16         /// websocket反饋客戶端的文本處理事件
 17         /// </summary>
 18         public event ResponseTextEventHandler WsResponseTextEventHandler;       
 19         /// <summary>
 20         /// 聊天室線上人數 
 21         /// </summary>
 22         public int PlayerCount
 23         {
 24             get;
 25             set;
 26         }
 27         /// <summary>
 28         /// websocket已經連通的連接集合
 29         /// </summary>
 30         private Hashtable socketListHs = new Hashtable();
 31       
 32         public void WebSocketInit()
 33         {
 34        
 35             string websocketPath = Utils.GetConfig("websocketPath");
 36             WebSocketServer wsServer = new WebSocketServer(websocketPath);            
 37 
 38             wsServer.Start(socket =>
 39             {         
 40                 //以下的設置,每當一個新連接進來,都會生效。
 41                 socket.OnOpen = () => {
 42                     //自定義處理
 43                     
 44                     if (this.WsOpenEventHandler != null)
 45                     {
 46                         WebsocketEventArgs args = new WebsocketEventArgs();
 47                         this.WsOpenEventHandler(this, args);
 48                     }
 49                 };
 50 
 51                 socket.OnClose = () => {
 52                     //從連接集合中移除                    
 53                     for (int i= socketListHs.Count-1; i>=0;i--)
 54                     {
 55                         if (socketListHs[i] == null)
 56                         {                           
 57                             socketListHs.Remove(i);
 58                         }                        
 59                     }
 60                     PlayerCount = socketListHs.Count;
 61                     //自定義處理
 62                     if (this.WsCloseEventHandler != null)
 63                     {
 64                         WebsocketEventArgs args = new WebsocketEventArgs();
 65                         this.WsCloseEventHandler(this, args);
 66                     }
 67                 };
 68 
 69                 socket.OnMessage = (message) =>
 70                 {
 71                     ClientData cData = Utils.JsonToObject<ClientData>(message);
 72                     WebSocketMessage wsocketMsg = new WebSocketMessage(socket.ConnectionInfo.ClientIpAddress, socket.ConnectionInfo.ClientPort.ToString(), socket.ConnectionInfo.Id.ToString("N"), cData);
 73 
 74                     if (Convert.ToBoolean(cData.IsConnSign))
 75                     {
 76                         //收到用戶上線信息,更新socket列表
 77                         if (!socketListHs.ContainsKey(cData.IdentityMd5))
 78                         {
 79                             socketListHs.Add(cData.IdentityMd5, socket);
 80                         }
 81                         else
 82                         {
 83                             socketListHs[cData.IdentityMd5] = socket;
 84                         }
 85                         PlayerCount = socketListHs.Count;
 86                     }
 87 
 88                     if (this.WsListenEventHandler != null)
 89                     {
 90                         WebsocketEventArgs args = new WebsocketEventArgs();
 91                         args.WebSocketMessage = wsocketMsg;
 92                         this.WsListenEventHandler(this, args);
 93                     }
 94                 };
 95 
 96             });
 97         }   
 98 
 99         /// <summary>
100         /// 向全員發送信息
101         /// </summary>
102         /// <param name="wsocketMsg"></param>
103         public void SendMessageToAll(WebSocketMessage wsocketMsg)
104         {           
105             string resultData = "";
106             if (this.WsResponseTextEventHandler != null)
107             {
108                 WebsocketEventArgs args = new WebsocketEventArgs();
109                 args.WebSocketMessage = wsocketMsg;
110                 this.WsResponseTextEventHandler(this, args);
111                 resultData = args.ResultDataMsg;
112             }
113 
114             if (!string.IsNullOrWhiteSpace(resultData))
115             {
116                 foreach (DictionaryEntry dey in socketListHs)
117                 {
118                     IWebSocketConnection subConn = (IWebSocketConnection)dey.Value;
119                     subConn.Send(resultData);
120                 }          
121             }
122         }      
123         
124     }


①代碼中IdentityMd5是我自己通過各種本地信息算出來的身份標識,因為在在微信上運行cookie不穩定,不能在本地存儲任何信息,只能通過演算法把環境信息合成一個唯一值。

②前面說過,Fleck只負責單線聯繫,每一個連接都是一個IWebSocketConnection,所以我需要把IdentityMd5和IWebSocketConnection存起來,方便索引調用。

③socket.OnMessage中,socketListHs是存儲IWebSocketConnection的集合,每次有消息發來,如果判斷是新的IdentityMd5就會存起來。

④socket.OnClose 中,如果有連接斷開了,IWebSocketConnection就會為null,所以遍歷集合,然後把值為null剔除就能保持socketListHs集合的有效性

⑤SendMessageToAll函數用於群發消息,遍歷集合中所有的對象,調用每個IWebSocketConnection.Send(),就可以把消息發送出去。如果想從客戶端A發到客戶端B,也得利用IdentityMd5來做文章,本項目由於是聊天室並不需要這個功能,所以就省略了。

⑥socket.OnOpen、socket.OnClose、socket.OnMessage都是Fleck自行觸發的事件,前面一開始我們介紹過了,例如OnOpen中,如果我們需要當建立新連接時記錄日誌,我們就可以對WsOpenEventHandler賦值(本項目在Global.asax的Application_Start中用lambda賦值),如下:

        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            RouteConfig.RegisterRoutes(RouteTable.Routes);                   
            App_Start.FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            
         ChatService chatService = new ChatService();
            try
            {

                IWebSocketHelper helper = new FleckHelper();//用FleckHelper來實例化IWebSocketHelper 介面。
                helper.WebSocketInit();
                  
                helper.WsOpenEventHandler +=(sender, args)=>{
                    Utils.SaveLog("WebSocket已經開啟2");
                };

                helper.WsCloseEventHandler += (sender, args) => {
                    Utils.SaveLog("WebSocket已經關閉2");
                };

                helper.WsListenEventHandler += (sender, args) => {
                    Utils.SaveLog("WebSocket監聽到了消息2");
                    if (!Convert.ToBoolean(args.WebSocketMessage.ClientData.IsConnSign))
                    {
                        chatService.CreateChatInfo(args.WebSocketMessage);
                        args.WebSocketMessage.ClientData.SMsg = Utils.ReplaceIllegalWord(args.WebSocketMessage.ClientData.SMsg);
                    }
                    else
                    {
                        string clientName = args.WebSocketMessage.CIp + ":" + args.WebSocketMessage.CPort;
                        string traceInfo = string.Format("{0} 加入聊天室(共{1}人線上)", clientName, helper.PlayerCount);
                        args.WebSocketMessage.ClientData.SMsg = traceInfo;
                    }
                    //給所有人轉發消息
                    helper.SendMessageToAll(args.WebSocketMessage);
                };

                helper.WsResponseTextEventHandler += (sender, args) => {
                    string jsonStr = Utils.ObjectToJsonStr(args.WebSocketMessage);
                    args.ResultDataMsg = jsonStr;
                };

               
            }
            catch(Exception ex)
            {
                Utils.SaveLog("發現了錯誤:" + ex.Message);
            }
        }

 3、在html端連接Fleck,只須一個一個WebSocketJs.js文件。

var socket;
var websocketInit = function (wsPath) {
    if (typeof (WebSocket) === "undefined") {
        socket = null;
        console.log("瀏覽器不支持websocket");
    } else {
        // 實例化socket
        socket = new WebSocket(wsPath);
        // 監聽socket連接
        socket.onopen = wsOnOpen;
        //監聽socket關閉
        socket.onclose = wsOnClose;
        // 監聽socket錯誤信息
        socket.onerror = wsOnError;
        // 監聽socket消息
        socket.onmessage = wsOnMessage;
    }
}


var wsOnOpen = function () {
    console.log("已經成功連接");
    var sMsg = "";

    var sendMsg = "{\"IdentityMd5\":\"" + identityMd5 + "\",\"SMsg\":\"\",\"ImgIndex\":\"" + imgIndex + "\",\"IsConnSign\":\"true\"}";
    socket.send(sendMsg);
}

var wsOnClose = function () {
    console.log("已經關閉連接");
}


var wsOnError = function (evt) {
    console.log("異常:" + evt);
}

var wsSend = function (sMsg) {     
    if (socket == null || sMsg == "") return false;
    console.log("消息成功發出");
    socket.send(sMsg);
}
 

①WebSocket是瀏覽器內置的一個類型,現在一般的瀏覽器都支持,但是還是typeof (WebSocket)來做一下判斷。

②然後在啟動時載入即可(ws://14.215.177.1:8111改成您的伺服器公網IP和埠)。

$(function () {
 
    websocketInit("ws://14.215.177.1:8111");    
  
});

 

********** End *****************

上面這些也只是部分代碼,需要可運行代碼,請去github下載源碼。

疫情當前,公司發展不順,舊項目停擺,新項目需求不明。像當前這樣的企業破產潮,我是比較緊張的,畢竟不是小年輕,技術又不是特別過硬,不上不下的焦慮的很。但是也明白,行動起來,每天讓自己靠近目標一點點,是解決焦慮的不二法門。

能寫一些博客,就寫一些博客吧,我也不確定寫這個對我自己有什麼幫助,對讀者都多大的幫助,就當備忘錄吧。

當一個會折騰的“前浪”...

 

歡迎建設性的批評和指導意見。


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

-Advertisement-
Play Games
更多相關文章
  • Java生鮮電商平臺-生鮮電商中配送訂單解決方案(小程式/APP) 說明:在日常的生鮮電商平臺中,生鮮配送是一個不可獲取的環節,根據實際的業務場景,生鮮配送有兩個維度需要考慮 1. 時間維度。 說明:時間維度是指客戶一般什麼時候要,就是什麼時候配送的問題,如果是前置倉模式,那麼就需要29分必送達,如 ...
  • 註釋是為了使別人能看懂你寫的程式,也為了使你在若幹年後還能看得懂你曾經寫的程式而設定的。 註釋是寫給程式員看的,不是寫給電腦看的。所以註釋的內容,C語言編譯器在編譯時會被自動忽略,不會執行註釋的代碼! 方法一:使用// #include "stdafx.h" //main函數 :程式的入口函數,就好 ...
  • 有很多剛學習軟體測試的小伙伴,都會在網路上找尋各種學習資料,去提升自己的專業技能水平。因此,我決定定期分享我整理收集的一些軟體測試的測試工具下載、面試寶典、視頻教學合集。都整理好了,有需要的可以關註我(獲取方式在文末) 軟體測試的學習,不止是基礎理論,還需要學習測試工具的用法,如介面工具Postma ...
  • 女程式員是這麼徵婚的: SELECT * FROM 男人們 WHERE 未婚=true and 同性戀=false and 有房=true and 有車=true and 條件 in (帥氣,紳士,大度,氣質,智慧,溫柔,體貼,會浪漫,活潑,可愛,最好還能帶孩子) and 年齡 between(24 ...
  • API 概述 API(Application Programming Interface),應用程式編程介面。 Java API是一本程式員的 字典 ,是JDK中提供給我們使用的類的說明文檔。 這些類將底層的代碼實現封裝了起來,我們不需要關心這些類是如何實現的,只需要學習這些類如何使用即可。 所以我 ...
  • 0. 前言 該項目使用Maven進行管理和構建,所以需要預先配置好Maven。嗯,在這個系列里就不做過多的介紹了。 1. 創建項目 先創建一個pom.xml 文件,添加以下內容: <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http: ...
  • Data StructureThere're two types of variables in C#, reference type and value type.Enum:enum Color{Red=0,Green=1}//equals to enum Color{Red,//start fr... ...
  • 出庫單的功能。能學習了出庫單管理之後,WMS的 主體功能算是完成了。當然一個成熟的WMS還包括了盤點,報表,策略規則,移庫功能及與其他系統(ERP、TMS等)的介面,實現無縫集成,打破信息孤島,讓數據實時、準確和同步。 ...
一周排行
    -Advertisement-
    Play Games
  • 概述:本文代碼示例演示瞭如何在WPF中使用LiveCharts庫創建動態條形圖。通過創建數據模型、ViewModel和在XAML中使用`CartesianChart`控制項,你可以輕鬆實現圖表的數據綁定和動態更新。我將通過清晰的步驟指南包括詳細的中文註釋,幫助你快速理解並應用這一功能。 先上效果: 在 ...
  • openGauss(GaussDB ) openGauss是一款全面友好開放,攜手伙伴共同打造的企業級開源關係型資料庫。openGauss採用木蘭寬鬆許可證v2發行,提供面向多核架構的極致性能、全鏈路的業務、數據安全、基於AI的調優和高效運維的能力。openGauss深度融合華為在資料庫領域多年的研 ...
  • openGauss(GaussDB ) openGauss是一款全面友好開放,攜手伙伴共同打造的企業級開源關係型資料庫。openGauss採用木蘭寬鬆許可證v2發行,提供面向多核架構的極致性能、全鏈路的業務、數據安全、基於AI的調優和高效運維的能力。openGauss深度融合華為在資料庫領域多年的研 ...
  • 概述:本示例演示了在WPF應用程式中實現多語言支持的詳細步驟。通過資源字典和數據綁定,以及使用語言管理器類,應用程式能夠在運行時動態切換語言。這種方法使得多語言支持更加靈活,便於維護,同時提供清晰的代碼結構。 在WPF中實現多語言的一種常見方法是使用資源字典和數據綁定。以下是一個詳細的步驟和示例源代 ...
  • 描述(做一個簡單的記錄): 事件(event)的本質是一個委托;(聲明一個事件: public event TestDelegate eventTest;) 委托(delegate)可以理解為一個符合某種簽名的方法類型;比如:TestDelegate委托的返回數據類型為string,參數為 int和 ...
  • 1、AOT適合場景 Aot適合工具類型的項目使用,優點禁止反編 ,第一次啟動快,業務型項目或者反射多的項目不適合用AOT AOT更新記錄: 實實在在經過實踐的AOT ORM 5.1.4.117 +支持AOT 5.1.4.123 +支持CodeFirst和非同步方法 5.1.4.129-preview1 ...
  • 總說周知,UWP 是運行在沙盒裡面的,所有許可權都有嚴格限制,和沙盒外交互也需要特殊的通道,所以從根本杜絕了 UWP 毒瘤的存在。但是實際上 UWP 只是一個應用模型,本身是沒有什麼許可權管理的,許可權管理全靠 App Container 沙盒控制,如果我們脫離了這個沙盒,UWP 就會放飛自我了。那麼有沒... ...
  • 目錄條款17:讓介面容易被正確使用,不易被誤用(Make interfaces easy to use correctly and hard to use incorrectly)限制類型和值規定能做和不能做的事提供行為一致的介面條款19:設計class猶如設計type(Treat class de ...
  • title: 從零開始:Django項目的創建與配置指南 date: 2024/5/2 18:29:33 updated: 2024/5/2 18:29:33 categories: 後端開發 tags: Django WebDev Python ORM Security Deployment Op ...
  • 1、BOM對象 BOM:Broswer object model,即瀏覽器提供我們開發者在javascript用於操作瀏覽器的對象。 1.1、window對象 視窗方法 // BOM Browser object model 瀏覽器對象模型 // js中最大的一個對象.整個瀏覽器視窗出現的所有東西都 ...