使用 Axios 实现服务器发送事件 (SSE) 的流式处理
在现代的前端开发中，实时数据传输变得越来越重要。服务器发送事件（SSE, Server-Sent Events）是一种允许服务器通过 HTTP 协议向客户端单向推送消息的技术。本文将指导你如何使用 JavaScript 的 Axios 库实现 SSE。
1. 流程概述
下面是实现 “js axios SSE 流式” 的步骤：
| 步骤 | 描述 |
|---|---|
| 1 | 创建服务器端发送事件的API |
| 2 | 使用Axios发送请求 |
| 3 | 处理服务器推送的事件 |
| 4 | 显示实时数据 |
| 5 | 处理错误和关闭连接 |
接下来，我们将逐步详细说明每个步骤。
2. 步骤详解
步骤 1: 创建服务器端发送事件的 API
首先，我们需要在服务器上创建一个名为 events 的端点，这样客户端可以通过这个端点来接收实时数据。以下是使用 Express.js 创建 SSE 的基本示例代码。
// server.js
const express = require('express');
const app = express();
const PORT = 3000;
app.get('/events', (req, res) => {
// 设置响应头以指示这是 SSE
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
// 定时发送数据到客户端
setInterval(() => {
const data = {
message: 'Hello from Server!',
timestamp: new Date().toISOString(),
};
// 发送事件数据
res.write(`data: ${JSON.stringify(data)}\n\n`);
}, 3000); // 每3秒推送一次数据
// 处理客户端断开连接
req.on('close', () => {
res.end();
});
});
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
步骤 2: 使用 Axios 发送请求
接下来，我们需要使用 Axios 来请求刚创建的 SSE 端点。下面是如何在客户端代码中实现的：
// client.js
import axios from 'axios';
// 创建一个用于连接 SSE 的函数
function connectSSE() {
// 使用 axios 进行 GET 请求
const sseSource = axios({
method: 'get',
url: 'http://localhost:3000/events',
responseType: 'stream',
});
// 处理响应流
sseSource.then(response => {
const reader = response.data.getReader();
readStream(reader);
})
.catch(error => {
console.error('Error connecting to SSE:', error);
});
}
// 读取流式数据
async function readStream(reader) {
const decoder = new TextDecoder('utf-8');
while (true) {
const { done, value } = await reader.read();
if (done) break;
// 解码数据并处理
const message = decoder.decode(value);
console.log('Received:', message);
}
}
// 启动 SSE 连接
connectSSE();
步骤 3: 处理服务器推送的事件
在上面的 readStream 函数中，我们已准备好读取服务器推送的事件。在接收到消息时，我们会将其打印到控制台。你可以根据需要将其显示在页面上。
步骤 4: 显示实时数据
接下来，我们将在页面上显示实时数据。可以使用简单的 HTML 和 JavaScript。
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SSE Example</title>
</head>
<body>
实时消息
<ul id="messages"></ul>
<script src="
<script src="./client.js"></script>
<script>
async function readStream(reader) {
const decoder = new TextDecoder('utf-8');
while (true) {
const { done, value } = await reader.read();
if (done) break;
const message = decoder.decode(value);
console.log('Received:', message);
// 将消息添加到页面上
const li = document.createElement('li');
li.textContent = message;
document.getElementById('messages').appendChild(li);
}
}
</script>
</body>
</html>
步骤 5: 处理错误和关闭连接
最后，我们可以增强错误处理和关闭连接的功能。确保在 readStream 和 connectSSE 中加入错误处理逻辑。
// client.js
function connectSSE() {
const sseSource = axios({
method: 'get',
url: 'http://localhost:3000/events',
responseType: 'stream',
});
sseSource.then(response => {
const reader = response.data.getReader();
readStream(reader).catch(e => console.error('Stream reading error:', e));
}).catch(error => {
console.error('Error connecting to SSE:', error);
});
}
3. 总结
如今，SSE 已成为一种普遍且高效的实时数据传输解决方案。通过本教程，你已经学会了如何使用 Axios 实现流式数据接收。以下是我们所实现功能的一个简要饼状图展示：
pie
title SSE 功能实现占比
"创建服务器端 API": 30
"使用 Axios 发送请求": 20
"处理推送事件": 20
"显示实时数据": 20
"处理错误和关闭连接": 10
通过这些步骤，你可以快速上手使用 SSE。如果有任何问题或需要进一步的帮助，欢迎随时提问！希望你在开发中取得成功！
