HTML5 服务器推送事件

传统的 Web 应用程序生成发送到 Web 服务器端的事件。比如,点击一个链接会从服务器请求一个新页面。

这种从 Web 浏览器到 Web 服务器的时间类型可以称作客服端事件。

随着HTML5的出现,WHATWG Web Applications 1.0引入了一个从 Web 服务器到 Web 浏览器的事件流,被称作服务器推送事件(SSE)。使用SSE可以不停的将DOM事件推送到用户的浏览器中。

这个事件流方法会打开一个到服务器的持久连接,新消息可用时发送数据到客户端,从而不再需要持续的轮询。

SSE Web 应用程序

要在 Web 应用程序中使用服务器推送事件,我们需要给文档添加一个 元素。

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

这个 URL 将会指向一个持续发送事件数据的PHP,PERL或者任意Python脚本。下面是一个简单的期望获得服务器时间的Web 应用程序示例。

SSE 服务器端脚本

服务器端脚本应该发送Content-type头指定类型为text/event-stream,如下所示:

设置Content-type之后,服务器端脚本将发送一个后面紧跟事件名称的Event:标签。下面的示例将会发送一个以换行符结束的 Server-Time 作为事件名称。

最后一步是使用Data:标签发送事件数据,紧随其后的是以换行符结束的整数字符串值,如下所示:

下面是用perl编写的完整ticker.cgi:

处理服务器推送事件

让我们修改一下我们的 Web 应用程序来处理服务器推送时间。下面是最终示例:

在测试服务器推送事件之前,建议你确保你的 Web 浏览器支持这一概念。

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180220G06PTK00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券