使用服務器量事件實施推送技術

核心要點

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

與 WebSockets 的比較

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

檢測支持

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

<code class="language-javascript">function supportsSSE() {
  return !!window.EventSource;
}</code>

連接

要連接到事件流，請調用 EventSource 構造函數，如下所示。您必須指定要訂閱的事件流的 URL。構造函數將自動負責打開連接。

<code class="language-javascript">EventSource(url);</code>

onopen 事件處理程序

建立連接後，將調用 EventSource 的 onopen 事件處理程序。事件處理程序將打開事件作為其唯一參數。以下示例顯示了一個通用的 onopen 事件處理程序。

<code class="language-javascript">source.onopen = function(event) {
  // 处理打开事件
};</code>

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

<code class="language-javascript">source.addEventListener("open", function(event) {
  // 处理打开事件
}, false);</code>

接收消息

客戶端將事件流解釋為一系列 DOM 消息事件。從服務器接收到的每個事件都會觸發 EventSource 的 onmessage 事件處理程序。 onmessage 處理程序將消息事件作為其唯一參數。以下示例創建了一個 onmessage 事件處理程序。

<code class="language-javascript">function supportsSSE() {
  return !!window.EventSource;
}</code>

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

<code class="language-javascript">EventSource(url);</code>

命名事件

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

<code class="language-javascript">source.onopen = function(event) {
  // 处理打开事件
};</code>

處理錯誤

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

<code class="language-javascript">source.addEventListener("open", function(event) {
  // 处理打开事件
}, false);</code>

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

<code class="language-javascript">source.onmessage = function(event) {
  var data = event.data;
  var origin = event.origin;
  var lastEventId = event.lastEventId;
  // 处理消息
};</code>

斷開連接

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

<code class="language-javascript">source.addEventListener("message", function(event) {
  var data = event.data;
  var origin = event.origin;
  var lastEventId = event.lastEventId;
  // 处理消息
}, false);</code>

連接狀態

EventSource 連接的狀態存儲在其 readyState 屬性中。在其生命週期的任何時間點，連接都可以處於三種可能的狀態之一——連接中、打開和關閉。以下列表描述了每種狀態。

• 連接中 – 創建 EventSource 對象時，它最初會進入連接中狀態。在此期間，連接尚未建立。如果已建立的連接丟失，EventSource 也將轉換到連接中狀態。處於連接中狀態的 EventSocket 的 readyState 值為 0。此值定義為常量 EventSource.CONNECTING。
• 打開 – 已建立的連接被稱為處於打開狀態。處於打開狀態的 EventSource 對象可以接收數據。 readyState 值為 1 對應於打開狀態。此值定義為常量 EventSource.OPEN。
• 關閉 – 如果未建立連接並且未嘗試重新連接，則 EventSource 被稱為處於關閉狀態。此狀態通常通過調用 close() 方法進入。處於關閉狀態的 EventSource 的 readyState 值為 2。此值定義為常量 EventSource.CLOSED。

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

<code class="language-javascript">function supportsSSE() {
  return !!window.EventSource;
}</code>

結論

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

關於使用 SSE 實現推送技術的常見問題 (FAQ)

實現 SSE 的前提條件是什麼？

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

SSE 與 WebSockets 有何不同？

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

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

是的，SSE 可以與任何支持 HTTP 的服務器端語言一起使用。這包括 Node.js、Python、PHP、Ruby 等語言。關鍵是設置正確的 HTTP 標頭並根據 SSE 規範格式化數據。

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

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

我可以使用 SSE 從客戶端向服務器發送數據嗎？

不可以，SSE 旨在用於從服務器到客戶端的單向通信。如果您需要從客戶端向服務器發送數據，可以使用傳統的 AJAX 請求或切換到雙向通信技術，例如 WebSockets。

所有瀏覽器都支持 SSE 嗎？

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

如何關閉 SSE 連接？

您可以通過調用 EventSource 對像上的 close() 方法來關閉 SSE 連接。這將阻止服務器向客戶端發送更多更新。

我可以將 SSE 用於多用戶實時應用程序嗎？

是的，您可以將 SSE 用於多用戶實時應用程序。但是，請記住，每個用戶都會打開與服務器的單獨連接。如果您有大量用戶，這可能會導致服務器負載過高。

如何使用 SSE 發送不同類型的事件？

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

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

是的，您可以將 SSE 與 REST API 一起使用。服務器可以在資源更改時向客戶端發送更新。這對於在不進行輪詢的情況下使客戶端與服務器狀態保持同步非常有用。

以上是使用服務器量事件實施推送技術的詳細內容。更多資訊請關注PHP中文網其他相關文章！