axios post请求接收sse[eventsource]数据的

axios 接收sse数据的

EventSource什么

基于 HTTP 协议实现，通过与服务器建立一个持续连接，实现了服务器向客户端推送事件数据的功能。在客户端，EventSource 对象通过一个 URL 发起与服务器的连接。连接成功后，服务器可以向客户端发送事件数据。在客户端，通过 EventSource 对象注册事件处理函数，以接收来自服务器的事件数据。

EventSource的工作原理

1. 客户端发起一个 HTTP 请求，请求 URL 为服务器提供的 URL。
2. 服务器收到请求后，会建立一个持续连接，客户端和服务器之间保持着一个持久的连接。
3. 服务器向客户端发送事件数据，事件数据以文本形式发送，格式为 "event: data"。
4. 客户端通过 EventSource 对象注册事件处理函数，以接收来自服务器的事件数据。
5. 客户端可以通过 EventSource 对象的 close() 方法关闭连接。

项目的需求

最近在做一个项目，里面有个机器人，里面有个知识库回答功能，根据用户发送的数据，，需要从服务器接收数据，并且实时更新。整个项目去哪不使用的封装的axios库，而且全部使用的post请求，但是 axios 库没有提供接收 sse 数据的方法。EventSource 库可以实现接收 sse 数据的功能。但是不支持post请求。在加上axios 封装好多东西，所以只能只用封装的axios库。经过查多方资料，测试，终于实现了接收 sse 数据的功能。为了测试特意写了node后端的和前端的代码。

node 后端实现sse数据的发送

1. 安装 express 和 cors 库
2. 编写路由文件，使用 res.write() 方法发送数据
3. 启动服务器，监听端口

const express = require('express');
const cors = require('cors');
const app = express();
const port = 3000;// 设置CORS策略，允许所有来源的请求
app.use(cors());let counter = 0;// SSE 路由
app.get('/events', (req, res) => {// 设置响应头，告诉浏览器这是一个 SSE 流res.setHeader('Content-Type', 'text/event-stream');res.setHeader('Cache-Control', 'no-cache');res.setHeader('Connection', 'keep-alive');// 每秒推送一次数据const intervalId = setInterval(() => {counter++;res.write(`data: ${JSON.stringify({ counter })}\n\n`);// 模拟关闭连接if (counter === 10) {clearInterval(intervalId);res.write('data: {"message": "Stream ended"}\n\n');res.end();}}, 1000);// 当客户端断开连接时，清理定时器req.on('close', () => {clearInterval(intervalId);});
});
app.post('/events2', (req, res) => {// 设置响应头，告诉浏览器这是一个 SSE 流res.setHeader('Content-Type', 'text/event-stream');res.setHeader('Cache-Control', 'no-cache');res.setHeader('Connection', 'keep-alive');let tottal = 0;// 每秒推送一次数据const intervalId = setInterval(() => {tottal++;res.write(`data: ${JSON.stringify({ message: tottal })}\n\n`);// 模拟关闭连接if (tottal === 10) {clearInterval(intervalId);res.write('data: {"message": "Stream ended"}\n\n');res.end();}}, 1000);// 当客户端断开连接时，清理定时器req.on('close', () => {clearInterval(intervalId);});
});app.listen(port, () => {console.log(`Server is running on http://localhost:${port}`);
});

上面的实现一个get和一个post请求，都是sse数据的发送。

前端实现sse数据的接收

前端很简单，直接使用html axios 直接使用cdn，或者下载本地直接引入，我直接现在本地直接使用的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>```html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Axios POST Request Example</title><script src="./axios.js"></script> <!-- 引入 Axios -->
</head><body><h1>Axios POST Request Example</h1><div><label for="name">Name:</label><input type="text" id="name" placeholder="Enter your name"></div><div><label for="message">Message:</label><input type="text" id="message" placeholder="Enter a message"></div><button id="sendRequest">Send POST Request</button><div id="response"></div><script>// 获取按钮和输入框元素const sendRequestButton = document.getElementById('sendRequest');const nameInput = document.getElementById('name');const messageInput = document.getElementById('message');const responseDiv = document.getElementById('response');let buffer = '';// 绑定按钮点击事件sendRequestButton.addEventListener('click',  function () {// 获取输入框的值const name = nameInput.value;const message = messageInput.value;// 创建要发送的数据const data = {name: name,message: message};
//       function startPolling() {
//   let xhr = new XMLHttpRequest();//   // 创建一个定时的 HTTP 请求，每隔一定时间向服务器发送请求
//   function poll() {
//     xhr.open('GET', 'http://localhost:3000/events', true);
//     xhr.onreadystatechange = function() {
//         const data = xhr.responseText;
//         console.log('Received data:', data);
//       // if (xhr.readyState === 4 && xhr.status === 200) {
//       //   // 服务器返回数据
//       //   const data = xhr.responseText;
//       //   console.log('Received data:', data);
//       // }
//     };//     // 发送请求
//     xhr.send();//     // 继续每 2 秒轮询一次
//   }//   // 启动轮询
//   poll();
// }// startPolling();axios.post('http://localhost:3000/events2', {}, {onDownloadProgress: progressEvent => {console.log('progressEvent', progressEvent)let {responseText} = progressEvent.event.targetconst newData = responseText.slice(buffer.length)buffer += newData// const events = buffer.split('\n\n')const events = buffer.split('\n\n').map(item => {const data = item.replace(/^data: /, '').trim()// return datatry {return JSON.parse(data)} catch (error) {return ''}})debuggerbuffer = events.pop() // 剩余部分保留到下一次// events.forEach(event => {//   if (event.trim()) {//     const data = event.replace(/^data: /, '').trim();//     const infoData = JSON.parse(data);//     console.log('Received event:', infoData.message);//   }// });console.log('Received data:', events, 'aaa',buffer)});</script></body></html>