SSE实现服务端给客户端长时间推送消息

SseEmitter是SpringMVC(4.2+)提供的一种技术，它是基于Http协议的，相比WebSocket，它更轻量，但是SSE是单通道，它只能从服务端向客户端单向发送信息，是HTML5规范的一个组成部分。

 

SSE 最大的特点，可以简单划分为两个：

• 长连接；
• 服务端可以向客户端推送信息；

 SSE 的主要应用场景：

• 新邮件的提示；
• 实时监控数据的推送等等；

 

SSE不支持IE浏览器，需要配合服务端代码实现。 

此处只是浅浅总结一下前端VUE中的使用以及遇到的一些问题点：

// 客户端代码
if (window.EventSource) {
        // 创建 EventSource 对象连接服务器
        const source = new EventSource('http://localhost:2000');
        // 连接成功后会触发 open 事件
        source.addEventListener('open', () => {
            console.log('Connected');
        }, false);
        // 服务器发送信息到客户端时，如果没有 event 字段，默认会触发 message 事件
        source.addEventListener('message', e => {
            console.log(`message: ${e.data}`);
        }, false);
        // 自定义 EventHandler，在收到 event 字段为 slide 的消息时触发
        source.addEventListener('slide1', e => {
            console.log(`slide1: ${e.data}`); // => data: 7
        }, false)；
        // 连接异常时会触发 error 事件并自动重连
        source.addEventListener('error', e => {
            if (e.target.readyState === EventSource.CLOSED) {
                console.log('Disconnected');
            } else if (e.target.readyState === EventSource.CONNECTING) {
                console.log('Connecting...');
            }
        }, false);
    } else {
        console.error('您的浏览器不支持SSE');
    } 
}

 

我自己项目中的应用实例（车辆实时位置）：

// 1. 在data中定义SSE数据对象
sseSourceData: null,


// 2. 离开该页面时关闭连接
destroyed() {
    if(this.sseSourceData) {
        this.sseSourceData.close();
    }
},


// 3. 获取车辆位置信息
getRealTimeGpsSSE() {
    // 判断浏览器是否支持SSE技术
    if (window.EventSource) {
        let url = '';
        if(process.env.NODE_ENV === "development") {
            // 开发环境
            url = process.env.VUE_APP_URL + process.env.VUE_APP_SSE;
        } else {
            // 正式环境
            url = window.location.protocol + '//' + window.location.host + process.env.VUE_APP_SSE;
        }
        // 实时获取车辆数据
        this.sseSourceData = new EventSource(`${url}gps/接口名?参数&&参数`);
        this.sseSourceData.addEventListener('message', e => {
            console.log(JSON.parse(e.data));
        }, false);
    } else {
        console.error('您的浏览器不支持SSE！');
    } 
},

打包后遇到的问题：

使用127.0.0.1打包部署后，SSE请求连接无数据，会报跨域；

解决办法：

需要判断开发环境还是正式环境：

        开发环境 - 使用配置文件中设置的url拼接；

        正式环境 - 获取当前浏览器上方的地址进行url拼接；

 

 以上只是对自己项目中用到的内容做了简单的总结！