Server-sent events (SSE)
Agenda
- server push
- SSE
- Web推送相關技術與比較
- HTTP/2 server push
Server puch
publish/subscribe model
Server-sent events
streaming
Server-sent events
Client:EventSource
| 事件處理 | 事件處理程序事件類型 | 說明 |
|---|---|---|
| onopen | open | 與 Server 成功建立連結 |
| onmessage | message | 監聽 Server 傳來的訊息 (當接收到連續兩個需要換行 \n\n) |
| onerror | error | 與 Server 連結發生錯誤 |
Server-sent events
server:
限制條件 :
- 程式必須指定為 UTF-8 格式編碼
- Content-Type需指定為event-steam
| 字段名稱 | 說明 |
|---|---|
| event | 自行指定 Client 觸發的 event 名稱，如未指定預設為 onmessage。 |
| data | 如果包含多個資料可使用 \n 界定符號，Client 會用界定符號將它們連接成一個字串。 |
| id | 事件 ID，會成為目前 EventSource 的內部屬性。 |
| retry | 整數值，指定重新連結的時間（毫秒）。非整數值會被忽略。 |
Web推送相關技術與比較
- 輪詢（polling）
- 長輪詢（long-polling）
- iframe流（streaming）
- WebSocket
輪詢polling
- 優點：實現簡單，無需做過多的更改
- 缺點：輪詢的間隔過長，會導致用戶不能及時接收到更新的數據；輪詢的間隔過短，會導致查詢請求過多，增加服務器端的負擔
長輪詢（long-polling）
- 優點：比Polling 做了優化，有較好的時效性
- 缺點：保持連接會消耗資源; 服務器沒有返回有效數據，程序超時。
iframe流（streaming）
- 優點：消息能夠實時到達；瀏覽器兼容好
- 缺點：服務器維護一個長連接會增加開銷；IE、chrome、Firefox會顯示加載沒有完成，圖標會不停旋轉。
iframe流（streaming）
- 優點：消息能夠實時到達；瀏覽器兼容好
- 缺點：服務器維護一個長連接會增加開銷；IE、chrome、Firefox會顯示加載沒有完成，圖標會不停旋轉。
WebSocket
- 優點：支持雙向通信，實時性更強
- 缺點：瀏覽器支持程度不一致、不支持斷開重連
Web推送相關技術與比較
| 方式 | 類型 | 技術實現 | 優點 | 缺點 | 適用場景 |
|---|---|---|---|---|---|
| 輪詢Polling | client→server | 客戶端循環請求 | 1、實現簡單 2、 支持跨域 |
1、浪費帶寬和服務器資源 2、 一次請求信息大半是無用（完整http頭信息） 3、有延遲 4、大部分無效請求 |
適於小型應用 |
| 長輪詢Long-Polling | client→server | 服務器hold住連接，一直到有數據或者超時才返回，減少重複請求次數 | 1、實現簡單 2、不會頻繁發請求 3、節省流量 4、延遲低 |
1、服務器hold住連接，會消耗資源 2、一次請求信息大半是無用 |
WebQQ、 Hi網頁版、 Facebook IM |
| 長連接iframe | client→server | 在頁面裡嵌入一個隱蔵iframe，將這個iframe 的src 屬性設為對一個長連接的請求，服務器端就能源源不斷地往客戶端輸入數據。 | 1、數據實時送達 2、不發無用請求，一次鏈接，多次“推送” |
1、服務器增加開銷 2、無法準確知道連接狀態 3、IE、chrome等一直會處於loading狀態 |
Gmail聊天 |
| WebSocket |
server⇌client | new WebSocket() | 1、支持雙向通信，實時性更強 2、可發送二進製文件 3、減少通信量 |
1、瀏覽器支持程度不一致 2、不支持斷開重連 |
網絡遊戲、銀行交互和支付 |
| SSE（Server Sent Events）服務器發送事件 | client→server | SSE【!IE】：new EventSource() | 1、服務端主動 2、數據流 3、支持斷線重連 |
1、只是長連接 2、還是單向 3、IE不支持 |
HTTP/2 server push
HTTP/2 server push
HTTP/2 server push
參考資料
- https://blog.apnic.net/2018/04/26/adoption-performance-and-human-perception-of-http-2-server-push/
- https://github.com/ljianshu/Blog/issues/58
- https://en.wikipedia.org/wiki/Push_technology
- https://www.ruanyifeng.com/blog/2017/05/server-sent_events.html
- https://en.wikipedia.org/wiki/Server-sent_events