前端流式输出

fetch-event-source

问题与限制

默认的浏览器 EventSource API 在以下方面存在一些限制：

无法传递请求体（request body），必须将执行请求所需的所有信息编码到 URL 中，而大多数浏览器对 URL 的长度限制为 2000 个字符。 无法传递自定义请求头。 只能进行 GET 请求，无法指定其他方法。 如果连接中断，无法控制重试策略，浏览器会自动进行几次尝试然后停止。

@microsoft/fetch-event-source 的优势

@microsoft/fetch-event-source 提供了一个基于 Fetch API 的替代接口，完全兼容 Event Stream 格式。这使得我们能够以更加灵活的方式进行服务器发送事件的消费。以下是该库的一些主要优势：

支持任何请求方法、请求头和请求体，以及 Fetch API 提供的其他功能。甚至可以提供替代的 fetch() 实现，以应对默认浏览器实现无法满足需求的情况。 提供对响应对象的访问权限，允许在解析事件源之前进行自定义验证/处理。这在存在 API 网关（如 nginx）的情况下非常有用，如果网关返回错误，我们可能希望正确处理它。 对连接中断或发生错误时，提供完全控制的重试策略。 此外，该库还集成了浏览器的 Page Visibility API，使得在文档被隐藏时（例如用户最小化窗口），连接会关闭，当文档再次可见时会自动使用上次事件 ID 进行重试。这有助于减轻服务器负担，避免不必要的开放连接（但如果需要，可以选择禁用此行为）。

安装

npm install @microsoft/fetch-event-source

使用示例

import { fetchEventSource } from "@microsoft/fetch-event-source";
await fetchEventSource("/api/sse", {
  onmessage(ev) {
    console.log(ev.data);
  },
});

可以通过传递所有其他由默认 fetch API 暴露的参数，进行更灵活的请求，例如：

const ctrl = new AbortController(); //用于中断请求

fetchEventSource("/api/sse", {
  method: "POST",

  openWhenHidden: true, //页面退至后台保持连接

  headers: { "Content-Type": "application/json" },

  body: JSON.stringify({ foo: "bar" }),

  signal: ctrl.signal,
});

通过使用 @microsoft/fetch-event-source，我们能够更灵活地处理服务器发送事件请求，并充分发挥 Fetch API 的功能。希望这篇博客能够对你理解和使用该库提供一些帮助。