核心要點

• Server-Sent Events (SSE) API 實現(xiàn)了推送技術(shù)，數(shù)據(jù)通過持續(xù)的開放連接流式傳輸?shù)娇蛻舳?，避免了反?fù)建立新連接的開銷。
• 與允許雙向通信的 WebSockets 不同，SSE 只允許服務(wù)器向客戶端推送消息。然而，SSE 具有某些優(yōu)勢，例如支持自定義消息類型和自動重新連接斷開的連接。
• 客戶端可以通過實現(xiàn)命名事件來處理事件流中的各種事件類型。此外，可以使用 EventSource 的 onerror 事件處理程序處理錯誤，并且客戶端可以隨時通過調(diào)用 close() 方法終止 EventSource 連接。

與 WebSockets 的比較

許多人完全不知道 SSE 的存在，因為它們常常被功能更強(qiáng)大的 WebSockets API 所掩蓋。雖然 WebSockets 允許客戶端和服務(wù)器之間進(jìn)行雙向全雙工通信，但 SSE 只允許服務(wù)器向客戶端推送消息。需要近乎實時性能或雙向通信的應(yīng)用程序可能更適合使用 WebSockets。但是，SSE 也比 WebSockets 具有某些優(yōu)勢。例如，SSE 支持自定義消息類型和自動重新連接斷開的連接。這些功能可以在 WebSockets 中實現(xiàn)，但它們在 SSE 中默認(rèn)可用。WebSockets 應(yīng)用程序還需要支持 WebSockets 協(xié)議的服務(wù)器。相比之下，SSE 建立在 HTTP 之上，可以在標(biāo)準(zhǔn) Web 服務(wù)器中實現(xiàn)。

檢測支持

SSE 的支持度相對較高，Internet Explorer 是唯一一個尚不支持它們的 主要瀏覽器。但是，只要 IE 落后，就仍然需要提供功能檢測。在客戶端，SSE 使用 EventSource 對象實現(xiàn)——這是全局對象的一個屬性。以下函數(shù)檢測瀏覽器中 EventSource 構(gòu)造函數(shù)是否可用。如果函數(shù)返回 true，則可以使用 SSE。否則，應(yīng)使用輪詢等后備機(jī)制。

function supportsSSE() {
  return !!window.EventSource;
}

連接

要連接到事件流，請調(diào)用 EventSource 構(gòu)造函數(shù)，如下所示。您必須指定要訂閱的事件流的 URL。構(gòu)造函數(shù)將自動負(fù)責(zé)打開連接。

EventSource(url);

onopen 事件處理程序

建立連接后，將調(diào)用 EventSource 的 onopen 事件處理程序。事件處理程序?qū)⒋蜷_事件作為其唯一參數(shù)。以下示例顯示了一個通用的 onopen 事件處理程序。

source.onopen = function(event) {
  // 處理打開事件
};

EventSource 事件處理程序也可以使用 addEventListener() 方法編寫。此替代語法優(yōu)于 onopen，因為它允許多個處理程序附加到同一事件。以下使用 addEventListener() 重寫了之前的 onopen 事件處理程序。

source.addEventListener("open", function(event) {
  // 處理打開事件
}, false);

接收消息

客戶端將事件流解釋為一系列 DOM 消息事件。從服務(wù)器接收到的每個事件都會觸發(fā) EventSource 的 onmessage 事件處理程序。onmessage 處理程序?qū)⑾⑹录鳛槠湮ㄒ粎?shù)。以下示例創(chuàng)建了一個 onmessage 事件處理程序。

function supportsSSE() {
  return !!window.EventSource;
}

消息事件包含三個重要的屬性——data、origin 和 lastEventId。顧名思義，data 包含實際的消息數(shù)據(jù)（字符串格式）。數(shù)據(jù)可能是 JSON 字符串，可以傳遞給 JSON.parse() 方法。origin 屬性包含事件流在任何重定向后的最終 URL。應(yīng)檢查 origin 以驗證是否僅從預(yù)期來源接收消息。最后，lastEventId 屬性包含事件流中看到的最后一條消息標(biāo)識符。服務(wù)器可以使用此屬性將標(biāo)識符附加到各個消息。如果從未見過任何標(biāo)識符，則 lastEventId 將為空字符串。onmessage 事件處理程序也可以使用 addEventListener() 方法編寫。以下示例顯示了使用 addEventListener() 重寫的之前的 onmessage 事件處理程序。

EventSource(url);

命名事件

通過實現(xiàn) 命名事件，單個事件流可以指定各種類型的事件。命名事件不是由消息事件處理程序處理的。相反，每種類型的命名事件都由其自己的唯一處理程序處理。例如，如果事件流包含名為 foo 的事件，則需要以下事件處理程序。請注意，foo 事件處理程序與消息事件處理程序相同，只是事件類型不同。當(dāng)然，任何其他類型的命名消息都需要單獨的事件處理程序。

source.onopen = function(event) {
  // 處理打開事件
};

處理錯誤

如果事件流出現(xiàn)問題，則會觸發(fā) EventSource 的 onerror 事件處理程序。錯誤的一個常見原因是連接中斷。盡管 EventSource 對象會自動嘗試重新連接到服務(wù)器，但在斷開連接時也會觸發(fā)錯誤事件。以下示例顯示了一個 onerror 事件處理程序。

source.addEventListener("open", function(event) {
  // 處理打開事件
}, false);

當(dāng)然，onerror 事件處理程序也可以使用 addEventListener() 重寫，如下所示。

source.onmessage = function(event) {
  var data = event.data;
  var origin = event.origin;
  var lastEventId = event.lastEventId;
  // 處理消息
};

斷開連接

