在日常工作中，SSE经常被用来实现实时推送。例如 AI 文本生成、实时监控面板和社交媒体通知。与 WebSocket 相比，SSE 的优势在于基于 HTTP 协议、轻量化还有自带重连机制，但它也存在一些痛点。

一、SSE 技术概览

什么是 SSE？

SSE 允许服务器异步地向浏览器推送实时数据，是一种单向长连接协议。主要在于 HTTP 响应头 Content‑Type: text/event-stream。

报文详解

SSE 的报文是纯文本格式。每条消息由字段行组成，字段名和值之间用冒号分隔，每行以换行符 结束。消息块必须以双换行 结束，否则前端无法触发回调。

标准 HTTP 响应头示例：

Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive
X-Accel-Buffering: no # 防止 Nginx 缓存流式数据

标准报文体示例：

: 这是一行注释，用于连接保活
server-time: event:
connecteddata:{ "status":"ready","sessionId":"sess_98765"}
说到id，retry:
至于event，progressdata:{ "taskId":"doc-","step":"parsing"}
至于data。{ "percent":}
id这方面，: 每隔15秒发送一次心跳event: heartbeatdata:pingo
从id来看，event:
progressdata:{ "taskId":"doc-","step":"completed"}
至于data，{ "percent":}
id这方面，event:
financial_statement_statusdata:{ "docId":,"status":"success"}
从id来看，

字段名	说明与规范含义	备注
data	消息内容。跨行可多次发送 data 行，由浏览器自动拼接并以换行符分隔。
event	事件类型，用于区分不同频道。按理说，前端可使用 addEventListener 监听；若省略，则默认为 message.
id	事件唯一标识。怎么说呢，浏览器将其存入“最终一次事件 ID”缓冲区，重连时会放入请求头的 . 若无该字段，则保持上一次 ID 不变。除非显式清空.
retry	重连时间间隔。告诉浏览器若连接断开后等待多久再尝试重连。默认值为 3000ms，可以通过服务器下发覆盖前端配置.
* Last‑Event‑ID：当重连时浏览器会自动在请求头中加入此值，以确保数据流连续性。
使用者痛点：通信方向与协议限制导致功能受限！
特性对比表格:

特性/方案	SSE	WebSocket
通信方向	单向	全双工

For clarity I will simplify rest of comparison:

\ \ \ \ \ \ \ \ \ \ \ \ \ ...

特性/方案	SSE	WebSocket
通信方向 \	SSE 单向\ \	# WebSocket\ \

But due to formatting constraints we will omit furr rows. The key takeaways are highlighted above.

---

说到使用者痛点。选择 SSE 时遇到的挑战：

• SSE 原生只支持 GET 请求——如果你需要 POST JSON，GET 的 URL 长度限制会成为瓶颈。怎么说呢，
• SSE 原生无法自定义请求头——无法携带 Authorization Bearer Token 或其他自定义 header。 这使得鉴权管理变得棘手，老实说，
• SSE 重连策略有限——无法精细控制重连间隔或取消重连；错误处理不够细粒度，
• SSE 对浏览器有限制——同域名最多只能同时建立五个 SSE 连接，对大规模并发推送不友好。
• SSE 无法传递二进制或多媒体流——仅支持纯文本或 UTF‑8 编码的字符串。
• SSE 在某些代理或 CDN 下易被缓存或截断。需要额外配置，如 Nginx 的 X-Accel-Buffering 设置等。
• SSE 对错误状态码无直接暴露——onerror 回调无法获取 HTTP 状态码，只能通过特殊事件或后端主动断开来判断 token 是否失效等情况。
• PWA/SPA 页面切换时可能导致 SSE 自动断开，需要手动恢复或使用 openWhenHidden 等技巧来保持连接活跃性。

二、原生 EventSource – 简洁但局限多多！

快速上手示例代码：

// 建立连接:
const sse = new EventSource('/api/stream'。{
withCredentials:true // 默认为 false，可携带 Cookie 鉴权
});// 默认消息监听:
sse.onmessage = => {
console.log;})，// 自定义事件监听，例如进度更新:sse.addEventListener => {
const data = JSON.parse;老实说，console.log;})，// 错误处理与重连状态:sse.onerror = => {
if {
console.log;}
})，说起来，

AUTO 重连：网络波动后自动根据服务器下发的 retry 时间进行重试。无需编写任何逻辑，可保证极低延迟和高可靠性；但缺乏细粒度控制—如果你想根据错误类型间隔，就得自己改库或者使用 fetch-event-source。



ID 跟踪：服务端通过 id 字段记录每条消息。在断线后客户端会把 Last-Event-ID 自动加到请求头，从而保证不丢失未处理的数据；但当你需要清空历史 ID 或强制跳过某条消息时就没办法了—必须让服务端发送空 id 或者修改业务逻辑，否则客户端始终会重复消费同一条旧消息。

极轻量无需第三方库，对打包体积零影响。只是这也代表着所有功能都封装在内部，你想要 功能只能自己改源码或者寻找替代方案——不像 fetch-event-source 那样提供可配置 API 与 hook 完整生命周期管理。

---