SSE 流与普通 HTTP 响应的区别
1. 连接特性
特性 | 普通 HTTP 响应 | SSE 流 |
---|---|---|
连接持续时间 | 一次性,请求-响应后立即关闭 | 持久连接,保持打开状态 |
通信方向 | 单向 (客户端→服务器→客户端) | 单向 (服务器→客户端) |
数据格式 | 完整响应体 | 流式文本数据 (text/event-stream) |
2. 数据传输方式
普通 HTTP 响应:
-
服务器一次性返回完整响应
-
传输完成后连接立即关闭
-
需要客户端重新发起请求获取新数据
SSE 流:
-
保持长连接开放
-
服务器可以随时推送新数据
-
数据以事件流形式分块传输
-
自动重连机制
3. 技术实现
普通 HTTP 响应:
http
HTTP/1.1 200 OK
Content-Type: application/json{"data": "complete response"}
SSE 流:
http
HTTP/1.1 200 OK
Content-Type: text/event-stream
Connection: keep-alivedata: First message\n\n
data: Second message\n\n
event: update
data: {"time": "12:00"}\n\n
4. 前端处理方式
普通 HTTP 响应 (使用 axios):
axios.get('/api').then(response => {console.log(response.data); // 完整数据
});
SSE 流 (使用 EventSource):
const eventSource = new EventSource('/sse-endpoint');eventSource.onmessage = (event) => {console.log(event.data); // 每次收到新数据
};eventSource.onerror = (error) => {console.error('SSE error:', error);
};
5. 适用场景
普通 HTTP 响应适合:
-
一次性数据获取
-
不需要实时更新的数据
-
简单的请求-响应交互
SSE 流适合:
-
实时通知和更新
-
长时间运行的过程(如你的 AI 响应流)
-
服务器向客户端推送数据
-
需要增量更新的场景
6. 其他特点
SSE 特有功能:
-
内置事件类型 (
event: xxx
) -
消息 ID 跟踪 (
id: xxx
) -
自动重连机制
-
可自定义事件类型
限制:
-
SSE 是文本协议,不支持二进制数据
-
只支持服务器到客户端的单向通信
-
某些浏览器有并发连接限制 (通常每个域名 6 个)