WebSocket In ASP.NET Core(一)


.NET-Core Series

What Is WebSocket?

WebSocket 是一種在單個 TCP 連接上進行全雙工通訊的協議,是建立在TCP上、且獨立的協議。在WebSocket API 中,瀏覽器和服務器只需要完成一次握手,兩者之間就可以進行持久性的連接,並進行雙向數據傳輸。

  為了建立WebSocket 連接,瀏覽器 通過 Http 1.1 協議的101 StatusCode 進行握手。

 以下是我本地的一個WebSocket 握手請求的例子:

Client Request:

GET ws://localhost:62713/ws HTTP/1.1
Host: localhost:62713
Connection: Upgrade
Pragma: no-cache
Cache-Control: no-cache
Upgrade: websocket
Origin: http://localhost:62713
Sec-WebSocket-Version: 13
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.91 Safari/537.36
DNT: 1
Accept-Encoding: gzip, deflate, br
Accept-Language: en,zh-CN;q=0.8,zh;q=0.6,zh-TW;q=0.4
Sec-WebSocket-Key: aXo04R8eiNAZOIO1WJqXEQ==
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits

Server Response:

HTTP/1.1 101 Switching Protocols
Connection: Upgrade
Date: Fri, 15 Sep 2017 03:10:05 GMT
Server: Kestrel
Upgrade: websocket
Sec-WebSocket-Accept: gmzB2zS5RSQhQT9LFZXZczHMjKQ=

一些關鍵字段的說明,

  • Connection 必須設置為 Upgrade,表示客戶端希望連接升級。
  • Upgrade 字段必須設置 Websocket,表示希望升級到 Websocket 協議。
  • Sec-WebSocket-Key: 是一個 Base 64 Encode 的值,服務端會用這些數據來構造出一個SHA-1 的信息摘要。之后進行 Base-64 編碼,將結果作為 Sec-WebSocket-Accept 頭的值,返回給客戶端。

關鍵詞: 持久連接,持久化協議,全雙工

What Is This Article About?

 這篇文章你會了解到的是 WebSocket 在.NET-Core 中的一些基礎實現和實踐,首先先以官方給出的WebSocket入門,然后再構建WebSocket中間件,最后會用WebSocket 來實現一個實時聊天的小Demo。

Use WebSockets In ASP.NET Core

A Simple Explaination For Official Demo

 首先以官方給出的WebSocket的例子入門,大致介紹一下。效果圖大概就是下面這樣的。

就是我發什么信息,服務器就實時回復我什么信息。主要代碼如下:首先要接受

// Configure function 
///Summary
// 這里主要是監聽 WebSocket的請求,然后Invoke Echo 方法進行相關操作。比如,它接受到瀏覽器發來 WebSocket 的Close 命令了,那么在Echo 方法直接 await webSocket.CloseAsync(result.CloseStatus.Value... 相關操作
///Summary
app.Use(async (context, next) =>
            {
                if (context.Request.Path == "/ws")
                {
                    if (context.WebSockets.IsWebSocketRequest)
                    {
                        WebSocket webSocket = await context.WebSockets.AcceptWebSocketAsync();
                        await Echo(context, webSocket);
                    }
                    else
                    {
                        context.Response.StatusCode = 400;
                    }
                }
            });

//Echo function
 private async Task Echo(HttpContext context, WebSocket webSocket)
        {
            var buffer = new byte[1024 * 4];
            WebSocketReceiveResult result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
            while (!result.CloseStatus.HasValue)
            {
                await webSocket.SendAsync(new ArraySegment<byte>(buffer, 0, result.Count), result.MessageType, result.EndOfMessage, CancellationToken.None);

                result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
            }
            await webSocket.CloseAsync(result.CloseStatus.Value, result.CloseStatusDescription, CancellationToken.None);
        }

前端使用 js 來發送WebSocket 請求,讓我們來看一下當我點擊 Connect 時,到底發生了什么。下面用動圖來演示一下。

是不是很熟悉,首先通過Http 發送101 ,轉換協議,然后就進行WebSocket 通信了。因為在前面已經介紹過了WebSocket的工作原理了。

如果把Echo 方法中 Send 方法的 buffer修改,你就可以自己設定想要的回饋,

var abuffer = Encoding.ASCII.GetBytes("Hola, This is robert from cnblogs.");
 await webSocket.SendAsync(new ArraySegment<byte>(abuffer, 0, abuffer.Length), result.MessageType, result.EndOfMessage, CancellationToken.None);
                result = await webSocket.ReceiveAsync(new ArraySegment<byte>(abuffer), CancellationToken.None);

結果就如下圖所示這樣:

官方的例子講解就到這里了。可以自己動手實踐一下。接下來講解如何基於上述的例子我們來構建一個在線實時聊天系統。

Building Real-Time WebSocket Demo

 效果圖是下面這樣的,

具體怎么實現的,下篇博文介紹。😄😄

End Of Article

 如有陳述錯誤處,請多多指正。

Reference


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM