聊天室的開始 WebSocket的基本應用使用.Net 6

websocket net 6 聊天室

Richie 2022-11-30 21:57:05 ‧ 2076 瀏覽

分享至

使用:.NET 6
後端為:Web API
想做聊天室，就必須透過WebSocket來通訊，
WebSocket 的流程請參考Web Scoket 流程，
這裡只講實作。

[後端]
1.建立專案

檔案>建立新專案>ASP.NET Core Web API(下一步)>輸入專案名稱(下一步)
架構選擇 .NET 6(建立)

2.建立Controller
=>右側方案總管選擇Controller 資料夾(右鍵)>新增控制項>在此命名為(WebSocketController)
(1)在這裡新增一個Get 請求，這個Get是當發送傳輸入 localhost:xxxx/ws 就會進入這個Method，
並檢查是否為WebScoket請求，如果是則進入Echo。
(2)Echo
=>判斷是否為WebSocket的等待請求項目，
如果是則會發請一個等待請求，以便接收client 來源的資料，
接收到了來源資料後檢查連線。
(3)發送資料至前端。
(4)接著等待接收資料。
(5)重複2-4
(6)如果連線中斷則關閉等待請求

    public class WebSocketController : Controller
    {
        [HttpGet("/ws")]
        public async Task Get()
        {
            //是否為webSocket請求 如果是則加入等待
            if (HttpContext.WebSockets.IsWebSocketRequest)
            {
                using var webSocket = await HttpContext.WebSockets.AcceptWebSocketAsync();
                await Echo(webSocket);
            }
            else
            {
                HttpContext.Response.StatusCode = StatusCodes.Status400BadRequest;
            }
        }

        private static async Task Echo(WebSocket webSocket)
        {
            var buffer = new byte[1024 * 4];
            //等待接收訊息
            var receiveResult = await webSocket.ReceiveAsync(
                 new ArraySegment<byte>(buffer), CancellationToken.None);
            //檢查是否為連線狀態
            while (!receiveResult.CloseStatus.HasValue)
            {
                //訊息發到前端
                await webSocket.SendAsync(
                    new ArraySegment<byte>(buffer, 0, receiveResult.Count),
                    receiveResult.MessageType,
                    receiveResult.EndOfMessage,
                    CancellationToken.None
                    );
                //繼續等待接收訊息
                receiveResult = await webSocket.ReceiveAsync(
                    new ArraySegment<byte>(buffer), CancellationToken.None);

            }
            //關閉連線
            await webSocket.CloseAsync(
                receiveResult.CloseStatus.Value,
                receiveResult.CloseStatusDescription, CancellationToken.None);

        }
    }

3.找到Program.cs 並增加注入設定
在var app = builder.Build(); 的後面增加如下程式碼

//註冊webSocket
var webSocketOptions = new WebSocketOptions
{
    //Proxy 保持連線開啟的頻率。 預設為兩分鐘
    KeepAliveInterval = TimeSpan.FromMinutes(2)
    //WebSocket 要求之允許 Origin 標頭值的清單
    //AllowedOrigins 
};

app.UseWebSockets(webSocketOptions);

至此後端就完成了。
可以開啟Postam測試

[前端]
直接來完整程式，註解都在裡面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
   
    <br/>
    <span>name</span><input type="text" id="txtName"/>    <br/>
    <span>Msg</span><input type="text" id="txtMsg"/>    <br/>
    <button id="btnSend">send</button>    <br/>
    <label id="lbMsg">

    </label>
</head>
<body>
    
    <script>
        var server = 'wss://localhost:7070'; //如果开启了https则这里是wss
        var vWebSocket=null;
        window.onload = function () {
            //建立一個web socket 連線
            vWebSocket=new WebSocket(server+'/ws');
            document.getElementById("btnSend").addEventListener("click", sendMsg);
            //如果連線成功
            vWebSocket.onopen=function(e){
                console.log('connection start ...');
                var content=document.getElementById("lbMsg");
                content.innerText=content.innerText+'\r\n'+"conection.....";
            }
            //接收到訊息時
            vWebSocket.onmessage=function(e){
                console.log('Recevied Message:'+e.data);
                if(e.data){
                    var content=document.getElementById("lbMsg");
                    content.innerText=content.innerText+'\r\n'+e.data;
                }
            }
            //關閉連線時
            vWebSocket.onclose=function(e){
                console.log("connection closed");
            }
        };

        function sendMsg()
        {
            var txtName=document.getElementById("txtName").value;
            var txtMsg=document.getElementById("txtMsg").value;
            if (txtName) {
                var data = {
                    action: 'sendMsg',
                    name: txtName,
                    msg: txtMsg
                };
                vWebSocket.send(JSON.stringify(data));
            }
        }

    </script>
</body>
</html>

Git完整程式碼

參考:https://www.cnblogs.com/kklldog/p/core-for-websocket.html
參考:https://learn.microsoft.com/en-us/aspnet/core/fundamentals/websockets?view=aspnetcore-6.0