HTML5 – Web 服务器分派事件

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 将指向一个 PHPPERL 或任何 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>

在测试 Server-Sent 事件之前,建议您确保您的 Web 浏览器支持此概念。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程