Categories
HTML教程

HTML5-服务器发送事件

HTML5-服务器发送事件


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

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

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

事件流方法可打开与服务器的持久连接,并在有新信息可用时将数据发送到客户端,从而无需进行连续轮询。

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

SSE的Web应用程序

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

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

URL将指向PHP,PERL或任何Python脚本,这些脚本将始终如一地发送事件数据。以下是一个Web应用程序的简单示例,该示例可能需要服务器时间。

<script type="text/javascript">
         /* Define event handling logic here */
      </script>
   
   
   
      <div id="sse">
         <eventsource src="/cgi-bin/ticker.cgi"></eventsource>
      </div>
        
      <div id="ticker">
         <time>
      </time></div>
   

SSE的服务器端脚本

服务器端脚本应发送Content-type标头,以指定文本/事件流的类型,如下所示。

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

设置Content-Type之后,服务器端脚本将发送Event :标记,后跟事件名称。作为事件的名称以终止字符下面的例子将发送服务器的时间。

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应用程序以处理服务器发送的事件。以下是最后一个示例。

<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> 
    
  
    
      <div id="sse"> 
         <eventsource src="/cgi-bin/ticker.cgi"></eventsource> 
      </div> 
   
      <div id="ticker" name="ticker"> 
         [TIME] 
      </div> 
    

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

error: 内容受到保护 !!