SSE EventSource

服务端事件EventSource揭秘

SSE eventSource简单介绍

20行代码写一个数据推送服务

服务端推

服务端推，指的是由服务器主动的向客户端发送消息（响应）。在应用层的HTTP协议实现中，“请求-响应”是一个round trip，它的起点来自客户端，因此在应用层之上无法实现简易的服务端推功能。当前解决服务端推送的方案有这几个：

1. 客户端长轮询
2. websocket双向连接
3. iframe永久帧

长轮询虽然可以避免短轮询造成的服务端过载，但在服务端返回数据后仍需要客户端主动发起下一个长轮询请求，等待服务端响应，这样仍需要底层的连接建立而且服务端处理逻辑需要相应处理，不符合逻辑上的流程简单的服务端推送；

websocket连接相对而言功能最强大，但是它对服务器的版本有要求，在可以使用websocket协议的服务器上尽量采用此种方式；

iframe永久帧则是在在页面嵌入一个专用来接受数据的iframe页面，该页面由服务器输出相关信息，如，服务器不停的向iframe中写入类似的script标签和数据，实现另一种形式的服务端推送。不过永久帧的技术会导致主页面的加载条始终处于“loading”状态，体验很差。

HTML5规范中提供了服务端事件EventSource，浏览器在实现了该规范的前提下创建一个EventSource连接后，便可收到服务端的发送的消息，这些消息需要遵循一定的格式，对于前端开发人员而言，只需在浏览器中侦听对应的事件皆可。

相比较上文中提到的3中实现方式，EventSource流的实现方式对客户端开发人员而言非常简单，兼容性上出了IE系的浏览器（IE、Edge）外其他都良好；对于服务端，它可以兼容老的浏览器，无需upgrade为其他协议，在简单的服务端推送的场景下可以满足需求。在浏览器与服务端需要强交互的场景下，websocket仍是不二的选择。

            EventSource接口用于接收服务器发送的事件。它通过HTTP连接到一个服务器，以text/event-stream格式接收事件，不关闭连接。

属性

此接口从其父接口EventTarget继承属性。

EventSource.onerror

是一个  EventHandler，当发生错误时被调用，并且在此对象上派发  error 事件。

EventSource.onmessage

是一个  EventHandler，当收到一个  message事件，即消息来自源头时被调用。

EventSource.onopen

是一个  EventHandler，当收到一个  open 事件，即连接刚打开时被调用。

EventSource.readyState 

一个   unsigned  short  值，代表连接状态。可能值是 CONNECTING  ( 0 ),  OPEN  ( 1 ),  或者CLOSED  ( 2 )。

EventSource.url 

 一个DOMString，代表源头的URL。

方法

此接口从其父接口EventTarget继承方法。

EventSource.close()

如果存在，则关闭连接，并且设置readyState 属性为 CLOSED。如果连接已经被关闭，此方法不做任何事。