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 浏览器支持此概念。

打印页面