大綱

本系列會分為2-3篇文章.

• 第一篇介紹SignalR的預備知識和原理
• 然後會介紹SignalR和如何在ASP.NET Core裡使用SignalR.

本文的目錄如下:

實時Web簡述

大家都見過和用過實時Web, 例如網頁版的即時通訊工具, 網頁直播, 網頁遊戲, 還有股票儀表板等等.

傳統的Web應用是這樣工作的:

瀏覽器傳送HTTP請求到ASP.NET Core Web伺服器, 如果一切順利的話, Web伺服器會處理請求並返回響應, 在Payload裡面會包含所請求的資料.

但是這種工作方式對實時Web是不靈的. 實時Web需要伺服器可以主動傳送訊息給客戶端(可以是瀏覽器):

Web伺服器可以主動通知客戶端資料的變化, 例如收到了新的對話訊息.

"底層"技術

而SignalR使用了三種"底層"技術來實現實時Web, 它們分別是Long Polling, Server Sent Events 和 Websocket.

首先, 得知道什麼是Ajax. 這個就不介紹了.

Long Polling

Polling

介紹Long Polling之前, 首先介紹一下Polling.

Polling是實現實時Web的一種笨方法, 它就是通過定期的向伺服器傳送請求, 來檢視伺服器的資料是否有變化.

如果伺服器資料沒有變化, 那麼就返回204 No Content; 如果有變化就把最新的資料傳送給客戶端:

下面是Polling的一個實現, 非常簡單:

就看這個Controller的Get方法即可. 用到了MyService, 它在專案裡是單例的. 它的方法非常簡單:

MyService就是做了一個全域性的Count, 它的GetLatestCount會返回最新的Count.

Controller裡面的程式碼意思是: 如果Count > 6 就返回一個物件, 裡面包含count的值和傳進來的id; 如果 count > 10, 還要返回一個finished標誌.

看一下前端程式碼:

也是非常的簡單, 點選按鈕後定時傳送請求, 如果有結果就顯示最新count值; 如果有finished標誌, 就顯示最新值和已結束.

注意這裡使用的是fetch API.

執行專案, count > 6的時候:

count > 10的時候結束:

這就是Polling, 很簡單, 但是比較浪費資源.

SignalR沒有采用Polling這種技術.

Long Polling

Long Polling和Polling有類似的地方, 客戶端都是傳送請求到伺服器. 但是不同之處是: 如果伺服器沒有新資料要發給客戶端的話, 那麼伺服器會繼續保持連線, 直到有新的資料產生, 伺服器才把新的資料返回給客戶端.

如果請求發出後一段時間內沒有響應, 那麼請求就會超時. 這時, 客戶端會再次發出請求.

例子, Controller的程式碼稍有改動:

改動的目的就是在符合要求的資料出現之前, 保持連線開放.

前端也有一些改動:

pollWithTimeout方法使用了race, 如果請求後超過9秒沒有響應, 那麼就返回超時錯誤.

poll裡面, 如果請求返回的結果是200, 那麼就更新UI. 但是如果沒有finished標誌, 就繼續發出請求.

執行:

可以看到只有一個請求, 請求的時間很長, 標識連線開放了很長時間.

這裡需要注意的一點是, 伺服器的超時時長和瀏覽器的超時時長可能不一樣.

前邊介紹的Polling和Long Polling都是HTTP請求, 這其實並不是很適合.

下面介紹稍微一個好點的技術: 

Server Sent Events (SSE)

使用SSE的話, Web伺服器可以在任何時間把資料傳送到瀏覽器, 可以稱之為推送. 而瀏覽器則會監聽進來的資訊, 這些資訊就像流資料一樣, 這個連線也會一直保持開放, 直到伺服器主動關閉它.

瀏覽器會使用一個叫做EventSource的物件用來處理傳過來的資訊.

 例子, 這和之前的程式碼有很多地方不同, 用到了Reponse:

注意SSE返回資料的只能是字串, 而且以data:開頭, 後邊要跟著換行符號, 否則EventSource會失敗.

客戶端:

這個就很簡單了, 使用EventSource的onmessage事件. 前一個請求等到響應回來後, 會再發出一個請求.

執行:

這個EventSource要比Polling和Long Polling好很多.

它有以下優點: 使用簡單(HTTP), 自動重連, 雖然不支援老瀏覽器但是很容易polyfill.

