fetch 可用于 SSE,但需手动解析 ReadableStream:设置 Accept: 'text/event-stream',用 TextDecoder 解码并按行处理 data:/event:/id:/空行,维护缓存对象拼接多行 data,断线后依 Last-Event-ID 重连。

JavaScript 中用 fetch 处理 SSE(Server-Sent Events)是可行的,但需注意:原生 fetch 本身不解析事件流,必须手动读取响应体的 ReadableStream 并按 SSE 格式(data:、event:、id:、空行分隔)逐行解析。
用 fetch 发起 SSE 请求并监听流式响应
关键点是设置 method: 'GET'、headers: { Accept: 'text/event-stream' },并用 response.body.getReader() 拿到流读取器,再配合 TextDecoder 解码字节流为文本行:
- 必须禁用响应体自动解析(不能用
response.text()或response.json()),否则会等待响应结束,失去流式特性 - 需手动处理 UTF-8 字节流,推荐用
TextDecoder('utf-8', { fatal: false })容错解码 - 每行以
\n或\r\n切分,跳过注释行(以:开头),累积data:行直到遇到空行,再触发一次事件
手动解析 SSE 数据格式的简易实现
一个轻量级解析逻辑示例(不依赖第三方库):
- 维护一个缓存对象(如
{ data: '', event: 'message', id: null }) - 对每一行:若以
data:开头,追加内容(去掉前缀和首尾空格);若以event:开头,更新event字段;若为空行,将当前缓存作为完整事件派发,并清空缓存 - 注意:SSE 允许多个
data:行组成一条消息,换行符会被转为\n,最终拼接后需用.trim()
处理连接断开与自动重连
SSE 协议自带重连机制(服务器可设 retry:),但 fetch 层面需自行管理:
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记(深入)”;
- 当
reader.read()返回{ done: true }或抛出网络错误时,应延迟几秒后重新fetch - 建议记录上一次收到的
id:,重连时通过请求头(如Last-Event-ID)或 URL 参数传递,让服务端从断点续推 - 避免无限重试,可设置最大重试次数或退避策略(如指数增长延迟)
对比 EventSource API 的取舍
EventSource 是浏览器原生 SSE 客户端,自动解析、内置重连、支持 onmessage/onerror 等事件,更简单可靠。选择 fetch 的典型场景包括:
- 需要自定义请求头(如带认证 token、
Last-Event-ID)且EventSource不支持(部分浏览器限制) - 需与现有基于
fetch的请求体系统一错误处理、超时控制或拦截逻辑 - 运行环境不支持
EventSource(如某些 Node.js 环境需搭配node-fetch+ 流处理)
如果不是强需求,优先用 EventSource;若选 fetch,重点在于流读取、行解析、断线恢复三步的稳健实现。

















