[TOC] ## 概述 - HTTP 协议无法做到服务器主动推送信息。但是，有一种变通方法，就是服务器向客户端声明，接下来要发送的是流信息（streaming） - 它基于 HTTP 协议，目前除了 IE/Edge，其他浏览器都支持 优点: * SSE 属于轻量级，使用简单；WebSocket 协议相对复杂。 * SSE 默认支持断线重连，WebSocket 需要自己实现。 * SSE 一般只用来传送文本，二进制数据需要编码后传送，WebSocket 默认支持传送二进制数据。 * SSE 支持自定义发送的消息类型。 ## API ### EventSource 对象 判断是否支持 EventSource ``` if ('EventSource' in window) { // ... } ``` 初始化 ``` var source = new EventSource(url); // 如果跨域,可以设置第二个参数,是否发送cookie var source = new EventSource(url, { withCredentials: true }); ``` 属性: - readyState ``` 0：相当于常量EventSource.CONNECTING，表示连接还未建立，或者断线正在重连。 1：相当于常量EventSource.OPEN，表示连接已经建立，可以接受数据。 2：相当于常量EventSource.CLOSED，表示连接已断，且不会重连。 ``` 方法: - onopen ``` source.onopen = function (event) { // ... }; // 另一种写法 source.addEventListener('open', function (event) { // ... }, false); ``` - message ``` source.onmessage = function (event) { var data = event.data; // handle message }; // 另一种写法 source.addEventListener('message', function (event) { var data = event.data; // handle message }, false); ``` - error ``` source.onerror = function (event) { // handle error event }; // 另一种写法 source.addEventListener('error', function (event) { // handle error event }, false); ``` - close ``` source.close(); ``` - 自定义事件 ``` 开发者还可以自定义 SSE 事件，且发送回来的数据不会触发message事件 source.addEventListener('foo', function (event) { var data = event.data; // handle message }, false); ``` ### 服务器实现 1. 必须是utf-8 格式,且头信息如下 ``` Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive ``` 2. 每一次发送的信息，由若干个message组成，每个message之间用`\n\n`分隔 3. 每个message内部由若干行组成，每一行都是如下格式 ``` [field]: value\n field类型: data event id retry ``` 3. 保持心跳:用冒号开头的行,标识注释 ``` : This is a comment ``` 示例 ``` : this is a test stream\n\n data: some text\n\n data: another message\n data: with two lines \n\n ``` #### data 字段 单行: ``` data: message\n\n ``` 多行 ``` data: begin message\n data: continue message\n\n ``` 示例:json ``` data: {\n data: "foo": "bar",\n data: "baz", 555\n data: }\n\n ``` #### id 字段 数据标识符用id字段表示，相当于每一条数据的编号 ``` id: msg1\n data: message\n\n ``` - 浏览器用lastEventId属性读取这个值。 - 一旦连接断线，浏览器会发送一个 HTTP 头，里面包含一个特殊的Last-Event-ID头信息，将这个值发送回来，用来帮助服务器端重建连接。 - 因此，这个头信息可以被视为一种同步机制。 #### event 字段 - 表示自定义的事件类型，默认是message事件 - 浏览器可以用addEventListener()监听该事件 ``` event: foo\n data: a foo event\n\n data: an unnamed event\n\n event: bar\n data: a bar event\n\n ``` - 第一条的名字是foo，触发浏览器的foo事件； - 第二条未取名，表示默认类型，触发浏览器的message事件； - 第三条是bar，触发浏览器的bar事件 示例 ``` event: userconnect data: {"username": "bobby", "time": "02:33:48"} event: usermessage data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."} event: userdisconnect data: {"username": "bobby", "time": "02:34:23"} event: usermessage data: {"username": "sean", "time": "02:34:36", "text": "Bye, bobby."} ``` #### retry 字段 指定浏览器重新发起连接的时间间隔 ``` retry: 10000\n ``` 两种情况会导致浏览器重新发起连接： - 一种是时间间隔到期， - 二是由于网络错误等原因，导致连接出错。