HTML5 - 服务器发送事件

HTML5服务器发送事件 - 通过简单简单的步骤学习HTML 5，其中包含2D画布，音频，视频，新语义元素，地理位置，持久本地存储，Web存储，Web SQL，Forms 2.0，微数据和拖放，IndexedDB的示例，Web消息，CORS，Web RTC，画布绘图矩形，Web存储，服务器发送事件，Web画布，Web工作者，幻灯片。

传统的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应用程序的一个简单示例，它可能需要服务器时间.

                     /* Define event handling logic here */

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

                         document.getElementsByTagName("eventsource")[0].addEventListener("server-time",          eventHandler, false);              function eventHandler(event) {             // Alert time sent by the server             document.querySelector('#ticker').innerHTML = event.data;          }                                                             [TIME]

在测试Server-Sent事件之前，我建议你确保你的网络浏览器支持这个概念.