server-sent-Event （简称SSE）

1.server-sent-Event （本质是SSE）

	严格来说 http 无法向客户端主动发起推送信息，有一种变通的方法，就是服务器向客户端说明要发送的是流信息，也就是	说，发送的不是一次性的数据包，而是一个数据流会连续不断的发送过来，
这时，客户端不会关闭连接，会一直等着服务器发过来的新的数据流，SSE 就是利用这种机制，使用流信息向浏览器推送信息。它基于 HTTP 协议

2.server-sent-Event（特点）

SSE 使用 HTTP 协议，现有的服务器软件都支持。WebSocket 是一个独立协议。
SSE 属于轻量级，使用简单；WebSocket 协议相对复杂。
SSE 默认支持断线重连，WebSocket 需要自己实现。
SSE 一般只用来传送文本，二进制数据需要编码后传送，WebSocket 默认支持传送二进制数据。
SSE 支持自定义发送的消息类型。

3.客户端API

3.1 EventSource 对象

使用 SSE 时，浏览器首先生成一个EventSource实例，向服务器发起连接。
var source = new EventSource(url);
上面的url可以与当前网址同域，也可以跨域。跨域时，可以指定第二个参数，打开withCredentials属性，表示是否一起		发送 Cookie。

var source = new EventSource(url, { withCredentials: true });

EventSource实例的readyState属性，表明连接的当前状态。该属性只读，可以取以下值。
0：相当于常量EventSource.CONNECTING，表示连接还未建立，或者断线正在重连。
1：相当于常量	EventSource.OPEN，表示连接已经建立，可以接受数据。
2：相当于常量EventSource.CLOSED，表示连接已断，且不会重连。

3.2 基本使用

SSE 的客户端 API 部署在EventSource对象上。下面的代码可以检测浏览器是否支持 SSE。

if ('EventSource' in window) {// ...}

3.2.1 完整代码一 (也可以跨域，如果跨域的话，需要指定第二个参数withCredentials:true，表示发送Cookie到服务端)

if ('EventSource' in window)  return !!window.EventSource // 判断浏览器是否支持 EventSource
var source = new EventSource(url,{withCredentials:true}); //创建链接对象
source.addEventListener('open', function (e) { }) //建立链接
source.addEventListener('message', function (e) { // 服务器返回回来的数据可能需要转译一下 }) //链接成功
source.addEventListener('error', function (e) { // 链接失败
   source.close() // 清除链接
})

3.2.2 完整代码二 (也可以跨域，如果跨域的话，需要指定第二个参数withCredentials:true，表示发送Cookie到服务端)

if ('EventSource' in window)  return !!window.EventSource // 判断浏览器是否支持 EventSource
var source = new EventSource(url,{withCredentials:true}); //创建链接对象
source.open = function (e) { }) //建立链接
source.message = function (e) { // 服务器返回回来的数据可能需要转译一下 }) //链接成功
source.error = function (e) { // 链接失败
   source.close() // 清除链接
})

3.2.3实际开发中一般都需要添加token （完整代码）

1.下载event-source-polyfill

npm install event-source-polyfill

2.使用

if ('EventSource' in window)  return !!window.EventSource // 判断浏览器是否支持 EventSource
const token = sessionStorage.getItem('ACCESS_TOKEN')
var source= new EventSourcePolyfill(url, { 
     headers: {
         'X-Access-Token': token
     }
 })//创建链接对象
source.open = function (e) { }) //建立链接
source.message = function (e) { // 服务器返回回来的数据可能需要转译一下 }) //链接成功
source.error = function (e) { // 链接失败
   source.close() // 清除链接
})

转载 see详细了解