Html 简明教程

HTML - Server Sent Events

Server Sent Events 是一种在不需要页面刷新或发出请求的情况下将数据从服务器发送到网页的方法。这些事件对于创建实时应用程序很有用，例如聊天、新闻源或通知。使用 SSE，我们可以连续从我们的 Web 服务器向访问者的浏览器推送 DOM 事件。

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

How to use SSE in Web Application?

要在 Web 应用程序中使用服务器发送事件，我们需要向文档添加 <eventsource> 元素。<eventsource> 元素的 src 属性应指向一个 URL，该 URL 提供一个持久 HTTP 连接，该连接发送包含事件的数据流。此外，此 URL 指向一个 PHP、PERL 或任何 Python 脚本，该脚本将负责持续发送事件数据。

Instance

以下是一段 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>

Server Side Script for 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);
}

Handle Server-Sent Events

让我们修改我们的 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>

在测试 Server-Sent 事件之前，建议您确保您的网络浏览器支持此概念。