HTML5 服务器推送事件（Server-sent Events）实战开发

原文连接

简介

服务器推送事件（Server-sent Events）是 HTML 5 规范中的一个组成部分，能够用来从服务端实时推送数据到浏览器端。相对于与之相似的 COMET 和 WebSocket 技术来讲，服务器推送事件的使用更简单，对服务器端的改动也比较小。对于某些类型的应用来讲，服务器推送事件是最佳的选择。本文对服务器推送技术进行了详细的介绍，包含浏览器端和服务器端的相应实现细节，为在实践中使用该技术提供了指南。

对于通常的 Web 应用开发，大多数开发人员并不陌生。在 Web 应用中，浏览器和服务器之间使用的是请求 / 响应的交互模式。浏览器发出请求，服务器根据收到的请求来生成相应的响应。浏览器再对收到的响应进行处理，展示给用户。响应的格式多是 HTML、XML 或 JSON 等。随着 REST 架构风格和 AJAX 的流行，服务器更多地使用 JSON 做为响应的数据格式。Web 应用使用 XMLHttpRequest 对象来发送请求，并根据服务器端返回的数据，对页面的内容进行动态更新。一般来讲，用户在页面上的操做，好比点击或移动鼠标，会触发相应的事件。由 XMLHttpRequest 对象来发出请求，获得服务器响应以后进行页面的局部更新。这种方式的不足之处在于：服务器端产生的数据变化不能及时地通知浏览器，而是须要等到下次请求发出时才能被浏览器获取。对于某些对数据实时性要求很高的应用来讲，这种延迟是不能接受的。

为了知足这类应用的需求，就须要有某种方式可以从服务器端推送数据给浏览器，以保证服务器端的数据变化能够在第一时间通知给用户。目前常见的解决办法有很多，主要能够分红两类。这两类方法的区别在因而否基于 HTTP 协议来实现。不使用 HTTP 协议的作法是使用 HTML 5 新增的 WebSocket 规范，而使用 HTTP 协议的作法则包括简易轮询、COMET 技术和本文中要介绍的 HTML 5 服务器推送事件。下面会对这几种技术进行介绍。

在介绍 HTML 5 服务器推送事件以前，首先介绍一些上面提到的几种服务器端数据推送技术。第一种是 WebSocket。WebSocket 规范是 HTML 5 中的一个重要组成部分，已经被不少主流浏览器所支持，也有很多基于 WebSocket 开发的应用。正如名称所表示的同样，WebSocket 使用的是套接字链接，基于 TCP 协议。使用 WebSocket 以后，实际上在服务器端和浏览器之间创建一个套接字链接，能够进行双向的数据传输。WebSocket 的功能是很强大的，使用起来也灵活，能够适用于不一样的场景。不过 WebSocket 技术也比较复杂，包括服务器端和浏览器端的实现都不一样于通常的 Web 应用。

除了 WebSocket 以外，其余的实现方式是基于 HTTP 协议来达到实时推送的效果。第一种作法是简易轮询，即浏览器端定时向服务器端发出请求，来查询是否有数据更新。这种作法比较简单，能够在必定程度上解决问题。不过对于轮询的时间间隔须要进行仔细考虑。轮询的间隔过长，会致使用户不能及时接收到更新的数据；轮询的间隔太短，会致使查询请求过多，增长服务器端的负担。

COMET 技术改进了简易轮询的缺点，使用的是长轮询。长轮询的方式在每次请求时，服务器端会保持该链接在一段时间内处于打开状态，而不是在响应完成以后就当即关闭。这样作的好处是在链接处于打开状态的时间段内，服务器端产生的数据更新能够被及时地返回给浏览器。当上一个长链接关闭以后，浏览器会当即打开一个新的长链接来继续请求。不过 COMET 技术的实如今服务器端和浏览器端都须要第三方库的支持。

