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

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

SSE本质

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

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

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

SSE特点

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

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

SSE的优点如下：

SSE 使用 HTTP 协议；WebSocket 是一个独立协议。
SSE 属于轻量级，使用简单；WebSocket 协议相对复杂。
SSE 默认支持断线重试；WebSocket 需要自己实现。
SSE 一般只用来传送文本，二进制数据需要编码后传送；WebSocket 默认支持传送二进制数据。
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