.NET WebSockets 核心原理初體驗

_小碼甲發表於2021-04-21
Web

上個月我寫了《.NET gRPC核心功能初體驗》， 裡面使用gRPC雙向流做了一個打乒乓球的Demo， 實時雙向這兩個標籤是不是很熟悉，對， WebSockets也可以做實時雙向通訊。

本文將利用WebSockets(SignalR的一部分)搭建一個可雙向通訊的ASP.NETCore5應用。
(? 預告： 下期將著重對比gRPC和WebSockets的差異和使用場景。)

我們先深入研究基本概念，以瞭解WebSockets幕後情況。

WebSockets簡介

為支援在在客戶端/服務端雙向通訊，引入了WebSockets.

HTTP 1.0：我們每次向伺服器傳送請求時都需要重新建立連線(關閉之前的連線)。
HTTP 1.1中，新增的keep-alive語法引入了持久連線機制,至此連線可以被重用---這能減小通訊延遲(因為伺服器能感知客戶端，並且不需要為每個請求重開握手過程)

WebSockets 依附於HTTP1.1協議的持久連線機制，因此如果你是第一次發起WebSockets連線，這實際是一個HTTP1.1請求，協商成功後開始全雙工通訊。

下圖描述了初始化(握手),資料傳輸,關閉WebSockets的過程。

協議有兩部分： 握手和資料傳輸

握手

"握手"的目的是與基於HTTP協議的服務端軟體和代理程式相容，這樣 http客戶端/websocket客戶端都可以使用一個埠與伺服器通訊。

簡而言之，WebSocket連線基於單個埠上的HTTP（以TCP傳輸）：

  1. 伺服器在指定的埠(80/443)上監聽傳入的TCP套接字連線
  2. 客戶端使用HTTP GET請求啟動握手(這就是“WebSockets”中的“Web”含義)。
    在請求頭中，客戶端將要求伺服器將連線Upgrade到WebSocket。
  3. 伺服器傳送一個握手響應，通知客戶端它將把協議從HTTP更改為WebSocket。
  4. 客戶端/伺服器協商連線細節。如果條款不匹配，任何一方都可以退出。
GET /ws-endpoint HTTP/1.1
Host: example.com:80
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: L4kHN+1Bx7zKbxsDbqgzHw==
Sec-WebSocket-Version: 13

請注意： 客戶端傳送Connection:Upgrade和Upgrade：websocket請求頭
服務端握手響應：

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: CTPN8jCb3BUjBjBtdjwSQCytuBo=

注意：服務端返回HTTP/1.1 101 Switching Protocols狀態碼，其他非101的狀態碼都同日是握手失敗。

資料傳輸

任意一方可以在任意時間傳送訊息，因為這是全雙工通訊協議。
訊息由一個或多個幀組成，一個幀可以是二進位制、文字、控制幀(0x8 Close,0x9 Ping,0xA Pong)

ASP.NETCore Server listening WebSockets request

dotnet new webapi -n WebSocketsTutorial
dotnet add WebSocketsTutorial/ package Microsoft.AspNet.SignalR

為簡化本次內容，我不會談論SignalR（集線器和其他東西）。

本次將完全基於WebSocket通訊。

app.UseWebSockets();

新增WebSocketsController.cs，新增如下程式碼：

using System;
using System.Net.WebSockets;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;

namespace WebSocketsTutorial.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class WebSocketsController : ControllerBase
    {
        private readonly ILogger<WebSocketsController> _logger;

        public WebSocketsController(ILogger<WebSocketsController> logger)
        {
            _logger = logger;
        }

        [HttpGet("/ws")]
        public async Task Get()
        {
          if (HttpContext.WebSockets.IsWebSocketRequest)
          {
              using var webSocket = await HttpContext.WebSockets.AcceptWebSocketAsync();
              _logger.Log(LogLevel.Information, "WebSocket connection established");
              await Echo(webSocket);
          }
          else
          {
              HttpContext.Response.StatusCode = 400;
          }
        }
        
        private async Task Echo(WebSocket webSocket)
        {
            var buffer = new byte[1024 * 4];
            var result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
            _logger.Log(LogLevel.Information, "Message received from Client");

            while (!result.CloseStatus.HasValue)
            {
                var serverMsg = Encoding.UTF8.GetBytes($"Server: Hello. You said: {Encoding.UTF8.GetString(buffer)}");
                await webSocket.SendAsync(new ArraySegment<byte>(serverMsg, 0, serverMsg.Length), result.MessageType, result.EndOfMessage, CancellationToken.None);
                _logger.Log(LogLevel.Information, "Message sent to Client");

                result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
                _logger.Log(LogLevel.Information, "Message received from Client");
                
            }
            await webSocket.CloseAsync(result.CloseStatus.Value, result.CloseStatusDescription, CancellationToken.None);
            _logger.Log(LogLevel.Information, "WebSocket connection closed");
        }
    }
}

在握手之後，服務端不需要等待客戶端發起訊息，就可以推送訊息到客戶端。

啟動ASP.NET Core 服務端，程式在/ws路由監聽WebSockets請求， 回發客戶端傳送過來的訊息。

Browser client using WebSockets api

在瀏覽器Console編寫js程式碼發起客戶端websockets請求：

let webSocket = new WebSocket('wss://localhost:5001/ws');

在該請求的network- Messages tab頁面可觀察雙向通訊：

除此之外，伺服器/客戶端維護了pingpong機制，以檢視客戶端是否還活著。
如果您真的想看看這些資料包，可以使用WireShark之類的工具來了解一下。

整個過程在Chrome-Network上只會有一個記錄，所以你如果要看"握手過程", 也請在剛在的tab頁面檢視?。

最後

如果您有興趣瞭解WebSocket的協議規範，請轉至RFC 6455閱讀。
這篇文章只是WebSockets的小試牛刀，還有許多我們可以討論的其他事情，例如安全性，負載平衡，代理等✌️。

https://sahansera.dev/understanding-websockets-with-aspnetcore-5/

相關文章