关注我们

HTML5 - SSE推送事件

传统的Web应用程序会生成事件，这些事件将分派到Web服务器。如单击链接即可从服务器请求一个新页面。

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

SSE的Web应用程序

要在Web应用程序中使用服务器发送的事件，您需要在文档中添加<eventsource>元素。

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

复制代码

<!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后，服务器端脚本将发送 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); 
}

处理服务器发送事件

让无涯教程修改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>

在测试服务器发送的事件之前，建议您确保Web浏览器支持此概念。

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

透视HTTP协议 -〔罗剑锋（Chrono）〕

Spring Boot与Kubernetes云原生微服务实践 -〔杨波〕

好记忆不如烂笔头。留下您的足迹吧 :)