客戶端可以隨時通過調(diào)用 close() 方法終止 EventSource 連接。close() 的語法如下所示。close() 方法不接受任何參數(shù)，也不返回任何值。

source.addEventListener("message", function(event) {
  var data = event.data;
  var origin = event.origin;
  var lastEventId = event.lastEventId;
  // 處理消息
}, false);

連接狀態(tài)

EventSource 連接的狀態(tài)存儲在其 readyState 屬性中。在其生命周期的任何時間點，連接都可以處于三種可能的狀態(tài)之一——連接中、打開和關(guān)閉。以下列表描述了每種狀態(tài)。

• 連接中 – 創(chuàng)建 EventSource 對象時，它最初會進(jìn)入連接中狀態(tài)。在此期間，連接尚未建立。如果已建立的連接丟失，EventSource 也將轉(zhuǎn)換到連接中狀態(tài)。處于連接中狀態(tài)的 EventSocket 的 readyState 值為 0。此值定義為常量 EventSource.CONNECTING。
• 打開 – 已建立的連接被稱為處于打開狀態(tài)。處于打開狀態(tài)的 EventSource 對象可以接收數(shù)據(jù)。readyState 值為 1 對應(yīng)于打開狀態(tài)。此值定義為常量 EventSource.OPEN。
• 關(guān)閉 – 如果未建立連接并且未嘗試重新連接，則 EventSource 被稱為處于關(guān)閉狀態(tài)。此狀態(tài)通常通過調(diào)用 close() 方法進(jìn)入。處于關(guān)閉狀態(tài)的 EventSource 的 readyState 值為 2。此值定義為常量 EventSource.CLOSED。

以下示例顯示了如何使用 readyState 屬性檢查 EventSource 連接。為了避免硬編碼 readyState 值，該示例使用了狀態(tài)常量。

function supportsSSE() {
  return !!window.EventSource;
}

結(jié)論

本文介紹了 SSE 的客戶端方面。如果您有興趣了解有關(guān) SSE 的更多信息，我建議您閱讀《服務(wù)器端 SSE》。我還撰寫了一篇更實用的文章，介紹了 Node.js 中的 SSE。享受！

關(guān)于使用 SSE 實現(xiàn)推送技術(shù)的常見問題 (FAQ)

實現(xiàn) SSE 的前提條件是什么？

要實現(xiàn) SSE，您需要對 JavaScript 和 Node.js 有基本的了解。您還應(yīng)該熟悉 HTTP 的概念及其工作原理。此外，了解事件驅(qū)動編程可能會有益，因為 SSE 基于此概念。

SSE 與 WebSockets 有何不同？

雖然 SSE 和 WebSockets 都提供實時數(shù)據(jù)更新，但它們的功能和用例有所不同。WebSockets 在客戶端和服務(wù)器之間提供雙向通信通道，允許雙方隨時發(fā)送數(shù)據(jù)。另一方面，SSE 是一條單向通信通道，只有服務(wù)器才能向客戶端推送更新。這使得 SSE 更適合那些數(shù)據(jù)更新主要由服務(wù)器啟動的應(yīng)用程序。

SSE 可以與任何服務(wù)器端語言一起使用嗎？

是的，SSE 可以與任何支持 HTTP 的服務(wù)器端語言一起使用。這包括 Node.js、Python、PHP、Ruby 等語言。關(guān)鍵是設(shè)置正確的 HTTP 標(biāo)頭并根據(jù) SSE 規(guī)范格式化數(shù)據(jù)。

如何處理 SSE 的連接錯誤或中斷？

用于在客戶端實現(xiàn) SSE 的 EventSource API 會在連接丟失時自動嘗試重新連接到服務(wù)器。您還可以偵聽 EventSource 對象上的“error”事件，以手動處理連接錯誤或中斷。

我可以使用 SSE 從客戶端向服務(wù)器發(fā)送數(shù)據(jù)嗎？

不可以，SSE 旨在用于從服務(wù)器到客戶端的單向通信。如果您需要從客戶端向服務(wù)器發(fā)送數(shù)據(jù)，可以使用傳統(tǒng)的 AJAX 請求或切換到雙向通信技術(shù)，例如 WebSockets。

所有瀏覽器都支持 SSE 嗎？

大多數(shù)現(xiàn)代瀏覽器都支持 SSE。但是，Internet Explorer 不支持 SSE。您可以使用 EventSource.js 等 polyfill 在不受支持的瀏覽器中添加對 SSE 的支持。

如何關(guān)閉 SSE 連接？

您可以通過調(diào)用 EventSource 對象上的 close() 方法來關(guān)閉 SSE 連接。這將阻止服務(wù)器向客戶端發(fā)送更多更新。

我可以將 SSE 用于多用戶實時應(yīng)用程序嗎？

是的，您可以將 SSE 用于多用戶實時應(yīng)用程序。但是，請記住，每個用戶都會打開與服務(wù)器的單獨連接。如果您有大量用戶，這可能會導(dǎo)致服務(wù)器負(fù)載過高。

如何使用 SSE 發(fā)送不同類型的事件？

您可以通過在從服務(wù)器發(fā)送的數(shù)據(jù)中包含“event”字段來發(fā)送不同類型的事件。然后，客戶端可以使用 EventSource 對象上的 addEventListener() 方法偵聽這些特定事件類型。

我可以將 SSE 與 REST API 一起使用嗎？

是的，您可以將 SSE 與 REST API 一起使用。服務(wù)器可以在資源更改時向客戶端發(fā)送更新。這對于在不進(jìn)行輪詢的情況下使客戶端與服務(wù)器狀態(tài)保持同步非常有用。

以上是使用服務(wù)器量事件實施推送技術(shù)的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！