初探Server-Sent Events (SSE)：实现后端消息推送到前端

1、简介

在现代Web应用中，实时数据交互成为了提升用户体验的关键一环。WebSocket无疑是实现这一需求的明星技术，但当场景仅需服务端向客户端单向推送时，Server-Sent Events (SSE) 提供了一个更轻量级的选择。常用在数据大屏请求服务端，在数据大屏中很少出现大屏向服务端发送数据。

2、SSE vs WebSocket：核心差异

WebSocket提供全双工通道，即客户端与服务端可自由互发消息，适用于需要频繁、低延迟交互的场景，如在线聊天。然而，WebSocket引入了一个全新的协议（ws/wss），这意味着并非所有支持HTTP的环境都能天然兼容WebSocket，且其实现相对复杂。

相比之下，SSE基于传统的HTTP协议，是专为服务端向客户端单向推送数据设计的轻量级方案。它无需额外的协议支持，现有服务器软件普遍兼容。SSE简化了实时数据流的处理，特别适合于那些只需服务端定期更新客户端信息，而不需要客户端即时反馈的场景，例如数据大屏展示、实时新闻推送等。

3、SSE工作原理

SSE建立在HTTP长连接基础之上，允许服务端在一次TCP连接中持续发送数据到客户端，而无须客户端频繁请求。这得益于HTTP/1.1的持久连接技术，减少了网络延迟和资源消耗，提高了数据传输效率。SSE支持自动重连机制，当连接意外中断时，客户端能够自动尝试重新建立连接。
SSE 可以传输文本和二进制格式的数据，但只支持单向数据流，即只能由服务器向客户端推送数据。WebSocket 支持双向数据流，客户端和服务器可以互相发送消息，并且没有消息大小限制。

4、主要API及使用示例

 1）建立链接

let source = new EventSource('http://yourserver.com/sse');

2）链接状态

source.readyState:
0 表示正在连接或已断开。
1 表示连接已建立，数据可接收。
2 表示连接关闭且不再重试。

3）事件处理

source.onopen: 当连接建立时触发。
source.onmessage: 收到服务端推送的数据时触发。
source.onerror: 发生错误时触发。

4、实战案例

1）后端代码

@GetMapping(value = "/testSSE",produces = "text/event-stream")
@ApiOperation("测试1")
public SseEmitter test() throws ParseException {
    //逻辑每10秒发送一条固定数据，具体代码
    SseEmitter sseEmitter = new SseEmitter();
    ScheduledExecutorService executorService = Executors.newScheduledThreadPool(1);
    Runnable dataSednTask =  ()->{
        //处理具体逻辑
        try {
            MqMessage message = new MqMessage();
            message.setCreateTime(new Date());
            sseEmitter.send(message);
        } catch (IOException e) {
            e.printStackTrace();
        }
    };
    executorService.scheduleAtFixedRate(dataSednTask, 0, 10 * 1000,TimeUnit.MILLISECONDS);
    return sseEmitter;
}

2）前端VUE代码

created(){

},
mounted() {
  let source = new EventSource('http://localhost:9020/testSSE');
  source.onmessage = function(e) {
    console.log("onmessage",source.readyState);
    console.log(e.data);
    console.log(JSON.parse(e.data));
  };
  source.onerror = function(e) {
    console.log("onerror",source.readyState);
  };
  source.onopen = function(e) {
    console.log("onopen",source.readyState);
  };
},

3）结果展示