JavaScript 中异步生成器如何与 SSE 协同工作

JavaScript 中的异步生成器提供了一种优雅的方式来处理服务器发送事件 (SSE) ——尤其是在处理来自 LLM 的逐个令牌或分块数据流时。

让我们探索它们如何帮助您轻松处理实时流媒体。

什么是 SSE？

SSE（服务器发送事件）允许服务器通过单个 HTTP 连接向浏览器推送文本消息。每条消息如下所示：

data: Hello

data: world!

SSE 非常适合：

• 实时日志

• 聊天应用

• 流式 LLM 响应

进入异步生成器

安async function*可以让你：

• 从流中增量读取

• await迭代时使用

• 一旦到达，立即产生块

✨ 示例：使用异步生成器来调用 SSE

async function* parseSSE(stream) {
  const reader = stream.getReader();
  const decoder = new TextDecoder();
  let buffer = '';

  while (true) {
    const { value, done } = await reader.read();
    if (done) break;
    buffer += decoder.decode(value, { stream: true });

    const lines = buffer.split('\n');
    buffer = lines.pop();

    for (const line of lines) {
      if (line.startsWith('data: ')) {
        yield line.slice(6);
      }
    }
  }
}

用法：

const response = await fetch('/api/stream', {
  method: 'POST',
  headers: { Accept: 'text/event-stream' }
});

for await (const chunk of parseSSE(response.body)) {
  console.log('Chunk:', chunk);
}

好处

• ✅ 使用以下语法for await...of

• ✅ 支持 POST 和标头（适合 LLM）

• ✅ 适用于 Node.js（使用 fetch polyfill）

• ✅ 自定义解析逻辑

摘要

异步生成器通过 SSE 为您提供流式传输超能力：

• 实时处理 LLM 输出

• 解码并对每个消息块做出反应

• 保持对请求方法、标头和流解析的控制

非常适合使用流式 LLM API 的现代 AI 驱动应用程序！