综合比较上面提到的 4 种不一样的技术，简易轮询因为其自己的缺陷，并不推荐使用。COMET 技术并非 HTML 5 标准的一部分，从兼容标准的角度出发，也不推荐使用。WebSocket 规范和服务器推送技术都是 HTML 5 标准的组成部分，在主流浏览器上都提供了原生的支持，是推荐使用的。不过 WebSocket 规范更加复杂一些，适用于须要进行复杂双向数据通信的场景。对于简单的服务器数据推送的场景，使用服务器推送事件就足够了。

在浏览器支持方面，服务器推送事件已经在除 IE 外的大部分桌面和移动浏览器上获得了支持。支持服务器推送事件的浏览器及其版本包括：Firefox 6.0+、Chrome 6.0+、Safari 5.0+、Opera 11.0+、iOS Safari 4.0+、Opera Mobile 11.1+、Chrome for Android 25.0+、Firefox for Android 19.0+ 以及 Blackberry Browser 7.0+ 等。关于 IE 的支持，在下面的章节中有详细的介绍。

下面对服务器推送事件的规范进行具体的说明。

回页首

规范

Server-sent Events 规范是 HTML 5 规范的一个组成部分，具体的规范文档见参考资源。该规范比较简单，主要由两个部分组成：第一个部分是服务器端与浏览器端之间的通信协议，第二部分则是在浏览器端可供 JavaScript 使用的 EventSource 对象。通信协议是基于纯文本的简单协议。服务器端的响应的内容类型是“text/event-stream”。响应文本的内容能够当作是一个事件流，由不一样的事件所组成。每一个事件由类型和数据两部分组成，同时每一个事件能够有一个可选的标识符。不一样事件的内容之间经过仅包含回车符和换行符的空行（“\r\n”）来分隔。每一个事件的数据可能由多行组成。代码示例 1 给出了服务器端响应的示例。

示例1. 服务器端响应的示例

data: first event

data: second event
id: 100

event: myevent
data: third event
id: 101

: this is a comment
data: fourth event
data: fourth event continue
复制代码

如代码示例 1 所示，每一个事件之间经过空行来分隔。对于每一行来讲，冒号（“:”）前面表示的是该行的类型，冒号后面则是对应的值。可能的类型包括：

类型为空白，表示该行是注释，会在处理时被忽略。

类型为 data，表示该行包含的是数据。以 data 开头的行能够出现屡次。全部这些行都是该事件的数据。

类型为 event，表示该行用来声明事件的类型。浏览器在收到数据时，会产生对应类型的事件。

类型为 id，表示该行用来声明事件的标识符。

类型为 retry，表示该行用来声明浏览器在链接断开以后进行再次链接以前的等待时间。

在代码示例 1 中，第一个事件只包含数据“first event”，会产生默认的事件；第二个事件的标识符是 100，数据为“second event”；第三个事件会产生类型为“myevent”的事件；最后一个事件的数据为“fourth event\nfourth event continue”。当有多行数据时，实际的数据由每行数据以换行符链接而成。

若是服务器端返回的数据中包含了事件的标识符，浏览器会记录最近一次接收到的事件的标识符。若是与服务器端的链接中断，当浏览器端再次进行链接时，会经过 HTTP 头“Last-Event-ID”来声明最后一次接收到的事件的标识符。服务器端能够经过浏览器端发送的事件标识符来肯定从哪一个事件开始来继续链接。

对于服务器端返回的响应，浏览器端须要在 JavaScript 中使用 EventSource 对象来进行处理。EventSource 使用的是标准的事件监听器方式，只须要在对象上添加相应的事件处理方法便可。EventSource 提供了三个标准事件，如表 1 所示。

表 1. EventSource 对象提供的标准事件 名称说明事件处理方法 open 当成功与服务器创建链接时产生 onopen message 当收到服务器发送的事件时产生 onmessage error 当出现错误时产生 onerror

