HTML5 – Web 服务器分派事件

传统的 Web 应用程序生成事件并向 Web 服务器分派事件。例如，单击链接会从服务器请求新页面。

流动从 Web 浏览器到 Web 服务器的事件类型可以称为客户端发送事件。

随着 HTML5， WHATWG 的 Web 应用程序 1.0 引入了从 Web 服务器流向 Web 浏览器的事件，称为 Server-Sent Events（SSE）。使用 SSE，您可以将 DOM 事件持续地从您的 Web 服务器推送到访问者的浏览器。

事件流方法打开了到服务器的持久连接，在新信息可用时向客户端发送数据，消除了持续轮询的需要。

Server-sent events 标准化了我们如何从服务器流式传输数据到客户端。

用于 SSE 的 Web 应用程序

要在 Web 应用程序中使用 Server-Sent Events，您需要将 <eventsource> 元素添加到文档中。

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

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

<!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 的服务器端脚本

服务器端脚本应发送 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); 
}

处理 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>