C#使用WebSocket與網頁實時通信的實現(xiàn)示例

更新時間：2022年08月22日 08:28:01 作者：Three Big Stones

本文主要介紹了C#使用WebSocket與網頁實時通信的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

目的：使用Fleck框架實現(xiàn)網頁與服務端實時通信

傳統(tǒng)的網站采用http方式與服務端通信，屬于請求響應模式，如何讓網頁與服務器之間能使用TCP這種雙向通信方式實時交流，答案就是使用WebSocket技術。

Fleck框架的安裝方式：

1、使用NuGet包管理工具安裝

Install-Package Fleck -Version 1.2.0

2、下載Fleck源碼并編譯程序集供服務端引用

github地址：https://github.com/statianzo/Fleck/archive/refs/heads/master.zip

gitee地址：https://gitee.com/mylikekefu/Fleck/repository/archive/master.zip

直接在VS中打開項目，并生成fleck項目程序集

3、新建WebSocket服務端項目，命名WebSocketConsoleApp

4、引用程序集Fleck.dll

5、程序入口類編寫服務端代碼，如下所示：

        static void Main(string[] args)
        {
            FleckLog.Level = LogLevel.Debug;
            var allSockets = new List<IWebSocketConnection>();
            var server = new WebSocketServer("ws://192.168.3.3:50000");
            server.Start(socket => {
            //客戶端連接上服務端，則在socket列表添加一個客戶端
            socket.OnOpen = () => {
                Console.WriteLine("Open!");
                allSockets.Add(socket);
            };
            //客戶端離線，則從socket列表刪除這個客戶端
            socket.OnClose = () => {
                Console.WriteLine("Close!");
                allSockets.Remove(socket);
            };
            socket.OnMessage = message => {
                Console.WriteLine(message);
                //給發(fā)送消息的客戶端回復一條消息
                socket.Send("Echo:" + message);
            });
 
            var input = Console.ReadLine();
            //給所有客戶端發(fā)送消息
            while(input!="exit")
            {
                foreach (var socket in allSockets.ToList())
                {
                    socket.Send(input);
                }
                input = Console.ReadLine();
            }
        }

6、啟動項目，打印如下信息，服務端啟動成功。

7、新建客戶端，使用瀏覽器F12控制臺模擬websocket客戶端，代碼如下所示：

ws = new WebSocket("ws://192.168.3.3:50000");
ws.onopen = function() { 
    ws.send('websocekt測試'); 
};
ws.onmessage = function(e) {
    alert("收到服務端的消息：" + e.data);
};

打開兩個瀏覽器頁面，分別F12，控制臺中輸入以上代碼，表示新建了兩個客戶端，將會分別收到服務端回復的消息。