HTML SSE API - 伺服器傳送事件

伺服器傳送事件 (SSE API)

伺服器傳送事件是一種無需頁面重新整理或發出請求即可從伺服器向網頁傳送資料的方法。這些事件對於建立即時應用程式（例如聊天、新聞提要或通知）非常有用。使用 SSE，我們可以從我們的 Web 伺服器連續地推送 DOM 事件到訪問者的瀏覽器。

事件流方法開啟與伺服器的持久連線，在有新資訊可用時將資料傳送到客戶端，無需連續輪詢。伺服器傳送事件標準化了我們如何將資料從伺服器流式傳輸到客戶端。

如何在 Web 應用程式中使用 SSE？

要在 Web 應用程式中使用伺服器傳送事件，我們需要向文件中新增一個<eventsource>元素。 <eventsource>元素的src屬性應該指向一個提供持久 HTTP 連線的 URL，該連線傳送包含事件的資料流。此外，URL 指向一個 PHP、PERL 或任何 Python 指令碼，這些指令碼將負責持續傳送事件資料。

示例

以下是預期伺服器時間的 Web 應用程式的示例 HTML 程式碼

<!DOCTYPE html>
<html>
<head>
   <script type="text/javascript">
      /* Define event handling logic here */
   </script>
</head>
<body>
   <div id="sse">
      <eventsource src="/cgi-bin/ticker.cgi" />
   </div>
   <div id="ticker">
      <TIME>
   </div>
</body>
</html>

SSE 的伺服器端指令碼

以下是從伺服器端指令碼傳送伺服器傳送事件 (SSE) 的步驟

1. 設定 Content-Type 頭部

伺服器端指令碼應傳送Content-Type頭部，指定型別 text/event-stream，如下所示。

print "Content-Type: text/event-stream\n\n";

2. 傳送事件名稱

設定 Content-Type 後，伺服器端指令碼將傳送一個 Event: 標籤，後跟事件名稱。以下程式碼片段將傳送 Server-Time 作為以換行符結尾的事件名稱。

print "Event: server-time\n";

3. 傳送事件資料

最後一步是使用 Data: 標籤傳送事件資料，該標籤後跟一個整數或以換行符結尾的字串值，如下所示：

$time = localtime();
print "Data: $time\n";

4. 將步驟組合成完整的指令碼

最後，以下是使用 Perl 編寫的完整的“ticker.cgi”：

#!/usr/bin/perl
print "Content-Type: text/event-stream\n\n";
while(true){
   print "Event: server-time\n";
   $time = localtime();
   print "Data: $time\n";
   sleep(5);
}

處理伺服器傳送事件

您還可以修改 Web 應用程式以使用 eventsource 物件來偵聽和處理伺服器傳送的事件。讓我們修改我們的 Web 應用程式以處理伺服器傳送的事件。

示例

以下示例演示瞭如何處理伺服器傳送事件

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      document.getElementsByTagName("eventsource")[0].addEventListener("server-time", eventHandler, false);
         function eventHandler(event) {
            // Alert time sent by the server
            document.querySelector('#ticker').innerHTML = event.data;
         }
    </script>
  </head>
  <body>
    <div id="sse">
      <eventsource src="/cgi-bin/ticker.cgi" />
    </div>
    <div id="ticker" name="ticker"> [TIME] </div>
  </body>
</html>

注意：在測試伺服器傳送事件之前，我建議您確保您的 Web 瀏覽器支援此概念。

列印頁面