什么是SSE？SSE与WebSocket的对比分析

什么是SSE？SSE与WebSocket的对比分析

引用

CSDN

1.

https://blog.csdn.net/zfj321/article/details/145652403

SSE（Server-Sent Events）是一种基于HTTP的轻量级协议，允许服务器主动向客户端推送实时数据。它适用于需要服务器单向实时通信的场景，如新闻推送、股票行情等。本文将详细介绍SSE的核心机制、工作原理及其与WebSocket的对比，并通过具体的代码示例帮助读者快速上手。

SSE 核心机制

1. 通信模式

• 单向性：仅支持服务器到客户端的单向通信（客户端无法通过 SSE 向服务器发送数据）。
• 长连接：客户端通过一次 HTTP 请求建立连接，服务器保持连接打开状态，持续发送数据流。

2. 协议特性

• 基于 HTTP：使用标准 HTTP 协议，无需额外协议支持（如 WebSocket）。
• 文本格式：数据以纯文本形式传输（支持 UTF-8 编码），格式灵活。
• 事件驱动：数据可附带自定义事件名称（如 message、update），客户端可监听特定事件。

3. 数据格式

每条消息由以下字段组成（以换行符分隔）：

event: <event-name> // 自定义事件名称（可选）  
data: <message-content> // 消息内容（可多行）  
id: <message-id> // 消息唯一标识（可选）  
retry: <reconnect-ms> // 断线重连时间（可选）

示例：

event: status  
data: {"user": "Alice", "status": "online"}

data: This is a message  
data: with multiple lines.

id: 123  
retry: 5000

SSE 工作原理

1. 客户端建立连接
   浏览器通过 EventSource API 向服务器发起请求：

   const eventSource = new EventSource("/sse-endpoint");
   

2. 服务器保持连接
   服务器响应 HTTP 头 Content-Type: text/event-stream，并保持连接打开：

   HTTP/1.1 200 OK
   Content-Type: text/event-stream
   Cache-Control: no-cache
   Connection: keep-alive
   

3. 服务器推送数据
   服务器通过流式响应（Streaming Response）持续发送符合 SSE 格式的数据块：

   // Spring 中使用 SseEmitter 的示例
   public SseEmitter streamEvents() {
       SseEmitter emitter = new SseEmitter();
       for (int i = 0; i < 10; i++) {
           emitter.send(SseEmitter.event()
               .data("Event " + i + " @ " + new Date()));
       }
   }
   

4. 客户端处理数据
   客户端监听事件并更新界面：

   eventSource.addEventListener("update", (event) => {
       console.log("Received:", event.data);
   });
   

SSE 的优缺点

SSE vs. WebSocket vs. 轮询

SSE 应用场景

1. 实时通知
2. 数据流传输
3. 进度反馈
4. 动态内容更新

代码示例（Spring Boot）

服务端（Java）

public class SseController {
    private final ExecutorService executor = Executors.newCachedThreadPool();

    public SseEmitter streamData() {
        SseEmitter emitter = new SseEmitter();

        for (int i = 1; i <= 5; i++) {
            emitter.send(SseEmitter.event()
                .data("Progress: " + i * 20 + "%"));
        }
        emitter.completeWithError(e);
    }
}

客户端（JavaScript）

const eventSource = new EventSource('http://localhost:8080/stream');

eventSource.onmessage = (e) => {
    console.log('Message:', e.data);
};

eventSource.addEventListener('progress', (e) => {
    document.getElementById('progress').innerText = e.data;
});

注意事项

1. 跨域问题

• 需配置 CORS（如 Spring Boot 的 @CrossOrigin）。

2. 连接管理

• 客户端需手动关闭连接：eventSource.close()。

3. 错误处理
4. 性能优化

总结

SSE 是实现服务器到客户端实时单向通信的高效方案，适合需要轻量级、易集成的场景（如通知、数据流）。在 Spring 中可通过 SseEmitter 快速实现，结合前端 EventSource 完成实时交互。