今日保举库：@microsoft/fetch-event-source 前端发送SSE请求实现GPT流式输 ...

使用 @microsoft/fetch-event-source 改善服务器发送变乱的请求@microsoft/fetch-event-source - npm

在前端开辟中，处理服务器发送变乱（server-sent events）时，我们通常使用浏览器提供的 EventSource API。然而，该默认 API 存在一些限定，本文先容了一个名为 @microsoft/fetch-event-source 的包，它提供了更强大的 API，使我们能够更机动地进行服务器发送变乱的请求。
问题与限定

默认的浏览器 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
  使用示例

在使用 @microsoft/fetch-event-source 之前，我们通常使用以下方式处理服务器发送变乱：

1. const sse = new EventSource('/api/sse');
3. sse.onmessage = (ev) => { console.log(ev.data); };

复制代码

如今，我们可以改为使用 @microsoft/fetch-event-source：

1. import { fetchEventSource } from '@microsoft/fetch-event-source';  
2. await fetchEventSource('/api/sse', {
3.     onmessage(ev) {
4.         console.log(ev.data);
5.      }
6. });

复制代码

可以通过传递全部其他由默认 fetch API 袒露的参数，进行更机动的请求，例如：

1. const ctrl = new AbortController(); //用于中断请求
3. fetchEventSource('/api/sse', {
5.     method: 'POST',
7.     openWhenHidden: true, //页面退至后台保持连接
9.     headers: { 'Content-Type': 'application/json', },
11.     body: JSON.stringify({ foo: 'bar' }),
13.     signal: ctrl.signal
14. });

复制代码

通过使用 @microsoft/fetch-event-source，我们能够更机动地处理服务器发送变乱请求，并充分发挥 Fetch API 的功能。渴望这篇博客能够对你明确和使用该库提供一些资助。



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。