而缺點是: 很多瀏覽器都有最大併發連線數的限制, 只能傳送文字資訊, 單向通訊.

Web Socket

Web Socket是不同於HTTP的另一個TCP協議. 它使得瀏覽器和伺服器之間的互動式通訊變得可能. 使用WebSocket, 訊息可以從伺服器發往客戶端, 也可以從客戶端發往伺服器, 並且沒有HTTP那樣的延遲. 資訊流沒有完成的時候, TCP Socket通常是保持開啟的狀態.

使用線代瀏覽器時, SignalR大部分情況下都會使用Web Socket, 這也是最有效的傳輸方式. 

全雙工通訊: 客戶端和伺服器可以同時往對方傳送訊息.

並且不受SSE的那個瀏覽器連線數限制(6個), 大部分瀏覽器對Web Socket連線數的限制是50個.

訊息型別: 可以是文字和二進位制, Web Socket也支援流媒體(音訊和視訊).

其實正常的HTTP請求也使用了TCP Socket. Web Socket標準使用了握手機制把用於HTTP的Socket升級為使用WS協議的 WebSocket socket.

生命週期

Web Socket的生命週期是這樣的:

所有的一切都發生在TCP Socket裡面, 首先一個常規的HTTP請求會要求伺服器更新Socket並協商, 這個叫做HTTP握手. 然後訊息就可以在Socket裡來回傳送, 直到這個Socket被主動關閉. 在主動關閉的時候, 關閉的原因也會被通訊.

HTTP 握手

每一個Web Socket開始的時候都是一個簡單的HTTP Socket.

客戶端首先發送一個GET請求到伺服器, 來請求升級Socket. 

如果伺服器同意的話, 這個Socket從這時開始就變成了Web Socket.

這個請求的示例如下:

第一行表明這就是一個HTTP GET請求.

Upgrade 這個Header表示請求升級socket到Web Socket.

Sec-WebSocket-Key, 也很重要, 它用於防止快取問題, 具體請檢視官方文件.

伺服器理解並同意請求以後, 它的響應如下:

返回101狀態碼, 表示切換協議.

如果返回的不是101, 那麼瀏覽器就會知道伺服器沒有處理WebSocket的能力.

此外Header裡面還有Upgrade: websocket.

Sec-WebSocket-Accept是配合著Sec-WebSocket-Key來運作的, 具體請查閱官方文件.

訊息型別

Web Socket的訊息型別可以是文字, 二進位制. 也包括控制類的訊息: Ping/Pong, 和關閉.

每個訊息由一個或多個Frame組成:

所有的Frame都是二進位制的. 所以文字的話, 就會首先轉化成二進位制.

Frame 有若干個Header bits.

有的可以表示這個Frame是否是訊息的最後一個Frame;

有的可以表示訊息的型別.

有的可以表示訊息是否被掩蔽了. 客戶端到伺服器的訊息被掩蔽了, 為了防止快取投毒(使用惡意資料替換快取).

有的可以設定payload的長度, payload會佔據frame剩下的地方.

實際上用的時候, 你基本不會觀察到frame, 它是在後臺處理的, 你能看到的就是完整的訊息.

但是在瀏覽器除錯的時候, 你看到的是frame挨個傳遞進來而不是整個訊息.

看下例子:

首先ASP.NET Core專案裡已經內建了WebSocket, 但是需要配置和使用這個中介軟體, 在Startup:

這裡我們設定了每隔120秒就ping一下. 還設定用於接收和解析frame的快取大小. 其實這兩個值都是預設的值.

修改後的Controller:

這裡需要注入HttpContextAccessor. 然後判斷請求是否是WebSocket請求, 如果是的話, 客戶端會收到回覆, 這時Socket就升級完成了. 升級完返回一個webSocket物件, 然後我把events通過它傳送出去. 隨後我關閉了webSocket, 並指明瞭原因NormalClosure.

然後看看SendEvents方法:

這裡的重點就是webSocket物件的SendAsync方法. 我需要把資料轉化成buffer進行傳送. 資料型別是Text. 具體引數請檢視文件.

看一下客戶端:

也很簡單, 這裡有一個WebSocket物件, 注意這裡的url開頭是ws而不是http, 還有一個wss, 就先當與http裡的https.

然後eventhandler和SSE的差不多. 返回的json資料需要先parse, 然後再使用.

本文先到這, 隨後再介紹下SignalR和用法即可.