websocket簡易demo

websocket可以通過長連接通信,類似於socket

今天實現一個最簡單的demo,記錄一下

參考文檔 https://docs.microsoft.com/zh-cn/aspnet/core/fundamentals/websockets?view=aspnetcore-3.1

環境

win10 / vs2019 / .net core 3.1

建立項目

1.建立.net core的控制台項目

2.添加nuget包

　　// .net core kestrel服務器

　　Microsoft.AspNetCore.Server.Kestrel 

　　// websocket 包,.net core自家的

       Microsoft.AspNetCore.WebSockets

　　// 配置工具,不是必須

　　Microsoft.Extensions.Configuration.Json

3.添加文件

　　kestrel.json // 設置kestrel服務器監聽端口

{
  "server.urls": "http://localhost:10800;http://*:10800"
}

4.Program.cs  main方法修改

        static void Main(string[] args)
        {
            
            // kestrel服務器配置文件載入
            IConfiguration kestrelCfg = new ConfigurationBuilder()
                .AddJsonFile("kestrel.json")
                .Build();

            // websocket配置文件
            var webSocketCfg = new WebSocketOptions()
            {
                // 向客戶端發送“ping”幀的頻率,以確保代理保持連接處於打開狀態。.默認值為 2 分鍾.
                KeepAliveInterval = TimeSpan.FromSeconds(120),
                // 用於接收數據的緩沖區的大小.高級用戶可能需要對其進行更改,以便根據數據大小調整性能.默認值為4 KB.
                ReceiveBufferSize = 4 * 1024
            };

相比http連接,websocket建立連接后,可以主動向客戶端發送消息.為了驗證這一點,在服務端做了一個定時器

當websocket建立連接后,定時向客戶端發送當前時間

t = new System.Timers.Timer
{
    Interval = 2000
};
t.Elapsed += T_Elapsed;
t.Start();

        private static void T_Elapsed(object sender, System.Timers.ElapsedEventArgs e)
        {
            
                WebSocket webSocket = connDict[1];
                byte[] rebuffer = System.Text.Encoding.UTF8.GetBytes("服務器報時: " + DateTimeOffset.Now.ToString());
                ArraySegment<byte> re = new ArraySegment<byte>(rebuffer, 0, rebuffer.Length);

                webSocket.SendAsync(re, WebSocketMessageType.Text, true, CancellationToken.None);
             
        }

5.添加index.html

　　前端發起websocket請求,依靠WebSocket對象,

　　文檔 http://www.ruanyifeng.com/blog/2017/05/websocket.html

　　　　https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

　　　　https://www.runoob.com/html/html5-websocket.html

　　這個對象比較簡單,close()方法關閉連接,send()方法發消息,有幾個相應事件,還有連接狀態

 // 打開一個 web socket
     let ws = new WebSocket("ws://localhost:10800/ws");

// 打開
      ws.onopen = function (e) {
        // Web Socket 已連接上，使用 send() 方法發送數據
        printMsg('sebsocket連接成功!');
      };

      // 如果連接發生錯誤 不要使用try catch處理,使用這個事件
      ws.onerror = function (e) {
        printMsg('websocket初始化錯誤!');
      }

 

事件

open	Socket.onopen	連接建立時觸發
message	Socket.onmessage	客戶端接收服務端數據時觸發
error	Socket.onerror	通信發生錯誤時觸發
close	Socket.onclose	連接關閉時觸發

 

 

 

 

 

方法

Socket.send()	使用連接發送數據
Socket.close()	關閉連接

 

 

 

 

6.測試

運行服務端程序,kestrel服務器開啟監聽

打開index.html文件,點擊建立連接,發送一點消息,此時會發現不斷收到消息

以前使用http要定時的發請求,這里沒有發請求,服務端的報時消息發來了,說明websocket是長連接的

可以在另外打開一個瀏覽器,發起新的websocket連接,結果同樣.

7.demo地址

https://github.com/mirrortom/Demo/tree/master/WebSocketTest