使用 Axios 实现 SSE（服务器推送事件）
在现代Web开发中，服务器推送事件（Server-Sent Events，简称 SSE）是一种允许服务器通过 HTTP 将实时更新推送给客户端的技术。它适用于许多应用场景，比如即时消息、数据监控等。本文将向您展示如何使用 axios 来实现 SSE 连接，并发送和接收数据。
处理流程概述
我们将分为几个简单的步骤来实现通过 axios 进行 SSE 连接。以下是整个流程的概述：
| 步骤 | 说明 |
|---|---|
| 1 | 初始化项目 |
| 2 | 创建后端服务器 |
| 3 | 创建前端页面与 Axios 连接 |
| 4 | 处理服务器推送的数据 |
| 5 | 完成后测试和调试 |
详细步骤
步骤 1: 初始化项目
首先，我们需要初始化一个新的项目。可以使用 npm 创建一个新的 React 项目，或选择您熟悉的框架。
# 使用 Create React App 创建新项目
npx create-react-app sse-demo
cd sse-demo
npm install axios
步骤 2: 创建后端服务器
为了实现服务器推送，我们需要创建一个简单的后端。这里我们使用 Node.js 和 Express 来搭建。
# 在项目根目录下创建 server.js 文件
touch server.js
// server.js
const express = require('express');
const cors = require('cors');
const app = express();
const PORT = 4000;
app.use(cors());
app.get('/sse', (req, res) => {
// 设置响应头
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
// 每秒钟向客户端发送一次消息
const intervalId = setInterval(() => {
const message = `data: ${new Date().toISOString()}\n\n`;
res.write(message);
}, 1000);
// 当连接关闭时，清理资源
req.on('close', () => {
clearInterval(intervalId);
res.end();
});
});
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
这段代码定义了一个 /sse 路由并设定了响应头，以开启 SSE 连接。每秒钟推送当前时间。
步骤 3: 创建前端页面与 Axios 连接
接下来，我们在前端中创建与后端的连接。使用 axios 定义一个请求来获取事件：
// 在 src/App.js 文件中进行修改
import React, { useEffect } from 'react';
import axios from 'axios';
const App = () => {
useEffect(() => {
// 创建一个新的 SSE 连接
const eventSource = new EventSource('http://localhost:4000/sse');
// 处理收到的消息
eventSource.onmessage = function(event) {
console.log("Received: ", event.data); // 打印接收到的数据
};
return () => {
eventSource.close(); // 在组件卸载时关闭连接
};
}, []);
return (
<div>
SSE Demo with Axios
</div>
);
};
export default App;
在上面的代码中，我们使用 EventSource 创建与后端的连接，并处理接收到的消息。
步骤 4: 处理服务器推送的数据
在步骤 3 中，我们已经打印了收到的服务器推送数据。在这里，我们可以选择将这些数据显示在页面上，而不是仅仅在控制台中打印。
// 在 src/App.js 中添加状态来保存数据
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const App = () => {
const [messages, setMessages] = useState([]);
useEffect(() => {
const eventSource = new EventSource('http://localhost:4000/sse');
eventSource.onmessage = function(event) {
setMessages(prevMessages => [...prevMessages, event.data]);
};
return () => {
eventSource.close();
};
}, []);
return (
<div>
SSE Demo with Axios
<ul>
{messages.map((msg, index) => (
<li key={index}>{msg}</li>
))}
</ul>
</div>
);
};
export default App;
现在接收到的数据将会显示在页面的列表中。
步骤 5: 完成后测试和调试
确保您同时启动了 Node.js 服务器和前端开发服务器。可以使用以下命令：
# 在 server.js 所在目录下启动后端服务器
node server.js
# 在前端项目目录下启动开发服务器
npm start
访问 http://localhost:3000，您应该能看到一个实时更新的消息列表，每秒钟都会显示当前的时间。
反馈与总结
通过以上步骤，您不仅学习了如何使用 axios 和 EventSource 来实现服务器推送事件，还能将收到的数据在前端进行有效展示。SSE 为构建实时应用提供了简单而强大的解决方案。
- 项目结构图：
pie
title 初始化项目
"后端": 50
"前端": 50
- 进度甘特图：
gantt
title 项目进度
dateFormat YYYY-MM-DD
section 初始化项目
初始化项目 :done, des1, 2023-10-01, 1d
section 创建后端
创建后端 :active, des2, 2023-10-02, 1d
section 创建前端页面
创建前端页面 : des3, 2023-10-03, 1d
section 处理数据
处理数据 : des4, 2023-10-04, 1d
希望通过这篇文章，您对使用 axios 实现 SSE 有了更深入的理解，并能在自己的项目中应用这一技术。祝您编码愉快！