如以前所述，服务器端能够返回自定义类型的事件。对于这些事件，可使用 addEventListener 方法来添加相应的事件处理方法。代码示例 2 给出了 EventSource 对象的使用示例。

示例 2. EventSource 对象的使用示例

var es = new EventSource('events');
es.onmessage = function(e) {
    console.log(e.data);
};

es.addEventListener('myevent', function(e) {
    console.log(e.data);
});
复制代码

如代码示例 2 所示，在指定 URL 建立出 EventSource 对象以后，能够经过 onmessage 和 addEventListener 方法来添加事件处理方法。当服务器端有新的事件产生，相应的事件处理方法会被调用。EventSource 对象的 onmessage 属性的做用相似于 addEventListener( ‘ message ’ )，不过 onmessage 属性只支持一个事件处理方法。

服务器端和浏览器端实现

1.服务端（用的是java其余编程语言也能够，只要返回数据格式正确便可）

这是一个消息推送接口，记得将

@RequestMapping``(``"pushMessage.json"``)

``public void pushMessage(HttpServletResponse response,HttpServletRequest request){

OutputStream bos = null;

        try {

            String data1 =" www.imiansha.com爱面纱网站上线了\n\n";

            String data2 = " www.imiansha.com爱面纱网站正在招兵买马\n\n";

            //声明浏览器在链接断开以后进行再次链接以前的等待时间 10秒

            String retry = "retry:"+10000+"\n\n";

            //事件的标识符

            String id="id:100\n\n";

            //最后一次接收到的事件的标识符

            String last = request.getHeader("Last-Event-ID");

            logger.info(last);

            bos = new BufferedOutputStream(response.getOutputStream());

            response.setContentType("text/event-stream");//记得要设置哦

            bos.write(data1.getBytes());

            bos.write(data2.getBytes());

            bos.write(retry.getBytes());

            bos.write(id.getBytes());

            bos.flush();

        } catch (IOException e) {

            e.printStackTrace();

        }finally{

            try {

                bos.close();

            } catch (IOException e) {

                e.printStackTrace();

            }

        }
复制代码

``}

2.客户端实现

<!DOCTYPE html>

<html>

``<head>

``<meta charset=``"UTF-8"``>

``<title>HTML ``5 服务器推送消息事件</title>

``</head>

``<body>

``<h1>得到服务器更新的消息</h1>

``<div id=``"result"``></div>

``<script>

``if``(typeof(EventSource)!==``"undefined"``)

``{

``var eventSource=``new EventSource(``"/test/pushMessage.json"``);

``eventSource.onopen = function(){

console.log("链接打开。。。。。。");

``}

eventSource.onerror = function(e) { console.log('error'); };

``eventSource.onmessage=function(event) {

``document.getElementById(``"result"``).innerHTML+=event.data + ``"<br />"``;

``};

``}``else``{

``document.getElementById(``"result"``).innerHTML=``"Sorry, your browser does not support server-sent events..."``;

``}

``</script>

``</body>

</html>

对IE 支持

使用浏览器原生的 EventSource 对象的一个比较大的问题是 IE 并不提供支持。为了在 IE 上提供一样的支持，通常有两种办法。第一种办法是在其余浏览器上使用原生 EventSource 对象，而在 IE 上则使用简易轮询或 COMET 技术来实现；另一种作法是使用 polyfill 技术，即便用第三方提供的 JavaScript 库来屏蔽浏览器的不一样。本文使用的是 polyfill 技术，只须要在页面中加载第三方 JavaScript 库便可。应用自己的浏览器端代码并不须要进行改动。通常推荐使用第二种作法，由于这样的话，在服务器端只须要使用一种实现技术便可。

