Frontend Academy · 课时

用于单向流式传输的服务器发送事件

Q: 「用于单向流式传输的服务器发送事件」这节课中我会学到什么？

使用 EventSource 接收服务器发送事件流，解析事件类型和数据，并在网络中断时自动重新连接。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 EventSource 接收服务器发送事件流，解析事件类型和数据，并在网络中断时自动重新连接。

用于单向流式传输的服务器发送事件 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

什么是 Server-Sent Events

SSE 是一种基于 HTTP 的标准协议，通过单个长期连接让服务器向浏览器推送事件。它是单向的：仅支持服务器 → 客户端。当您不需要向服务器发送数据时，它比 WebSockets 更简单。

EventSource API

浏览器的 EventSource 会连接到 URL 并监听事件。它是标准内置功能，无需使用库。

const es = new EventSource('/api/events');

es.addEventListener('message', (event) => {
  console.log('Received:', event.data);
});

es.addEventListener('error', () => {
  console.error('Connection error');
});

服务器响应格式

服务器会发送一个纯文本流，其 Content-Type: text/event-stream 为指定值。每条消息以 data: 开头，并以空行结束。

// Server response:
Content-Type: text/event-stream
Cache-Control: no-cache

data: hello\n\n
data: another message\n\n
data: {"type":"chat","text":"Hi"}\n\n

命名事件

服务器可以使用 event: 为事件命名。浏览器会以该名称触发事件。

// Server:
event: chat
data: {"user":"Alice","text":"Hi"}\n\n

event: user-joined
data: {"name":"Bob"}\n\n

// Client:
es.addEventListener('chat', (e) => { /* ... */ });
es.addEventListener('user-joined', (e) => { /* ... */ });

自动重新连接

EventSource 断开连接后会自动重新连接（约 3 秒后）。服务器可以通过 retry: 5000 建议等待时间。

// Server:
retry: 5000\n
data: hello\n\n

事件 ID 与恢复

服务器会为每个事件发送 id:。重新连接后，浏览器会在 Last-Event-ID 标头中发送最近接收的 ID，服务器可以从该位置继续发送。

// Server:
id: 42
event: chat
data: {"text":"Hi"}\n\n

id: 43
event: chat
data: {"text":"How are you?"}\n\n

// Client reconnect sends: Last-Event-ID: 43

解析 JSON

event.data 始终是字符串。请自行解析 JSON。

es.addEventListener('chat', (e) => {
  const msg = JSON.parse(e.data);
  console.log(msg.user, msg.text);
});

关闭连接

请调用 es.close() 停止连接。关闭标签页时，浏览器也会关闭连接。

es.close();

// In React, close in useEffect cleanup:
useEffect(() => {
  const es = new EventSource('/events');
  es.onmessage = (e) => setData(d => [...d, e.data]);
  return () => es.close();
}, []);

使用场景

实时仪表盘（指标、监控）。通知（新邮件、提醒）。股票行情。人工智能聊天补全（每个令牌都是一个事件）。实时体育比分。长时间运行任务的状态更新。

真实示例：人工智能流式传输

OpenAI/Anthropic 的补全内容会以 SSE 形式流式传输。每个令牌都会作为数据事件到达，您可以逐步渲染内容，从而实现打字效果。

const es = new EventSource('/api/chat?prompt=hello');
let text = '';
es.addEventListener('message', (e) => {
  if (e.data === '[DONE]') {
    es.close();
    return;
  }
  const { delta } = JSON.parse(e.data);
  text += delta;
  setMessage(text);
});

SSE、WebSocket 与轮询

SSE：基于 HTTP，仅支持服务器到客户端，自动重新连接，使用简单。WebSocket：全双工，每条消息的开销更低，但更加复杂。轮询：最简单，但延迟和负载最高。单向流式传输请选择 SSE；类似聊天的双向通信请选择 WS。

浏览器限制与代理

浏览器会限制每个源的并发 SSE 连接数（约为 6 个）。某些企业代理和旧版负载均衡器会缓冲响应，从而破坏 SSE——请在目标环境中进行测试。使用 HTTPS 可以绕过大多数代理缓冲。

SSE 的 CORS

EventSource 遵循 CORS。服务器必须发送 Access-Control-Allow-Origin。如果需要凭据，请将 { withCredentials: true } 传递给 EventSource 构造函数，并在服务器上设置 Access-Control-Allow-Credentials: true。

快速检查

Server-Sent Events 与 WebSockets 之间的关键区别是什么？

回顾：Server-Sent Events

EventSource 会打开一个传输 text/event-stream 事件的 HTTP 流。服务器发送带有可选 event: 名称和 id: 的“data:”消息。浏览器会使用 Last-Event-ID 自动重新连接并恢复传输。它是单向的（服务器 → 客户端）。它非常适合实时仪表盘、人工智能流式传输和通知。当您不需要双向通信时，它比 WebSocket 更简单。请注意并发连接数限制和代理缓冲。

常见问题解答

「用于单向流式传输的服务器发送事件」课时是免费的吗？

是的 — 「用于单向流式传输的服务器发送事件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「用于单向流式传输的服务器发送事件」这节课中我会学到什么？

使用 EventSource 接收服务器发送事件流，解析事件类型和数据，并在网络中断时自动重新连接。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「用于单向流式传输的服务器发送事件」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy