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 = 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下載原始碼。
疫情當前，公司發展不順，舊專案停擺，新專案需求不明。像當前這樣的企業破產潮，我是比較緊張的，畢竟不是小年輕，技術又不是特別過硬，不上不下的焦慮的很。但是也明白，行動起來，每天讓自己靠近目標一點點，是解決焦慮的不二法門。
能寫一些部落格，就寫一些部落格吧，我也不確定寫這個對我自己有什麼幫助，對讀者都多大的幫助，就當備忘錄吧。
當一個會折騰的“前浪”...
歡迎建設性的批評和指導意