Javascript Ajax总结——其他跨域技术之服务器发送事件SSE

Posted 2022-03-24 wuxxblog

SSE（server-Sent Events，服务器发送事件）是围绕只读Comet交互推出的API或者模式。

SSE API创建到服务器的单向连接，服务器通过这个连接可以发送任意数量的数据。服务器响应的MIME类型必须是text/event-stream，是浏览器中的javascriptAPI能解析输出的格式。SSE支持短轮询、长轮询和HTTP流，能在断开连接时自动确定何时重新连接。

支持SSE的浏览器：Firefox6+、Safari5+、Opera11+、Chrome、ios4+版Safari。

（1）SSE API

创建一个EventSource事件，传进一个入口点：

    var source = new EventSource("myevents.php");

传入的URL必须与创建对象的页面同源（相同的URL模式、域及端口）。

EventSource的实例有一个readyState属性：
    0：表示正连接到服务器；
    1：表示打开了连接；
    2：表示关闭了连接。

三个事件：
    * open：在建立连接时触发。
    * message：在从服务器接收到新事件时触发。
    * error：在无法建立连接时触发。

onmessage事件处理程序：

1 source.onmessage = function()
2     var data = event.data;
3     //处理数据
4     //数据是字符串格式  
5 

默认情况下，EventSource对象会保持与服务器的活动连接。如果连接断开，还会重新连接。这意味着SSE适合长轮询和HTTP流。如果想强制立即断开连接并且不再重新连接，可以调用close()方法。

source.close();

（2）事件流

所谓的服务器事件会通过一个持久的HTTP响应发送，这个响应的MIME类型为text/event-stream。响应的格式是纯文本，最简单的情况是每个数据项都带有前缀data:，如：

    data: foo

    data: bar

    data: foo
    data: bar

事件流中的第一个message事件返回的event.data值为“foo”，第二个message事件返回的event.data值为“bar”，第三个message事件返回的event.data值为“foo\nbar”。对于多个连续的以data:开头的数据行，将作为多段数据解析，每个值之间以一个换行符分隔。只有在包含data:的数据行后面有空行时，才会触发message事件，因此在服务器上生成事件流时不能忘了多添加这一行。

通过id:前缀可以给特定的事件指定一个关联的ID，这个ID行位于data:行前面或后面皆可：

    data: foo
    id: 1

设置ID后，EventSource对象会跟踪上一次触发的事件。如果连接断开，会向服务器发送一个包含名为Last-Event-ID的特殊HTTP头部的请求，以便服务器指定下一次该触发哪一个事件。在多次连接的事件流中，这种机制可以确保浏览器以正确的顺序收到连接的数据段。