Asp.Net Mvc基于Fleck開發的多人網頁版即時聊天室-有解無憂

一、專案的核心說明

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 = https://www.cnblogs.com/dissun/p/Utils.JsonToObject(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 = https://www.cnblogs.com/dissun/p/"";
106             if (this.WsResponseTextEventHandler != null)
107             {
108                 WebsocketEventArgs args = new WebsocketEventArgs();
109                 args.WebSocketMessage = wsocketMsg;
110                 this.WsResponseTextEventHandler(this, args);
111                 resultData =https://www.cnblogs.com/dissun/p/ 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下載原始碼，

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

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

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

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/26981.html

標籤：C#

上一篇：C#基礎篇——泛型

下一篇：C# 基礎(更新中)