当前位置：首页 > article >正文

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

article 2026/4/15 5:59:38

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>

在这里插入图片描述

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

axios 接收sse数据的 axios 接收sse数据的 EventSource什么基于 HTTP 协议实现，通过与服务器建立一个持续连接，实现了服务器向客户端推送事件数据的功能。在客户端，EventSource 对象通过一个 URL 发起与服务器的连接。连接成功后&#xff0…...

编程日记 2026/4/7 17:11:25

Spring Boot 示例项目：从零开始构建 Web 应用

一、项目概述本文档将指导您通过一个示例项目，了解如何使用 Spring Boot 框架构建一个简单的 Web 应用程序。该项目涵盖了从数据模型定义到控制器、服务层以及数据访问层的完整开发流程，帮助您快速掌握 Spring Boot 的基本使用方法。二、项目结构 1. 项目模块本示例项…...

编程日记 2026/4/11 4:04:14

大语言模型常用微调与基于SFT微调DeepSeek R1指南

概述大型语言模型（LLM，Large Language Model）的微调（Fine-tuning）是指在一个预训练模型的基础上，使用特定领域或任务的数据对模型进行进一步训练，以使其在该领域或任务上表现更好。微调是迁移…...

编程日记 2026/4/7 13:55:58

聚焦地灾防治，助力城市地质安全风险防控

城市是人类社会发展的重要载体，承载着经济繁荣、文化交流和人口聚集等重要功能。然而，由于城市建设过程中地质条件复杂，地质灾害风险隐患存在，城市地质安全等问题日益突出，引起人们的广泛关注。为保障城市发展的安全和…...

编程日记 2026/4/10 14:05:04

为什么WP建站更适合于谷歌SEO优化？

在当今数字时代，建立一个网站似乎变得容易，但要构建一个真正能够带来流量和订单的网站却并非易事。特别是在谷歌SEO优化方面，不同的建站程序在SEO支持方面的效果差异显著。对于希望提升搜索引擎表现的用户来说，WordPress无疑是最佳…...

编程日记 2026/4/7 11:04:53

基于JavaScript的实时数据监控仪表盘开发实践

基于JavaScript的实时数据监控仪表盘开发实践一、项目背景某云计算服务商需要为其客户提供服务器集群健康状态监控系统。原有系统存在以下痛点： 数据刷新依赖手动操作可视化效果单一（仅表格展示）缺乏异常状态的智能预警移动端适配性差 …...

编程日记 2026/3/30 7:22:46

同步异步日志系统-日志落地模块的实现

功能：将格式化完成后的日志消息字符串，输出到指定的位置扩展：支持同时将日志落地到不同的位置位置分类： 1.标准输出 2.指定文件（时候进行日志分析） 3.滚动文件（文件按照时间/大小进行滚动…...

编程日记 2026/4/12 3:42:06

大模型常识：什么是大模型/大语言模型/LLM

本文原创作者：姚瑞南 AI-agent 大模型运营专家，先后任职于美团、猎聘等中大厂AI训练专家和智能运营专家岗；多年人工智能行业智能产品运营及大模型落地经验，拥有AI外呼方向国家专利与PMP项目管理证书。（转载需经授权）目录一、什么是语言模型？那么什么是语言模…...

编程日记 2026/3/27 3:14:01

用deepseek学大模型08-长短时记忆网络 (LSTM)

deepseek.com 从入门到精通长短时记忆网络(LSTM),着重介绍的目标函数，损失函数，梯度下降标量和矩阵形式的数学推导，pytorch真实能跑的代码案例以及模型,数据， 模型应用场景和优缺点，及如何改进解决及改进方法数据推导…...

编程日记 2026/4/14 14:54:30

IOT通道MQTT

IoT通道是物联网（IoT）系统中用于设备与云端或设备之间通信的专用通道，其主要作用是实现数据的高效传输和设备的远程控制。以下是关于IoT通道的定义、应用和技术特点的总结： 定义 IoT通道是物联网设备与云端或设备之间建立的通信…...

编程日记 2026/4/14 2:23:22

