后端主动向前端推送消息 Server-Sent Events

后端向前端推送消息的常见方式有 websocket、轮询等方式。还有一种方式：Server-Sent Event （简称SSE）。

SSE本质

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

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

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

 SSE特点

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

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

SSE的优点如下：

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

客户端

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

    // SSE 的客户端 API 部署在 EventSource 对象上
    if ('EventSource' in window) {
        // 浏览器支持 SSE

    }

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

    // 连接一旦建立，就会触发 open 事件，可以在 onopen 属性定义回调函数
    source.onopen = function (event) {
        // ...
    };

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

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

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

上述代码示例了 EventSource 建立监理，监听消息，异常等情况的处理方式。

 默认情况下，服务器发来数据时，总是触发 EventSource 实例 message 事件。开发者还可以自定义 SSE 事件，这种情况下，发送回来的数据不会触发 message 事件。

    source.addEventListener('foo', function (event) {
        var data = event.data;
        // handle message
    }, false);

上面是自定义事件的实例代码。

服务端

服务端用 Java 编写，采用 SpringBoot 框架，其中 SpringBoot 采用内置的 SseEmitter 对象支持 SSE。

    @GetMapping("/subscribe")
    public SseEmitter subscribe() {
        // 设置超时时间为5分钟
        SseEmitter sseEmitter = new SseEmitter(5*60*1000L);
        // 直接返回 SseEmitter 对象就可以和客户端连接
        return sseEmitter;
    }

 客户端请求上面的接口之后就可以建立连接。如果要往客户端发送消息，只需要调用 SseEmitter 实例的 send 方法。

        // 调用 SseEmitter 的 send 方法即可往客户端发送消息
        try {
            sseEmitter.send("hello");
        } catch (IOException e) {
            e.printStackTrace();
        }

实际运用时，可以将用户 id 和 SseEmitter 实例存在 Map 中，当需要给某个用户推送消息时，先通过用户 id 查找到其对应的 SseEmitter 实例，然后调用 send 方法，即可以给对应的用户推送消息。 

 如果服务端要断开连接，调用 SseEmitter 的 complete 方法即可。

小结

客户端 js 的代码中核心类是 EventSource，其包括建立连接、接收消息、异常处理时触发的事件。客户端 SpringBoot 框架中核心类是 SseEmitter 其中记录连接的信息，调用其 send 方法就可以向客户端推送消息。

参考：

本文内容大多参考以下文章，非原创。

http://www.ruanyifeng.com/blog/2017/05/server-sent_events.html

https://www.cnblogs.com/yihuihui/p/12622729.html