《十》HTML5 Server-Sent Events

HTML5 有一个 Server-Sent Events（SSE）功能，允许服务端推送数据到客户端，通常叫数据推送。当数据源有新数据，它马上发送到客户端，不需要再等待客户端请求。

Server-Sent Events VS Web Socket：

相同点：作用相似，都是建立浏览器与服务器之间的通信渠道。

不同点：总体来说，Web Socket 更强大和灵活。

1. Web Socket 是全双工通道，可以双向通信，SSE 是单向通道，只能服务器向浏览器发送。
2. Web Socket 是一个独立协议，相对复杂；SSE 使用 HTTP 协议，使用简单。
3. SSE 默认支持断线重连；Web Socket 需要自己实现。
4. SSE 一般只用来传送文本，二进制数据需要编码后传送；Web Socket 默认支持传送二进制数据。

判断浏览器是否支持 Server-Sent Events ：

if(typeof(EventSource)!== "undefined"){
    // 浏览器支持 Server-Sent
}else{
    // 浏览器不支持 Server-Sent..
}

EventSource 对象：

EventSource 对象用于接收服务器发送的事件通知。

// 创建一个新的 EventSource 对象
var source=new EventSource(url);

EventSource 对象的属性：

1. readyState：表明连接的当前状态，只读。

   属性值有：

   • 0：表示连接还未建立，或者断线正在重连。
   • 1：表示连接已经建立，可以接受数据。
   • 2：表示连接已断，且不会重连。

EventSource 对象的事件：

1. open：通往服务器的连接打开时触发；
2. message：接收到消息时触发；
3. error：发生错误时触发；

var source=new EventSource("demo_sse.php");
source.onmessage=function(event){
    document.getElementById("result").innerHTML+=event.data;
};