（蓝桥杯——10. 小郑做志愿者）洛斯里克城志愿者问题详解

题目背景小郑是一名大学生，她决定通过做志愿者来增加自己的综合分。她的任务是帮助游客解决交通困难的问题。洛斯里克城是一个六朝古都，拥有 N 个区域和古老的地铁系统。地铁线路覆盖了树形结构上的某些路径，游客会询问两个区域是否可以通过某条地铁线路直达，以及有多少条…...

编程日记 2026/4/9 12:23:53

小胡说技书博客分类（部分目录）：服务治理、数据治理与安全治理对比表格

文章目录一、对比表格二、目录2.1 服务2.2 数据2.3 安全一、对比表格下表从多个维度对服务治理、数据治理和安全治理进行详细对比，为读者提供一个直观而全面的参考框架。维度服务治理数据治理安全治理定义对软件开发全流程、应用交付及API和接口管理进行规范化…...

编程日记 2026/4/11 9:49:00

开源模型应用落地-DeepSeek-R1-Distill-Qwen-7B-LoRA微调-LLaMA-Factory-单机单卡-V100（一）

一、前言如今，大语言模型领域热闹非凡，各种模型不断涌现。DeepSeek-R1-Distill-Qwen-7B 模型凭借其出色的效果和性能，吸引了众多开发者的目光。而 LLaMa-Factory 作为强大的微调工具，能让模型更好地满足个性化需求。在本篇中&am…...

编程日记 2026/4/14 12:19:53

如何避免redis长期运行持久化AOF文件过大的问题：AOF重写

一、AOF 重写的核心作用通过重建 AOF 文件，解决以下问题： 体积压缩：消除冗余命令（如多次修改同一 key），生成最小操作集合。混合持久化支持（若启用 aof-use-rdb-preamble yes）&am…...

编程日记 2026/3/14 5:24:47

uni-app发起网络请求的三种方式

uni.request(OBJECT) 发起网络请求具体参数可查看官方文档uni-app data:请求的参数; header：设置请求的 header，header 中不能设置 Referer； method：请求方法； timeout：超时时间，单位 ms&a…...

编程日记 2026/4/8 23:14:14

以下是一个使用 HTML、CSS 和 JavaScript 实现的登录弹窗效果示例

