HTMX - 服务器发送事件 (SSE)

服务器发送事件是一种将数据从服务器发送到网页的方式，无需页面刷新或发出请求。这些事件对于创建实时应用程序(如聊天、新闻提要或通知)非常有用。使用 SSE，我们可以将 DOM 事件从我们的 Web 服务器连续推送到访问者的浏览器。

事件流方法打开与服务器的持久连接，在有新信息可用时将数据发送到客户端，从而无需进行连续轮询。服务器发送事件标准化了我们将数据从服务器流式传输到客户端的方式。

在 Web 应用程序中使用 SSE 的方法

要在 Web 应用程序中使用服务器发送事件，请按照以下步骤操作。

• 向文档添加 <eventsource> 元素。 <eventsource> 元素的 src 属性应指向提供持久 HTTP 连接的 URL，该连接可发送包含事件的数据流。
• 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

";

设置 Content-Type 后，服务器端脚本将发送 Event: 标签，后跟事件名称。以下代码片段将发送 Server-Time 作为以换行符结尾的事件名称。

print "Event: server-time
";

最后一步是使用 Data: 标签发送事件数据，该标签后跟一个以换行符结尾的字符串值整数，如下所示。

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

最后，以下是用 Perl 编写的完整的 ticker.cgi

#!/usr/bin/perl
print "Content-Type: text/event-stream

";
while(true){
 print "Event: server-time
";
 $time = localtime();
 print "Data: $time
";
 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>