深入比较 `@microsoft/fetch-event-source` 与 `event-source-polyfill`

在现代 Web 应用中，实时通信越来越成为不可或缺的部分，尤其是在需要服务器实时推送数据给客户端的场景中。Server-Sent Events（SSE） 提供了一种简单有效的解决方案，它通过单向连接使服务器能够持续发送更新到客户端。虽然原生的 EventSource 接口支持 SSE，但在一些老旧浏览器中并不支持，因此出现了一些库来提供兼容性和增强功能。

本文将详细介绍两个常用库：@microsoft/fetch-event-source 和 event-source-polyfill，并对它们的异同进行深入比较，以帮助开发者选择最适合自己项目的方案。

什么是 Server-Sent Events？

SSE 是一种标准化的服务器推送技术，允许服务器通过 HTTP 单向推送数据到客户端。这与 WebSocket 的双向通信不同，SSE 更适合一些只需要从服务器获取数据的场景，比如实时新闻更新、股票行情、通知系统等。

浏览器原生提供了 EventSource 接口来支持 SSE，但是在旧版浏览器和一些特殊的开发环境（如 Node.js 服务端渲染）中，EventSource 并不能直接使用，这时我们需要一些外部库来实现相同功能。

@microsoft/fetch-event-source 与 event-source-polyfill 介绍

@microsoft/fetch-event-source

@microsoft/fetch-event-source 是微软推出的一个库，旨在通过 fetch API 来增强对 SSE 的支持。它的设计初衷是为开发者提供一个更现代、更灵活的方式来处理服务器发送事件，尤其是当你需要对请求进行额外控制或在 Node.js 等非浏览器环境中使用 SSE 时，这个库非常合适。

主要特性：

• 基于 fetch API：不像原生 EventSource 是基于底层的 HTTP 长连接，该库通过 fetch API 实现，更加灵活，允许在请求中自定义 headers、设置认证信息、控制请求超时等。
• SSR 和 Node.js 支持：由于现代 Web 应用越来越多使用服务端渲染（SSR），而 Node.js 并不支持原生的 EventSource，因此 @microsoft/fetch-event-source 提供了一个更合适的解决方案，使其可以在服务端轻松处理 SSE。
• 高级错误处理：通过 fetch API，开发者可以更细粒度地控制错误处理逻辑，比如重试机制、超时处理、流式处理等。
• 更灵活的控制：开发者可以自定义请求方法，灵活控制连接和断开等行为。

代码示例：

import { fetchEventSource } from '@microsoft/fetch-event-source';

fetchEventSource('https://example.com/sse', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer your-token',
  },
  onmessage(ev) {
    console.log('New message:', ev.data);
  },
  onerror(err) {
    console.error('SSE error:', err);
  },
});

event-source-polyfill

event-source-polyfill 是一个轻量级的库，旨在为不支持 EventSource 的浏览器提供一个 polyfill。它的实现基于 XMLHttpRequest，模拟了原生 EventSource 的行为。因此，如果你需要在老旧浏览器中启用 SSE，这个库非常合适。

主要特性：

• 兼容旧版浏览器：这是 event-source-polyfill 的核心目的，它通过 XMLHttpRequest 来模拟原生的 SSE 行为，解决了旧版浏览器不支持 EventSource 的问题。
• 轻量级：该库非常轻巧，仅仅实现了 EventSource 的基础功能，适合那些只需要简单 SSE 支持的场景。
• 与浏览器环境紧密耦合：与 @microsoft/fetch-event-source 不同，event-source-polyfill 仅限于浏览器中使用，并且没有高级的错误处理或自定义请求功能。

代码示例：

import 'event-source-polyfill';

const eventSource = new EventSourcePolyfill('https://example.com/sse', {
  headers: {
    'Authorization': 'Bearer your-token',
  }
});

eventSource.onmessage = (event) => {
  console.log('New message:', event.data);
};

eventSource.onerror = (error) => {
  console.error('SSE error:', error);
};

两者的对比

特性	@microsoft/fetch-event-source	event-source-polyfill
基于技术	fetch API	XMLHttpRequest
主要用途	提供更灵活的 SSE 支持，适用于现代环境或 Node.js	提供 SSE polyfill，主要用于兼容旧浏览器
支持环境	浏览器和 Node.js	仅浏览器
请求自定义	支持自定义请求方法、headers、超时等	支持部分自定义 headers
错误处理	支持高级错误处理（重试、超时等）	简单的错误处理
兼容性	适合现代浏览器和服务端环境	适合旧版浏览器

选择哪个库？

什么时候使用 @microsoft/fetch-event-source？

• 如果你需要在 Node.js 环境中使用 SSE，或者你的项目需要灵活控制请求（如自定义请求头、认证信息、超时处理等），那么 @microsoft/fetch-event-source 是更合适的选择。它通过 fetch API 提供了更多的功能和控制，并且可以处理复杂的 SSE 场景，比如服务端渲染（SSR）中的数据推送。

什么时候使用 event-source-polyfill？

• 如果你的应用需要在老旧浏览器中支持 SSE，且你不需要复杂的自定义功能，那么 event-source-polyfill 是一个简单且轻量的解决方案。它的核心目标是为不支持原生 EventSource 的浏览器提供兼容性，因此非常适合面向广泛用户群体且需要兼容性较高的 Web 应用。

结论

选择合适的 SSE 库取决于你的具体需求。如果你在现代环境下开发，尤其是需要更高级的请求控制，@microsoft/fetch-event-source 是一个强大的工具。而如果你只是想兼容旧版浏览器并启用 SSE 功能，event-source-polyfill 则是一个简单且有效的选择。