前端怎么用 EventSource? EventSource怎么配置请求头及加参数？ EventSourcePolyfill使用方法

前端如何使用 EventSource

EventSource 是 HTML5 提供的一种用于服务器与客户端之间进行实时通信的API。这一API用户可以轻松地接收服务器端推送的数据，适用于实现实时更新的应用，例如聊天应用、通知系统等。与 WebSocket 相比，EventSource 的使用方式相对简单，并且仅支持单向的消息推送（从服务器到客户端）。

基本使用

首先来看一个使用 EventSource 的基本示例：

// 创建一个新的 EventSource 实例
const eventSource = new EventSource('https://example.com/events');

// 监听消息事件
eventSource.onmessage = function(event) {
    console.log('接收到消息:', event.data);
};

// 监听打开连接事件
eventSource.onopen = function() {
    console.log('连接已打开');
};

// 监听错误事件
eventSource.onerror = function(error) {
    console.error('发生错误:', error);
};

在上述代码中，我们通过 new EventSource(url) 创建了一个连接到服务器的 EventSource 实例。这个实例会向服务器请求推送事件，并能够监听三种类型的事件：onmessage、onopen 和 onerror。

EventSource 请求头及参数配置

EventSource 的连接是不支持自定义请求头的，如 Authorization 等。服务器在响应请求时必须提供适当的内容类型 text/event-stream，同时也可以设置 CORS 头部来支持跨域请求。

但是，可以通过 URL 参数来传递一些信息。例如：

const userId = 123; // 假设我们需要将用户ID传递给服务器
const eventSource = new EventSource(`https://example.com/events?userId=${userId}`);

在这个例子中，我们通过 URL 参数将 userId 传递给了服务器，服务器可以利用这个参数来针对特定用户推送消息。

EventSource Polyfill 使用方法

由于 EventSource 在某些旧浏览器中可能不被支持，可以使用 polyfill 进行兼容性处理。一个流行的选择是 EventSourcePolyfill。

使用方法如下：

1. 首先，通过 <script> 标签或者 npm 安装 EventSourcePolyfill。

<script src="https://cdn.rawgit.com/YuzuJS/EventSource-Polyfill/master/src/eventsource.js"></script>

或者，使用 npm 安装：

npm install eventsource-polyfill

1. 引入 polyfill 后，就可以像使用原生 EventSource 一样使用它，且可在不支持的环境中正常工作。

// 引入 polyfill
import 'eventsource-polyfill';

// 创建 EventSource 实例
const eventSource = new EventSource('https://example.com/events');

eventSource.onmessage = function(event) {
    console.log('接收到消息:', event.data);
};

eventSource.onerror = function(error) {
    console.error('发生错误:', error);
};

通过上述步骤，您可以确保即使在不支持 EventSource 的浏览器中也能正常工作。

总结

EventSource 是一个非常便捷的 API，用于实现客户端与服务器之间的实时通信。尽管它有一些限制（如不支持自定义请求头和仅支持单向通信），但是对于许多应用场景仍然非常有效。同时，通过使用 polyfill，我们可以保证在各种浏览器中取得一致的行为。

希望这篇文章能帮助您更好地理解和使用 EventSource！