核心要點(diǎn)

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

與 WebSockets 的比較

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

檢測支持

SSE 的支持度相對較高，Internet Explorer 是唯一一個(gè)尚不支持它們的 主要瀏覽器。但是，只要 IE 落後，就仍然需要提供功能檢測。在客戶端，SSE 使用 EventSource 對象實(shí)現(xiàn)——這是全局對象的一個(gè)屬性。以下函數(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ù)。以下示例顯示了一個(gè)通用的 onopen 事件處理程序。

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

EventSource 事件處理程序也可以使用 addEventListener() 方法編寫。此替代語法優(yōu)於 onopen，因?yàn)樗试S多個(gè)處理程序附加到同一事件。以下使用 addEventListener() 重寫了之前的 onopen 事件處理程序。

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

接收消息

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

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

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

EventSource(url);

命名事件

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

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

處理錯(cuò)誤

如果事件流出現(xiàn)問題，則會觸發(fā) EventSource 的 onerror 事件處理程序。錯(cuò)誤的一個(gè)常見原因是連接中斷。儘管 EventSource 對象會自動嘗試重新連接到服務(wù)器，但在斷開連接時(shí)也會觸發(fā)錯(cuò)誤事件。以下示例顯示了一個(gè) 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;
  // 處理消息
};

斷開連接

客戶端可以隨時(shí)通過調(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 屬性中。在其生命週期的任何時(shí)間點(diǎn)，連接都可以處於三種可能的狀態(tài)之一——連接中、打開和關(guān)閉。以下列表描述了每種狀態(tài)。

• 連接中 – 創(chuàng)建 EventSource 對象時(shí)，它最初會進(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》。我還撰寫了一篇更實(shí)用的文章，介紹了 Node.js 中的 SSE。享受！

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

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

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

SSE 與 WebSockets 有何不同？

雖然 SSE 和 WebSockets 都提供實(shí)時(shí)數(shù)據(jù)更新，但它們的功能和用例有所不同。 WebSockets 在客戶端和服務(wù)器之間提供雙向通信通道，允許雙方隨時(shí)發(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ī)範(fàn)格式化數(shù)據(jù)。

如何處理 SSE 的連接錯(cuò)誤或中斷？

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

我可以使用 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 用於多用戶實(shí)時(shí)應(yīng)用程序嗎？

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

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

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

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

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

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