HTMX - 伺服器傳送事件 (SSE)

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

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

在 Web 應用程式中使用 SSE 的方法

要在 Web 應用程式中使用伺服器傳送事件，請遵循以下步驟。

• 在文件中新增一個<eventsource> 元素。<eventsource> 元素的 src 屬性應指向一個 URL，該 URL 提供一個持續的 HTTP 連線，該連線傳送包含事件的資料流。
• URL 指向一個 PHP、PERL 或任何 Python 指令碼，這些指令碼將負責持續傳送事件資料。

示例

以下是一個 Web 應用程式的 HTMX 程式碼示例，該應用程式將期望伺服器時間。

<div id="sse"
 hx-sse="connect:/cgi-bin/ticker.cgi"
 hx-trigger="sse:message"
 hx-swap="innerHTML">
   <div id="ticker">
 Waiting for updates...
   </div>
</div>

SSE 的伺服器端指令碼

伺服器端指令碼應傳送一個 Content-type 標頭，指定型別為 text/event-stream，如下所示。

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

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

print "Event: server-time\n";

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

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

最後，以下是使用 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 應用程式以處理伺服器傳送的事件。以下是最終示例。

<div id="sse"
 hx-sse="connect:/cgi-bin/ticker.cgi"
 hx-trigger="sse:server-time"
 hx-target="#ticker"
 hx-swap="innerHTML">
    <div id="ticker" name="ticker">
 Waiting for updates...
    </div>
</div>