很多情況下BS架構也會有客戶端和服務器進行長連接的功能需求,比如說聊天、或者說彈幕功能。
而WebSocket是一種在單個TCP連接上進行全雙工通信的協議,所以這個時候就使用到了websocket。
首先我們需要先寫一個簡單的客戶端網頁:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <hr> <input id="sendMsg" /> <button onclick="sendMessage();">消息發送</button> </body> <script> var ws = new WebSocket('ws://localhost:50728/api/websocket'); // 建立 web socket 連接成功觸發事件 ws.onopen = function () { var json={serverId:['11231','24423']} var messageJson = JSON.stringify(json); ws.send(messageJson);//可以給后台發送參數 }; function sendMessage() { var sendmsg = document.getElementById("sendMsg").value; ws.send(sendmsg); } //接收到消息的回調方法 ws.onmessage = function (event) { alert('數據回來了額'+ JSON.stringify(event.data)) console.log(event.data);//后台不間斷發送數據,持續接收。 } //斷開 web socket 連接成功觸發事件 ws.onclose = function () { alert("連接已關閉..."); }; ws.onerror = function(event) { console.log(event.data); } </script> </html>
比較簡單的一個測試網頁,那么接下來我們.net core 是如何編寫代碼的吧:
首先我們先添加中間件:
app.UseWebSockets(new WebSocketOptions { KeepAliveInterval = new TimeSpan(0, 0, 15) });
這里的KeepAliveInterval 的意思是心跳檢測的時間,這里是15s檢測一次,確保websocket不會斷開。
第二步就是編寫代碼了,別忘了 using System.Net.WebSockets;以及route應該是ws開頭的:
/// <summary> /// websocket連接 /// </summary> /// <returns></returns> [HttpGet] public async Task WebScoketConn() { var context = ControllerContext.HttpContext; //是否是websocket請求 if (context.WebSockets.IsWebSocketRequest) { var websocket = await context.WebSockets.AcceptWebSocketAsync(); while (!websocket.CloseStatus.HasValue) { try { //判斷連接是否打開 if (websocket.State == WebSocketState.Open) { byte[] recvBuffer = new byte[4096]; var recvAs = new ArraySegment<byte>(recvBuffer); var result = await websocket.ReceiveAsync(recvAs, CancellationToken.None); if (result.Count > 0 && result.MessageType == WebSocketMessageType.Text) { if (result.EndOfMessage) { if (Encoding.UTF8.GetString(recvBuffer, 0, result.Count) != "hello") { await websocket.SendAsync(new ArraySegment<byte>(recvBuffer), WebSocketMessageType.Text, true, CancellationToken.None); } } } } else if (websocket.State == WebSocketState.Aborted || websocket.State == WebSocketState.Closed || websocket.State == WebSocketState.CloseReceived || websocket.State == WebSocketState.CloseSent) { _logger.LogWarning($"WebSocket closed"); break; } } catch (Exception e) { _logger.LogError(e, $"Receive heartbeat failed"); } Thread.Sleep(1000); } } else { context.Response.StatusCode = 400; } }
然后我們啟動網頁可以發現已經連接上了,然后服務器會返回一開始發送的數據消息,
這就是比較簡單的websocket的使用方法,之后會用怎么用websocket實現類似於qq的聊天功能。還有配合消息隊列實現彈幕功能等。