EventSource 是一种在前端用于接收来自服务器的实时流式数据的API。它基于HTTP协议的Server-Sent Events（SSE）标准，允许服务器推送更新到浏览器，通常用于显示动态内容，如聊天消息、实时统计信息等场景。
基本用法
使用 EventSource 很简单，不需要复杂的配置。其主要步骤如下：
- 创建一个 EventSource 对象，指定服务器的 URL。
- 监听
message事件以处理接收到的数据。 - 监听
error事件以处理连接错误。
示例代码
// 创建一个 EventSource 实例
const eventSource = new EventSource('https://your-server.com/events');
// 监听消息事件
eventSource.onmessage = function(event) {
console.log('Received message:', event.data);
};
// 监听错误事件
eventSource.onerror = function(event) {
console.error('EventSource failed:', event);
};
传递参数
通常，向服务器传递参数可以通过在 URL 中拼接查询字符串来实现。例如，如果我们要发送一个用户ID，可以这样做：
const userId = 123;
const eventSource = new EventSource(`https://your-server.com/events?userId=${userId}`);
配置请求头
EventSource API 本身并不支持直接设置请求头。这是因为它使用的是浏览器的 XMLHttpRequest 技术，而 XMLHttpRequest 不支持自定义的请求头。通常，如果需要在服务端进行鉴权，可以考虑以下几种解决方案：
- Token 作为查询参数：在 EventSource 的 URL 中直接传递认证信息。
- 使用 Cookie：如果用户已登录，服务器可以通过 cookie 识别用户。大部分情况下，登录后会自动将 token 存储在 cookie 中，服务器可以直接读取。
示例代码（传递 Token）
以下是如何将 Token 作为查询参数传递的示例：
const token = 'YOUR_AUTH_TOKEN';
const eventSource = new EventSource(`https://your-server.com/events?token=${token}`);
处理服务器端
在服务器端，我们需要确保能够处理来自 EventSource 的请求。以下是一个简单的 Node.js 服务器示例，使用 Express 框架：
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
app.get('/events', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
const userId = req.query.userId;
// 这里可以根据 userId 进行相应的处理
console.log(`User ID: ${userId}`);
// 示例：每隔1秒发送一条消息
const intervalId = setInterval(() => {
const message = `Hello User ${userId}, time is ${new Date().toLocaleTimeString()}`;
res.write(`data: ${message}\n\n`);
}, 1000);
// 监听客户端断开连接
req.on('close', () => {
clearInterval(intervalId);
res.end();
});
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);
});
总结
EventSource 是一种简单有效的方式，可以在前端应用中实现实时数据流。然而，配置请求头的支持有限，但可以通过其他方式（如 Token 作为查询参数）进行身份验证。结合这种方法，开发者能够为用户提供更加即时和动态的用户体验。在实现过程中，要特别注意连接管理和错误处理，确保在网络不稳定的环境中也能提供良好的用户体验。
