上個月我寫了《.NET gRPC核心功能初體驗》， 里面使用gRPC雙向流做了一個打乒乓球的Demo， 實時雙向這兩個標簽是不是很熟悉，對， WebSockets也可以做實時雙向通信。
本文將利用WebSockets(SignalR的一部分)搭建一個可雙向通信的ASP.NETCore5應用。
(💡 預告： 下期將着重對比gRPC和WebSockets的差異和使用場景。)
我們先深入研究基本概念，以了解WebSockets幕后情況。
WebSockets簡介
為支持在在客戶端/服務端雙向通信，引入了WebSockets.
HTTP 1.0：我們每次向服務器發送請求時都需要重新創建連接(關閉之前的連接)。
HTTP 1.1中，新增的keep-alive語法引入了持久連接機制,至此連接可以被重用---這能減小通信延遲(因為服務器能感知客戶端，並且不需要為每個請求重開握手過程)， 這時候是一個假長連接，因為每次請求還是要發請求頭。
WebSockets以標准的Http協議模型為初始， 在這個模型中， 客戶端請求服務端開啟websocket連接，服務端響應
如果這個初始握手成功，也就意味着 客戶端和服務端同意在已有的tcp/ip連接（初始http請求模型）上開啟websocket連接，數據現在可以在 消息幀上流動
一旦雙方確認websocket必須被關閉（具體過程：一方發送關閉幀，另一方回發關閉幀），tcp連接就會斷開
下圖描述了初始化(握手),數據傳輸,關閉WebSockets的過程。
WebSocket 解決的第一個問題是，通過第一個 HTTP request 建立了 TCP 連接之后，之后的交換數據都不需要再發 HTTP request了，使得這個長連接變成了一個真.長連接
另外由於不需要發送http header就能交換數據，這與之前的http協議還是有區別的，所以它需要對客戶端和服務端升級。
協議有兩部分： 握手和數據傳輸
握手
"握手"的目的是與基於HTTP協議的服務端軟件和代理程序兼容，這樣 http客戶端/websocket客戶端都可以使用一個端口與服務器通信。
簡而言之，WebSocket連接基於單個端口上的HTTP（以TCP傳輸）：
- 服務器在指定的端口(80/443)上監聽傳入的TCP套接字連接
- 客戶端使用HTTP GET請求啟動握手(這就是“WebSockets”中的“Web”含義)。
在請求頭中，客戶端將要求服務器將連接Upgrade到WebSocket。 - 服務器發送一個握手響應，通知客戶端它將把協議從HTTP更改為WebSocket。
- 客戶端/服務器協商連接細節。如果條款不匹配，任何一方都可以退出。
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]
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)
{
WebSocketReceiveResult result = null;
do
{
var buffer = new byte[1024 * 4];
result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
_logger.Log(LogLevel.Information, "Message received from Client");
var serverMsg = Encoding.UTF8.GetBytes($"Server: Hello. You said: {Encoding.UTF8.GetString(buffer).Trim((char)0)}");
await webSocket.SendAsync(new ArraySegment<byte>(serverMsg, 0, serverMsg.Length), result.MessageType, result.EndOfMessage, CancellationToken.None);
_logger.Log(LogLevel.Information, "Message sent to Client");
}
while (!result.CloseStatus.HasValue);
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機制，以查看客戶端是否還活着。
如果您真的想看看這些數據包，可以使用Fiddler之類的工具來了解一下。
-- 雙擊websocket 請求----
整個過程在Chrome-Network上只會有一個記錄，所以你如果要看"握手過程", 也請在剛在的tab頁面查看🙌。
最后
如果您有興趣了解WebSocket的協議規范，請轉至RFC 6455閱讀。
這篇文章只是WebSockets的小試牛刀，還有許多我們可以討論的其他事情，例如安全性，負載平衡，代理等✌️。
https://sahansera.dev/understanding-websockets-with-aspnetcore-5/
https://sookocheff.com/post/networking/how-do-websockets-work/
https://medium.com/platform-engineer/web-api-design-35df8167460