以下是一个使用 HTML、CSS 和 JavaScript 实现的登录弹窗效果示例： <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><title>登录弹窗示例</title><style>body {font-family: Aria…...

编程日记 2025/6/15 11:39:03

EasyRTC：智能硬件适配，实现多端音视频互动新突破

一、智能硬件全面支持，轻松跨越平台障碍 EasyRTC 采用前沿的智能硬件适配技术，无缝对接 Windows、macOS、Linux、Android、iOS 等主流操作系统，并全面拥抱 WebRTC 标准。这一特性确保了“一次开发，多端运行”的便捷性&#xff0c…...

编程日记 2026/4/8 12:04:01

LeetCode1287

LeetCode1287 目录题目描述示例思路分析代码段代码逐行讲解复杂度分析总结的知识点整合总结题目描述给定一个非递减的整数数组 arr，其中有一个元素恰好出现超过数组长度的 25%。请你找到并返回这个元素。示例示例 1 输入: arr [1, 2, 2, 6, 6, 6, 6, 7,…...

编程日记 2026/4/8 17:53:56

【计算机网络】网络层数据包（Packet）格式

在计算机网络中，数据包（Packet） 是网络层的协议数据单元（PDU），用于在不同网络之间传输数据。数据包的格式取决于具体的网络层协议（如 IPv4、IPv6 等）。以下是常见数据包格式的详细说…...

编程日记 2026/2/5 15:44:26

使用vite打包并部署vue项目到nginx

1 使用 Vite 创建 vue3 项目 Vite 是一个新型的前端构建工具，专为现代浏览器和工具链而设计，提供了极快的冷启动和热模块更新（HMR）速度。以下是使用 Vite 创建 Vue 3 项目的详细步骤： 一、安装 Node.js 和 npm 首先…...

编程日记 2026/2/4 7:02:36

深度学习笔记之自然语言处理(NLP)

深度学习笔记之自然语言处理(NLP) 在行将开学之时，我将开始我的深度学习笔记的自然语言处理部分，这部分内容是在前面基础上开展学习的，且目前我的学习更加倾向于通识。自然语言处理部分将包含《动手学深度学习》这本书的第十四章&#xff0c…...

编程日记 2026/4/9 6:52:13

【ISO 14229-1:2023 UDS诊断全量测试用例清单系列：第十九节】

ISO 14229-1:2023 UDS诊断服务测试用例全解析（ClearDiagnosticInformation_0x84服务） 作者：车端域控测试工程师更新日期：2025年02月14日关键词：UDS协议、0x84服务、清除诊断信息、ISO 14229-1:2023、ECU测试一、服…...

编程日记 2026/3/22 12:19:56

自动化测试框架搭建-单次接口执行-三部曲

目的判断接口返回值和提前设置的预期是否一致，从而判断本次测试是否通过代码步骤设计第一步：前端调用后端已经写好的POST接口，并传递参数第二步：后端接收到参数，组装并请求指定接口，保存返回第三…...

编程日记 2026/4/9 12:33:30

Spring Bean的生命周期和作用域

一、Bean 生命周期 Bean的定义Bean的实例化属性注入Bean的初始化Bean的使用Bean的销毁可以增强的位置： PostConstruct：属性注入后，afterPropertiesSet方法 （前提实现：InitializingBean接口）前增强。 Pr…...

编程日记 2026/1/11 7:08:13

DeepSeek R1生成图片总结2（虽然本身是不能直接生成图片，但是可以想办法利用别的工具一起实现）

DeepSeek官网目前阶段，DeepSeek R1是不能直接生成图片的，但可以通过优化文本后转换为SVG或HTML代码，再保存为图片。另外，Janus-Pro是DeepSeek的多模态模型，支持文生图，但需要本地部署或者使用第三方工具。…...

编程日记 2026/4/13 0:13:44

ESP32 ESP-IDF TFT-LCD(ST7735 128x160) LVGL基本配置和使用

ESP32 ESP-IDF TFT-LCD(ST7735 128x160) LVGL基本配置和使用 📍项目地址：https://github.com/lvgl/lv_port_esp32参考文章：https://blog.csdn.net/chentuo2000/article/details/126668088https://blog.csdn.net/p1279030826/article/details/…...

编程日记 2026/4/9 3:00:52

数据库连接池与池化思想

目录 1. 数据库连接池概述 1.1 什么是数据库连接池？ 1.2 为什么需要连接池？ 2. 池化思想 2.1 池化思想的优点 2.2 池化思想的典型应用 3. 常见的开源数据库连接池 3.1 DBCP 3.2 C3P0 3.3 Druid 4. Druid连接池的使用 4.1 Druid的特点 4.2 D…...

编程日记 2026/4/14 7:12:09

深度学习和机器学习的本质区别（白话版）

深度学习与机器学习的本质区别在人工智能的世界里，机器学习和深度学习是两个常被提及的概念，但它们在本质上有着重要区别。简单来说，机器学习依赖于人为设定的数据模式，而深度学习则更依赖于数据本身自动发现模式。机器学习&a…...

编程日记 2026/4/5 19:47:11

halcon激光三角测量（十七）calibrate_sheet_of_light_3d_calib_object

目录一、calibrate_sheet_of_light_3d_calib_object例程代码二、标定过程三、校准后的3D模型和原3D模型对齐过程四、获得模型标定结果，并生成3D模型五、set_paint 和 dev_set_paint函数一、calibrate_sheet_of_light_3d_calib_object例程代码 1、第一部分&#x…...

编程日记 2026/4/14 20:29:19

【笔记】LLM｜Ubuntu22服务器极简本地部署DeepSeek+联网使用方式

2025/02/18说明：2月18日~2月20日是2024年度博客之星投票时间，走过路过可以帮忙点点投票吗？我想要前一百的实体证书，经过我严密的计算只要再拿到60票就稳了。一人可能会有多票，Thanks♪(･ω･)&am…...

编程日记 2026/4/3 21:40:12