HTML5 中的服务器发送事件如何运作?

服务器发送事件标准化了数据从服务器流式传输到客户端的方式。要在 Web 应用程序中使用服务器发送事件，您需要向文档添加一个 <eventsource> 元素。

<eventsource> 元素的 src 属性应指向一个 URL，该 URL 应提供持久的 HTTP 连接，用于发送包含事件的数据流。

该 URL 应指向一个 PHP、PERL 或任何 Python 脚本，用于持续发送事件数据。以下是一个需要服务器时间的 Web 应用程序的简单示例。

您可以尝试运行以下代码来了解如何在 HTML5 中使用服务器发送事件

示例

<!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>

最后，以下是用 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);
}

相关文章

• HTML DOM 输入按钮对象
• HTML 画布 shadowBlur 属性
• HTML DOM address 对象
• HTML 画布 shadowColor 属性
• 使用 onmouseover 属性更改网页背景颜色
• HTML 画布 fillStyle 属性
• HTML frame 框架标签
• HTML Canvas clearRect() 方法
• HTML body 标签
• HTML optgroup 标签

有用资源

• html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/