Server-sent?events實時獲取服務端數據技術詳解
正文
實時獲取服務端的數據，大家第一時間想到的是輪詢和 WebSocket 兩種方案，其實還有一種新方案 Server-sent events 下文簡稱（SSE）。SSE 中的數據只能由服務端推向客戶端
SSE 是基于 http 協議的服務器推送技術，數據只能從服務端到客戶端。服務端把序列化后的數據發(fā)送給客戶端， 整個過程持續(xù)不斷直至連接關閉
WebSocket vs 輪詢 vs SSE
下面是 WebSocket、輪詢和 SSE 的功能對比
- SSE 和輪詢使用 HTTP 協議，現有的服務器軟件都支持。WebSocket 是一個獨立協議
- SSE 屬于輕量級的 WebSocket，使用簡單；WebSocket 使用相對復雜，輪詢使用簡單
- SSE 默認支持斷線重連，WebSocket 需要自己實現斷線重連
- SSE 一般只用來傳送文本，二進制數據需要編碼后傳送，WebSocket 默認支持傳送二進制數據
- SSE 支持自定義發(fā)送的消息類型
- WebSocket 支持雙向推送消息，SSE 是單向的
- 輪詢性能開銷大、輪詢時間久導致客戶端及時更新數據
使用場景
基于服務端單向的向客戶端推送信息的特性，SSE 使用場景主要有
- Sass 平臺的消息通知
- 信息流網站實時更新數據
使用方式
下面講解如何在客戶端使用 SSE
- 創(chuàng)建一個
EventSource實例，向服務器發(fā)起連接
const evtSource = new EventSource();
- 自定義事件
對于自定義事件，服務端和客戶端一定要保持事件名一致。服務端通過自定義事件發(fā)送數據， 就會觸發(fā)自定義事件。SSE 默認支持 message 事件，下面以 message 事件為例
evtSource.addEventListener("message", (event) => {
let payload;
try {
payload = JSON.parse(event.data); // <--- event.data 需要反序列化
console.log("receiving data...", payload);
} catch (error) {
console.error("failed to parse payload from server", error);
}
});
自定義事件的回調函數接收 event 對象，event.data 存著服務端發(fā)給客戶端的數據但是需要反序列化
可以通過 Chrome Devtool 工具查看 eventsource 通信情況，如圖所示
1- 自定義事件名，服務端和客戶端需要保持一致2- EventStream Tab，數據都在這里3- 服務端推送給客戶端的數據
- 錯誤處理
如果連接發(fā)生錯誤，就會觸發(fā) error 事件
evtSource.addEventListener("error", (err) => {
console.error("EventSource failed:", err);
});
- 關閉連接
SSE 提供 close 方法，用來關閉 SSE 連接
evtSource.close();
瀏覽器兼容性
通過 caniuse 查看 SSE 瀏覽器兼容性，如圖所示
除了 IE 瀏覽器不支持，其它現代瀏覽器都支持，所以放心大膽在項目中使用 SSE
簡單封裝
在平常的工作中，每次寫 SSE 的事件監(jiān)聽和錯誤處理會很麻煩。多個業(yè)務場景需要使用 SSE 時，就需要對 SSE 進行封裝。接下來我們嘗試封裝一個簡單的 SSE SDK，方便在項目中使用
當我們決定寫 SSE 的 SDK 時，首先想到使用面向對象（OOP）進行封裝。根據 SSE 的特性，那么庫需要實現 subscribe 和 unsubscribe 兩個方法。通過確定 SSE 庫使用方式，根據使用方式確定 SDK 的實現。我們可以在代碼中這樣使用，如下所示
// SSESdk 實例化
const SSE = new SSESdk(url, options);
// 訂閱來自服務端的消息
SSE.subscribe("message", (data) => {
console.log("receive message from server", data);
});
// 取消訂閱
SSE.unsuscribe();
我們要封裝的庫對外僅僅提供 subscribe 和 unsubscribe 兩個 Api，非常方便開發(fā)人員使用。 subscribe 用來訂閱來自服務端的消息， unsubscribe 用來取消訂閱，關閉 SSE 連接，通過使用形式可以看出，使用 ES6 中的類語法。接下來我們先確定 SSE SDK 的大體結構
class SSEClient {
constructor() {}
subscribe(type, handler) {}
unsunscribe() {}
}
在 SSEClient 類中有三個方法需要實現，通過 constructor 接受可配置的參數，比如 SSE 建立連接失敗后的重試次數和重試時間。 subscribe 接收一個與后端保持一致的事件名和一個回調函數。unsunscribe 不需要傳遞任何參數，調用 unsunscribe 方法關閉 SSE 連接
// SSE-client.js
class SSEClient {
constructor(url) {
this.url = url;
this.es = null;
}
subscribe(type, handler) {
this.es = new EventSource(url);
this.es.addEventListener("open", () => {
console.log("server sent event connect created");
});
this.es.addEventListener(type, (event) => {
let payload;
try {
payload = JSON.parse(event.data);
console.log("receiving data...", payload);
} catch (error) {
console.error("failed to parse payload from server", error);
}
if (typeof handler === "function") {
handler(payload);
}
});
this.es.addEventListener("error", () => {
console.error("EventSource connection failed for subscribe.Retry");
});
}
unsunscribe() {
if (this.es) {
this.es.close();
}
}
}
就這樣實現了一個簡單的 SSE SDK。首先根據 url 參數創(chuàng)建一個 SSEClient 實例，當調用 subscribe 方法時，才會根據傳入的 url 建立 SSE 連接，然后監(jiān)聽對應的事件，一旦 連接建立成功，后端向客戶端發(fā)送數據，就可以從 handler 方法中拿到數據
這個庫僅僅實現了非?；镜墓δ埽a封裝上存在很多問題。比如 es 的事件全部雜糅在 subscribe 方法中、缺少 SSE 連接建立失敗的重試等等功能。接下來我們對剛剛實現的 SSEClient SDK 進行優(yōu)化
const defaultOptions = {
retry: 5,
interval: 3 * 1000,
};
class SSEClient {
constructor(url, options = defaultOptions) {
this.url = url;
this.es = null;
this.options = options;
this.retry = options.retry;
this.timer = null;
}
_onOpen() {
console.log("server sent event connect created");
}
_onMessage(handler) {
return (event) => {
this.retry = options.retry;
let payload;
try {
payload = JSON.parse(event.data);
console.log("receiving data...", payload);
} catch (error) {
console.error("failed to parse payload from server", error);
}
if (typeof handler === "function") {
handler(payload);
}
};
}
_onError(type, handler) {
return () => {
console.error("EventSource connection failed for subscribe.Retry");
if (this.es) {
this._removeAllEvent(type, handler);
this.unsunscribe();
}
if (this.retry > 0) {
this.timer = setTimeout(() => {
this.subscribe(type, handler);
}, this.options.interval);
} else {
this.retry--;
}
};
}
_removeAllEvent(type, handler) {
this.es.removeEventListener("open", this._onOpen);
this.es.removeEventListener(type, this._onMessage(handler));
this.es.removeEventListener("error", this._onError(type, handler));
}
subscribe(type, handler) {
this.es = new EventSource(url);
this.es.addEventListener("open", this._onOpen);
this.es.addEventListener(type, this._onMessage(handler));
this.es.addEventListener("error", this._onError(type, handler));
}
unsunscribe() {
if (this.es) {
this.es.close();
this.es = null;
}
if (this.timer) {
clearTimeout(this.timer);
}
}
}
我們將 SSEClient 中的三個事件方法分別提取為三個私有方法，_onOpen 方法在 event 觸發(fā) open 時調用，向控制臺輸出鏈接已經創(chuàng)建。 _onMessage 方法在后端向前端發(fā)送數據時觸發(fā)，負責解析數據，并調用 handler 方法。_onError 方法在 SSE 發(fā)生錯誤時觸發(fā)， 會在控制臺輸出錯誤的提示，根據開發(fā)者傳入的重試次數，先關閉上一次的 SSE 鏈接，取消所有的事件監(jiān)聽，關閉定時器， 再開啟遞歸調用 subscribe 方法進行重連， 一旦重連成功，重試次數恢復為設定的重試次數，如果超過重試次數依舊沒有連接成功，那么 SSE 會徹底終止。需要開發(fā)人員排查具體原因
一個可以用在項目上的簡單 SSE SDK 封裝完
第三方庫
SSE 雖然很好，但是也有它先天不足，主要問題是不能通過 headers 傳遞 Authorization token。雖然可以把 token 放在 url 上 解決不能傳 token 的問題，但是又會引發(fā) token 安全隱患。所以社區(qū)里有使用 xhr 和 fetch 模擬原生 Server-sent events 的功能，解決不能 通過 headers 傳遞 Authorization token 的問題。主要有兩個第三方庫，分別是 eventsource 和 event-source-polyfill， 下面筆者詳細講述這兩個庫的使用
eventsource
此庫是 EventSource 客戶端的純 JavaScript 實現。使用方式很簡單。在項目中安裝依賴
yarn add eventsource # Or npm install eventsource
然后從 eventsource 中導出 EventSource 類，然后實例化得到 es 實例
import EventSource from "eventsource";
const eventSourceInitDict = { headers: { authorization: "Bearer token" } };
const es = new EventSource(url, eventSourceInitDict);
es.addEventListener("message", (event) => {
console.log("receiving data from server:", JSON.parse(event.data));
});
eventsource 的實現用到了一些 node 標準庫。分別是 https 和 http。 筆者將 eventsource 的部分源碼列在下面。
// eventsource.js 源碼如下
const https = require("https");
const http = require("http");
然而，瀏覽器環(huán)境并不支持 https 和 http 標準庫。所以當我們在瀏覽器環(huán)境中使用 eventsource 時，需要做一些額外的工作。下面以 webpack5 為例子講解解決辦法
- 需要在
webpack配置文件中添加node-polyfill-webpack-plugin插件
yarn add node-polyfill-webpack-plugin -D
然后在 webpack 配置文件使用該插件
// 項目中的 webpack 配置文件，比如 webpack.config.js
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
module.exports = {
// Other rules...
plugins: [new NodePolyfillPlugin()],
};
- 或者在
webpack的callback中對使用的庫進行單獨的配置
module.exports = {
// other configuration ...
resolve: {
fallback: {
https: false,
http: false,
},
},
};
做完上面的步驟后，eventsource 可以在瀏覽器中正常運行
如果不想改動 webpack 的配置，那么可以試試 event-source-polyfill 這個庫
event-source-polyfill
event-source-polyfill 的使用非常簡單，使用 EventSourcePolyfill 替換原生的 EventSource
import { EventSourcePolyfill } from "event-source-polyfill";
var es = new EventSourcePolyfill(url, {
headers: {
authorization: "Bearer token",
},
});
es.addEventListener("message", (event) => {
console.log("receiving data from server:", JSON.parse(event.data));
});
不足之處
eventsource 和 event-source-polyfill 只是在一定的程度上解決了 Authorization token 的問題，但它們也存在問題。 這兩個庫提供的 close 方法只能關閉處于 pending 狀態(tài)的 SSE 連接，因為 fetch 一旦從 pending 變?yōu)?resolved 或 reject, 其結果無法改變。當頻繁的斷開 SSE 連接和建立新 SSE 連接時，舊的 SSE 連接實際上并沒有關閉，系統(tǒng)里會存在多個 SSE 連接，這樣會帶來很大的性能開銷
FAQ
- SSE 不能向服務端發(fā)送數據？
可以將數據放入 url 中，斷開當前的 SSE 連接，根據新 url 重新建立 SSE 連接
總結
本篇文章講述一種服務端向客戶端推送信息的技術、它比 WebSocket 更簡單更輕量化，比輪詢性能好。 簡單介紹 Server-sent events 的技術原理和使用場景，并進行簡單的封裝，方便日常在項目中使用。推薦使用 eventsource 和 event-source-polyfill 第三方庫解決不能通過 headers 傳遞 Authorization token 的問題。
參考鏈接 Server-sent events
以上就是Server-sent events實時獲取服務端數據技術詳解的詳細內容，更多關于Server-sent events的資料請關注腳本之家其它相關文章！
相關文章
JavaScript?ES6語法中l(wèi)et,const?,var?的區(qū)別
這篇文章主要為大家介紹了JavaScript中l(wèi)et,const?,var?的區(qū)別，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
這篇文章主要介紹了JavaScript原型Prototype，在JavaScript中，函數是一個包含屬性和方法的Function類型的對象。而原型（Prototype?）就是Function類型對象的一個屬性。具體內容需要的朋友可以參考下面文章的介紹2021-12-12
這篇文章主要介紹了微信小程序左滑刪除效果的實現代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要為大家介紹了js基本類型與引用類型的區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
rollup打包引發(fā)對JS模塊循環(huán)引用思考
這篇文章主要為大家介紹了rollup打包引發(fā)的對JS模塊循環(huán)引用的思考，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了類和原型的設計模式之復制與委托差異詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要為大家介紹了JavaScript loader原理簡單總結示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
這篇文章主要為大家介紹了ECMAScript6數值擴展實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了微信小程序 picker組件詳細介紹的相關資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了微信小程序 底部導航欄目開發(fā)資料的相關資料，微信小程序底部想要有一個漂亮的導航欄目，不知道怎么制作，于是百度找到了本篇文章，分享給大家,需要的朋友可以參考下2016-12-12