axiospost请求接收sse[eventsource]数据的
- 手机
- 2025-08-31 03:21:02
![axiospost请求接收sse[eventsource]数据的](/0pic/pp_28.jpg)
axios 接收sse数据的
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.target const 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 data try { return JSON.parse(data) } catch (error) { return '' } }) debugger buffer = 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>
axiospost请求接收sse[eventsource]数据的由讯客互联手机栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“axiospost请求接收sse[eventsource]数据的”
