后端主动向前端推送消息--SSE

最新项目中需要用到消息的及时推送，在页面的实时展示，之前用过WebSocket这种及时通讯方式，但是WebSocket这种方式对于后端来说相对复杂。所以这次考虑通过其他的方式来实现，于是有了SSE。

SSE本质

严格说，HTTP 协议无法做到服务器主动推送消息。但是，有一种变通方法，就是服务器向客户端声明，接下来要发送的是流消息（streaming）。

也就是说，发送的不是一次性的数据包，而是一个数据流，会连续不断地发送过来。这时，客户端不会关闭连接，会一直等着服务器发送新的数据流，视频播放就是这样的例子。本质上，这种通信就是以流信息的方式，完成一次用时很长的下载。

SSE 就是利用这种机制，使用流消息向浏览器推送信息，它基于 HTTP 协议。

SSE特点

SSE 与 WebSocket 作用相似，都是建立浏览器与服务器之间的通信渠道，然后服务器向浏览器推送消息。

SSE 是单向通道，只能服务器向浏览器发送，不像WebSocket可以双向通讯，因为流信息本质上就是下载。

SSE的优点如下：

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

浏览器端

SSE客户端 API 部署在 EventSource 对象上。

 if ('EventSource' in window) {
       // 判断当前浏览器是否支持 SSE
   }
var url ="http://192.168.0.49:8200/sse/start"
var source = new EventSource(url);

// 连接一旦建立，就会触发 open 事件，可以在 onopen 属性定义回调函数

source.onopen = function (event) {
       // ...
   };

// 客户端收到服务器发来的数据，就会触发 message 事件，可以在 onmessage 属性定义回调函数
source.onmessage = function (event) {
       // data 就是服务器传回的数据（文本格式）
       var data = event.data;
       //在此对接收到的数据进行处理

};

// 如果发生通信错误（比如连接中断），就会触发 error 事件，可以在 onerror 属性定义回调函数
source.onerror = function (event) {
       // handle error event
};

// 其中 close 方法用于关闭 SSE 连接
// source.close();

如果需要一些自定义的配置，比如请求头中加token等，可以使用第三方封装好的库 EventSource

使用方式跟原生EventSource几乎相同。

参考：

本文内容参考以下文章。
https://www.cnblogs.com/colin220/p/14455881.html