前端怎么玩儿 SSE 流式请求？

说实话，SSE听起来有点拗口。

但其实它就像那种老旧的广播电台，服务器不停地往客户端扔数据。

跟 WebSocket 不同，它是单向的——只从后端推送到前端。

这玩意儿在实时聊天、股票行情、AI 文本生成这些场景里简直是神器。

先聊聊原理——别怕，咱们一步步来

SSE 基于普通的 HTTP 长连接。

浏览器发起一次 GET 请求，后端返回的 Content‑Type 必须是 text/event-stream。

然后服务器每次写入一段形如：

data: 这是一条消息
id: 12345
event: message

两个换行符标记一次完整事件。

客户端收到后会触发 message 事件，你Ke以直接用 EventSource 去监听。

方案一：原生 EventSource

Ru果后端支持 GET 且Neng把鉴权信息塞进 Cookie，那就直接上原生 API，零依赖、代码几行就搞定。

const es = new EventSource;
es.onmessage = e => {
  console.log;
};
es.onerror = err => {
  console.error;
  // 想停就停
  es.close;
};

不过有几个坑：

只Neng GET，POST 那是不存在的；

自定义 Header只Neng靠 URL 参数或 Cookie；

自动重连默认会一直尝试，有时候会导致重复请求。

方案二：Fetch + ReadableStream

说实话，这种方式稍微麻烦点，但你Ke以随心所欲地加 Header、发送 POST、甚至自己实现超时。

async function fetchSSE {
  const resp = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${opts.token}`,
    },
    body: JSON.stringify,
    signal: opts.controller?.signal,
  });
  const reader = resp.body.getReader;
  const dec = new TextDecoder;
  let buf = '';
  while  {
    const { done, value } = await reader.read;
    if  break;
    buf += dec.decode;
    const parts = buf.split;
    buf = parts.pop || '';
    for  {
      if ) {
        const data = p.slice;
        if  return;
        console.log;
      }
    }
  }
}
const ctrl = new AbortController;
fetchSSE;

要注意两件事：

{ stream:true } 必不可少，否则多字节字符会被截断成乱码；

手动处理 buffer——因为一次网络 chunk 不一定完整，一定要保留Zui后那段未结束的数据再继续拼接。

方案三：@microsoft/fetch-event-source

# 好处是兼顾了两边的优点：支持 POST、自定义 Header，又自动帮你解析 SSE 协议，还自带重连逻辑。

import { fetchEventSource } from '@microsoft/fetch-event-source';
fetchEventSource('/api/chat', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${token}`,
  },
  body: JSON.stringify,
  openWhenHidden: true,
  onmessage {
    if  return;
    console.log;
  },
  onerror {
    console.error;
    // 抛出错误会停止自动重连
    throw err;
  },
});

Ru果你不想自己写太多冗余代码，这玩意儿真是省事儿。唯一缺点就是要多拉一个小库，大概几 KB 而Yi，基本Ke以忽略不计。

SSE 常见坑 & 小技巧 跨域怎么办？

CORS 是必须的。后端要在响应头里加：

Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Content-Type, Authorization

# Ru果你不想改后端，也Ke以在本地 dev server 配个代理，把请求转给真实接口。

怎么优雅地关闭连接？

SSE 原生只Neng用 .close 手动关闭；Fetch 场景则靠 AbortController.

const ctrl = new AbortController;
fetchSSE;
// 某些条件下停止
ctrl.abort;

"为什么百度不收录"——顺便聊聊 SEO 小插曲 🤔

hen多朋友在写博客的时候，总会碰到这样的问题：“为什么百度不收录我的页面？”

A：内容质量不足或重复率高。

B：页面使用了大量 AJAX / SSE 动态渲染，爬虫抓不到真实内容。

C：没有Zuo好 robots.txt 或者 meta noindex 设置。

D：服务器返回的 HTTP 状态码不是200，也会被过滤掉。

# 小技巧：对关键内容Zuo SSR 或者预渲染，让爬虫Neng直接kan到完整 HTML；同时别忘了提交 sitemap 给百度站长平台。

SSE 与长轮询的对比，顺口溜版

SSE 就像广播站，一次开播不停推送；长轮询像快递员，每次只送一封信，然后挂断再重新呼叫。显然广播站geng省力，也geng省流量。除非你的业务需要双向通信，那才考虑 WebSocket 哦！哈哈~

选型建议 & 实战经验

SSE 简单场景 ✅ 原生 EventSource：

  · GET 接口   · 鉴权靠 Cookie   · 想要Zui小体积、Zui少依赖

SSE 高级需求 ✅ Fetch + ReadableStream：

  · 必须 POST 携带大 payload   · 自定义 Header   · 想自己控制超时、重试策略

SSE 开箱即用 ✅ @microsoft/fetch-event-source：

  · 想要自动重连、POST 支持   · 不介意引入一个轻量库   · 项目时间紧迫，需要快速落地

A/B 测试一下你的实现吧！

# 用 Chrome DevTools 的 Network 面板观察 response headers 是否包含 Content-Type: text/event-stream.

# 打开 “Preserve log” 防止刷新丢失记录，然后kankan是否出现 “event” 字段分块传输。Ru果只kan到一次完整响应，那说明流式没打开，要检查后端是否开启了 chunked 编码或 Nginx 缓冲配置：

proxy_buffering off;
proxy_cache off;
proxy_set_header Connection '';
proxy_http_version   1.1;
chunked_transfer_encoding off;
X-Accel-Buffering: no

P.S. 小结一下 —— 我们到底该怎么选？

# Ru果你的项目Yi经有 Node/Express 后端，只需要简单推送日志或通知，用原生 EventSource 就够了。代码量不到十行，维护成本低得可怜。

# Ru果你需要把用户输入作为请求体发送给 AI 大模型，再实时把生成结果喂回前端，那必然走 Fetch + ReadableStream 或者 @microsoft/fetch‑event‑source，两者任选其一即可。个人偏爱后者，因为它把协议细节全dou封装好了你只管写业务逻辑。

# Zui后提醒一句：别忘了在服务器层面关闭缓冲，否则即使前端写得完美，也可Neng卡住几秒才收到第一条消息。Nginx/Apache dou得相应调参啊！哈哈哈～

结束语 - 好戏还在后头 🚀

EOT.

---