HTML5 - 服务器发送事件

传统的Web应用程序生成分派给Web服务器的事件.例如，只需单击链接即可从服务器请求新页面.

从Web浏览器流向Web服务器的事件类型可称为客户端发送的事件.

与HTML5一起， WHATWG Web Applications 1.0引入了活动它从Web服务器流向Web浏览器，称为服务器发送事件(SSE).使用SSE，您可以将DOM事件从Web服务器连续推送到访问者的浏览器.

事件流方法打开与服务器的持久连接，在有新信息时将数据发送到客户端无需连续轮询.

服务器发送的事件标准化了我们如何将数据从服务器传输到客户端.

SSE的Web应用程序

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

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

该URL指向PHP，PERL或任何需要注意的Python脚本一致地发送事件数据.以下是Web应用程序的一个简单示例，它可能需要服务器时间.

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

服务器端脚本应发送 Content-type 标题指定类型 text/event-stream ，如下所示.

print "Content-Type: text/event-stream\n\n";

设置Content-Type后，服务器端脚本将发送事件:标记，后跟事件名称.下面的示例将发送Server-Time作为事件名称以新行字符终止.

print "Event: server-time\n";

最后一步是使用数据:标签发送事件数据，后面跟着一个新行终止的字符串值整数字符如下 :

$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); 
}

处理服务器发送事件

让我们修改我们的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事件之前，我建议你确保你的网络浏览器支持这个概念.