SSE技术详解及应用场景

爱吃土豆的马铃薯ㅤㅤㅤㅤㅤㅤㅤㅤㅤ2025-12-11 9:02

text/event-stream 是 Server-Sent Events (SSE) 的 MIME 类型。这是一种基于 HTTP 的服务器向客户端推送实时数据的技术。

主要特点：

1. 单向通信

服务器 → 客户端单向推送
客户端使用 EventSource API 接收数据
不同于 WebSocket 的双向通信

2. 工作原理

java 复制代码

// 服务器端（Spring Boot示例）
@PostMapping(value = "/question/answer/stream", 
             produces = "text/event-stream;charset=UTF-8")
public Flux<String> streamAnswer() {
    return Flux.interval(Duration.ofSeconds(1))
               .map(seq -> "data: 消息 " + seq + "\n\n");
}

javascript 复制代码

// 客户端（JavaScript）
const eventSource = new EventSource('/question/answer/stream');

eventSource.onmessage = (event) => {
    console.log('收到数据:', event.data);
};

eventSource.onerror = (error) => {
    console.error('连接错误:', error);
};

3. 数据格式规范

复制代码

data: 第一行数据\n
data: 第二行数据\n
\n
（空行表示一个消息结束）

data: 这是一条完整消息\n
\n

event: customEvent\n
data: 自定义事件数据\n
\n

4. 优势

自动重连：连接中断会自动尝试重连
简单易用：基于普通 HTTP，无需特殊协议
轻量级：适合单向数据推送场景
支持跨域：可以通过 CORS 配置

5. 典型应用场景

java 复制代码

// AI问答流式响应示例
@PostMapping(value = "/question/answer/stream", 
             produces = "text/event-stream;charset=UTF-8")
public Flux<String> streamAnswer(@RequestBody QuestionRequest request) {
    return aiService.generateStreamAnswer(request.getQuestion())
        .map(chunk -> "data: " + chunk + "\n\n");
}

// 返回的数据流会是：
// data: 这是\n
// data: 一段\n
// data: 流式\n
// data: 回答\n
// \n

6. 与 WebSocket 比较

特性	SSE	WebSocket
协议	HTTP	WS/WSS
方向	单向（服务器推）	双向
重连	自动	需手动实现
二进制数据	仅文本	支持二进制
复杂度	低	较高

7. 注意事项

保持连接：需要服务器保持连接打开
超时设置：可能需要调整服务器超时配置
字符集：charset=UTF-8 确保中文正常显示
浏览器兼容性：主流浏览器都支持（IE除外）

在 AI 问答场景中，SSE 非常适合用于实时流式返回生成的文本，让用户能够逐字看到答案生成过程，提升体验。