笙亿网络策划

HTML Server-Sent Events 怎么用？服务器发送事件实现实时推送？

约 5 分钟读完 36 阅
文章导读
Previous Quiz Next Server-Sent Events (SSE API) Server-sent events 是一种从服务器向网页发送数据的方式，无需页面刷新或发起请求。这些事件适用于创建实时应用，例如聊天、新闻提要或通知。使用 SSE，我们可
📋 目录
  1. 一 Server-Sent Events (SSE API)
  2. 二 如何在 Web 应用中使用 SSE？
  3. 三 SSE 的服务器端脚本
  4. 四 处理 Server-Sent Events
A A

HTML SSE API - Server-Sent Events

Previous
Quiz
Next

Server-Sent Events (SSE API)

Server-sent events 是一种从服务器向网页发送数据的方式，无需页面刷新或发起请求。这些事件适用于创建实时应用，例如聊天、新闻提要或通知。使用 SSE，我们可以从 Web 服务器持续向访客的浏览器推送 DOM 事件。

事件流方式会与服务器建立持久连接，当有新信息可用时向客户端发送数据，从而消除持续轮询的需要。Server-sent events 标准化了从服务器向客户端流式传输数据的方式。

如何在 Web 应用中使用 SSE？

要在 Web 应用中使用 Server-sent events，需要在文档中添加一个 <eventsource> 元素。src 属性应指向一个提供持久 HTTP 连接的 URL，该连接发送包含事件的 data stream。此外，该 URL 指向一个 PHP、PERL 或任何 Python 脚本，用于持续发送事件数据。

示例

以下是一个 Web 应用示例 HTML 代码，该应用期望接收服务器时间：

<!DOCTYPE html>
<html>
<head>
   <script type="text/javascript">
      /* 在此处定义事件处理逻辑 */
   </script>
</head>
<body>
   <div id="sse">
      <eventsource src="/cgi-bin/ticker.cgi" />
   </div>
   <div id="ticker">
      <TIME>
   </div>
</body>
</html>

SSE 的服务器端脚本

以下是从服务器端脚本发送 server-sent events (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);
}

处理 Server-Sent Events

您还可以修改 Web 应用，使用 eventsource 对象来监听和处理 server-sent events。让我们修改 Web 应用来处理 server-sent events。

示例

以下示例演示了处理 server-sent events：

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      document.getElementsByTagName("eventsource")[0].addEventListener("server-time", eventHandler, false);
         function eventHandler(event) {
            // 显示服务器发送的时间
            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>

注意： 在测试 Server-Sent events 之前，建议您确认您的 Web 浏览器支持此功能。