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>