(转)HTML5服务器推送事件Server-sent events

规范
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 属性只支持一个事件处理方法。

---

使用示例：
创建对象发起连接：

var evtSource = new EventSource("conn?k="+k);

evtSource.onopen= function(e) {
            console.log("开始发送");
            var date = new Date();
            console.log("time:"+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds());
};

---

业务结束时(接收特定事件)关闭连接(不再重连)：

evtSource.addEventListener("ready", function (e) {
    //close后就不自动重连了，否则就算服务器端对应的方法走完了，还会重新建立连接额
    evtSource.close();
    console.log("返回的data:"+e.data)
    location.href = "ui?data="+e.data;
    }, false );

后台返回事件代码段：


@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("进入/conn time: "+System.currentTimeMillis()+"___"+sdf.format(new Date()));
System.out.println("openConn:"+req.getRequestURL());
resp.setCharacterEncoding("UTF-8");
resp.setContentType("text/event-stream");
resp.getWriter().print(“event:ready\n”);
resp.getWriter().print(“data: end\n\n”);
resp.getWriter().flush();