使用 Axios 实现 SSE（Server-Sent Events）协议
Server-Sent Events（SSE）是一种单向的传输协议，它允许服务器向客户端发送实时更新。使用 Axios 进行 SSE 通信，虽然 Axios 主要是为 AJAX 请求设计的，但我们可以结合一些技巧来处理这个需求。在本文中，我将逐步引导你实现这个过程，涵盖关键步骤和所需的代码示例。
1. 流程概述
在正式开始之前，我们先来了解实现 SSE 的基本流程。以下是该流程的概述：
| 步骤 | 说明 |
|---|---|
| 1 | 创建后端服务，支持 SSE 通信 |
| 2 | 使用 Axios 发起请求，建立连接 |
| 3 | 处理服务器发送的消息 |
| 4 | 销毁连接，清理资源 |
流程图
flowchart TD
A[创建后端服务] --> B[使用 Axios 发起请求]
B --> C[处理服务器发送的消息]
C --> D[销毁连接，清理资源]
2. 创建后端服务
我们将首先编写一个简单的后端服务，使用 Node.js 和 Express 实现。该服务将在 /events 路径上发送消息。
后端代码示例
// 导入所需的模块
const express = require('express');
const app = express();
const PORT = 3000;
// SSE 路由
app.get('/events', (req, res) => {
// 设置响应头，指示 SSE
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
// 定时发送消息
setInterval(() => {
// 发送一条消息
res.write(`data: ${new Date().toISOString()}\n\n`);
}, 1000); // 每1000毫秒发送一次
// 当客户端断开连接时，清理资源
req.on('close', () => {
res.end();
});
});
// 启动服务器
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
代码说明
- 导入依赖: 使用
express模块来快速创建后端服务。 - 定义路由: 在
/events路径上建立 SSE 接口。 - 设置响应头: 必须设置内容类型为
text/event-stream。 - 发送数据: 使用
setInterval每秒发送当前时间。 - 关闭处理: 当连接关闭时，结束响应。
3. 使用 Axios 发起请求
接下来，我们需要在前端使用 Axios 发起对上述服务的请求。既然 SSE 是一种持久连接，我们将使用 EventSource 来接收消息，而不是用 Axios 执行标准的 HTTP 请求。
虽然 Axios 不是为 SSE 设计的，但我们可以视情况使用。此外，下面是如何通过 EventSource 处理 SSE 消息的示范。
前端代码示例
// 创建新的 EventSource 对象，指向我们的 SSE 路由
const eventSource = new EventSource('http://localhost:3000/events');
// 监听消息事件
eventSource.onmessage = (event) => {
console.log('Received:', event.data); // 打印接收到的数据
};
// 处理错误事件
eventSource.onerror = (error) => {
console.error('EventSource failed:', error);
};
// 当需要关闭连接时调用此函数
function closeConnection() {
eventSource.close(); // 关闭连接
console.log('Connection closed');
}
代码说明
- 创建 EventSource: 指向我们的 SSE 路由
/events。 - 监听消息: 当接收到消息时，打印到控制台。
- 处理错误: 监听可能发生的错误。
- 关闭连接: 设计一个函数来关闭连接。
4. 处理服务器发送的消息
在上面的代码中，我们使用 eventSource.onmessage 来处理收到的 SSE 消息。可以根据需要将这些数据用于实际的前端逻辑。
5. 销毁连接，清理资源
对于长时间运行的连接，务必确保在不再需要时关闭它。可以根据具体逻辑决定何时调用 closeConnection 函数。例如，在组件卸载时或用户主动选择停止接收信息时。
状态图
stateDiagram
[*] --> Idle
Idle --> Listening : Start Listening
Listening --> Receiving : Message Received
Receiving --> Idle : Stop Listening
状态图说明
- Idle: 初始状态，表示未开始监听。
- Listening: 当前正在接收消息。
- Receiving: 表示收到了一条消息。
- 返回 Idle: 你通过调动
closeConnection函数，将连接关闭返回到初始状态。
结尾
通过上述步骤，你应该能够理解如何使用后端 SSE 服务与前端进行实时通信。尽管 Axios 不直接支持 SSE，但结合 EventSource 使得处理这类需求变得简单易行。掌握这一技术将有助于你在未来的项目中实现实时数据流。
希望这篇文章对你有帮助！若对实现有任何疑问，随时欢迎提问。