在 IE 上提供相似原生 EventSource 对象的实现并不简单。理论上来讲，只须要经过 XMLHttpRequest 对象来获取服务器端的响应内容，并经过文本解析，就能够提取出相应的事件，并触发对应的事件处理方法。不过问题在于 IE 上的 XMLHttpRequest 对象并不支持获取部分的响应内容。只有在响应完成以后，才能获取其内容。因为服务器端推送事件使用的是一个长链接。当链接一直处于打开状态时，经过 XMLHttpRequest 对象并不能获取响应的内容，也就没法触发对应的事件。更具体的来讲，当 XMLHttpRequest 对象的 readyState 为 3（READYSTATE_INTERACTIVE）时，其 responseText 属性是没法获取的。

为了解决 IE 上 XMLHttpRequest 对象的问题，就须要使用 IE 8 中引入的 XDomainRequest 对象。XDomainRequest 对象的做用是发出跨域的 AJAX 请求。XDomainRequest 对象提供了 onprogress 事件。当 onprogress 事件发生时，能够经过 responseText 属性来获取到响应的部份内容。这是 XDomainRequest 对象和 XMLHttpRequest 对象的最大不一样，也是使用 XDomainRequest 对象来实现相似原生 EventSource 对象的基础。在使用 XDomainRequest 对象打开与服务器端的链接以后，当服务器端有新的数据产生时，能够经过 XDomainRequest 对象的 onprogress 事件的处理方法来进行处理，对接收到的数据进行解析，根据数据的内容触发相应的事件。

不过因为 XDomainRequest 对象原本的目的是发出跨域 AJAX 请求，考虑到跨域访问的安全性问题，XDomainRequest 对象在使用时的限制也比较严格。这些限制会影响到其做为 EventSource 对象的实现方式。具体的限制和解决办法以下所示：

服务器端的响应须要包含 Access-Control-Allow-Origin 头，用来声明容许从哪些域访问该 URL。“*”表示容许来自任何域的访问，不推荐使用该值。通常使用与当前应用相同的域，限制只容许来自当前域的访问。

XDomainRequest 对象发出的请求不能包含自定义的 HTTP 头，这就限制了不能使用 Last-Event-ID 头来声明浏览器端最近一次接收到的事件的标识符。只能经过 HTTP 请求的其余方式来传递该标识符，如 GET 请求的参数或 POST 请求的内容体。

XDomainRequest 对象的请求的内容类型（Content-Type）只能是“text/plain”。这就意味着，当使用 POST 请求时，服务器端使用的框架，如 servlet，不会对 POST 请求的内容进行自动解析，没法使用 HttpServletRequest 类的 getParameter 方法来获取 POST 请求的内容。只能在服务器端对原始的请求内容进行解析，获取到其中的参数的值。

XDomainRequest 对象发出的请求中不包含任何与用户认证相关的信息，包括 cookie 等。这就意味着，若是服务器端须要认证，则须要经过 HTTP 请求的其余方式来传递用户的认证信息，好比 session 的 ID 等。

因为 XDomainRequest 对象的这些限制，服务器端的实现也须要做出相应的改动。这些改动包括返回 Access-Control-Allow-Origin 头；对于浏览器端发送的“text/plain”类型的参数进行解析；处理请求中包含的用户认证相关的信息。

本文的示例使用的 polyfill 库是 GitHub 上的 Yaffle 开发的 EventSource 项目，具体的地址见参考资源。在使用该 polyfill 库，并对服务器端的实现进行修改以后，就能够在 IE 8 及以上的浏览器中使用服务器推送事件。若是须要支持 IE 7，则只能使用简易轮询或 COMET 技术。本文的示例代码见参考资源。

小结

若是须要从服务器端推送数据给浏览器，可使用的基于 HTML 5 规范标准的技术包括 WebSocket 和服务器推送事件。开发人员能够根据应用的具体需求来选择合适的技术。若是只是须要从服务器端推送数据，服务器推送事件的规范更加简单，实现起来更容易。本文对服务器推送事件的规范内容、服务器端和浏览器端的实现都进行了详细的介绍，对如何支持 IE 浏览器也进行了具体的分析。