一个SSE(流式)接口引发的问题

前言

最近我们公司也是在做认知助手,大模型相关的功能,正在做提示词,机器人对话相关功能。想要提高用户体验,使用SSE请求模式,在不等数据完全拿到的情况下边拿边返回。

之前做过一版,但不是流式返回,是等待全部结果再返回,不得不说确实等待过程挺长,然后就有了现在的优化。想着功能都写好了,只是改一下接口,应该是个简单的需求。

后端使用的post接口,经过一番搜索,最后使用的fetch。经过短短几个小时,配置写好,准备联调,以为需求就顺利完工了。奈何就这流式联调,还耗了两天。只因为后端在postman上测试时正常的,然后前端在本地连调就是无法获取分段式数据,拿到的总是一整块数据。表现成这样,我们就开始纠结前端配置是否有误,网关转发是否有误。

就这样前端也试了好几种方式去发请求,奈何结果都一样。想着先测其他部分,这个接口最后测试。意外的是部署在线上的环境竟然能正常接收流式接口!!!那问题可能就是本地与部署线上的区别了,今天主要记录一下使用的配置。

EventSource

创建EventSource对象:首先,使用new EventSource()构造函数创建一个EventSource对象。该对象将用于与服务器建立连接并接收服务器发送的事件流。

var eventSource = new EventSource('sse_url');

在上面的代码中,将’sse_url’替换为实际的SSE请求URL。
2. 监听事件:使用EventSource对象的onmessage事件监听器来接收服务器发送的事件数据。当接收到数据时,事件处理函数将被调用,并可以通过事件对象的data属性访问数据。

eventSource.onmessage = function(event) {  console.log('Received data:', event.data);  
};

错误处理:为了处理可能发生的错误,可以使用EventSource对象的onerror事件监听器。当发生错误时,可以在事件处理函数中进行处理。

eventSource.onerror = function(error) {  console.error('SSE error:', error);  
};

关闭连接:当不再需要接收事件流时,可以使用EventSource对象的close方法关闭连接。

eventSource.close();

完整的示例代码如下所示:

var eventSource = new EventSource('sse_url');  eventSource.onmessage = function(event) {  console.log('Received data:', event.data);  
};  eventSource.onerror = function(error) {  console.error('SSE error:', error);  
};

但是EventSource只支持get请求,配置请求头也不太友好。

fetch

async function getStream() {try {let response = await fetch('url');if (!response.ok) {throw new Error('Network response was not ok');}   const reader = response.body.getReader();const textDecoder = new TextDecoder();let result = true;let output = ''while (result) {const { done, value } = await reader.read();if (done) {console.log('Stream ended');result = false;break;}const chunkText = textDecoder.decode(value);output += chunkText;console.log('Received chunk:', chunkText);}} catch (e) {console.log(e);}
}

插件

@microsoft/fetch-event-source
使用方法我就 不放了,看了一下源码也是基于fetch实现的,网上例子很多,可以看看。

问题

本地运行的环境也是用的代理访问的部署好的环境的接口。插件是 Node.js 的 HTTP 代理中间件http-proxy-middleware。所以为何同样的配置,本地运行不行,而部署到环境上就正常了呢,

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/653520.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机房环境动力监控系统:S275远程控制网关助力高效管理

现场问题 1、机房安全隐患 机房存在意外断电、温湿度过高过低、漏水断路等隐患,传统监测手段难以提前发现和预警。 2、机房远程运维困难 因环境改变、非授权活动、设备状态变化等引起的事故,难以满足机房远程运维的可靠管控要求。 3、机房改造成本高…

Django 实现SS

1、简单的sse只要用django内置的StreamingHttpResponse就可以实现 2、django-sse这个第三方库已经有10年没有更新,不要用这个库了。 3、告知前端关闭SSE连接需要发送yield "event: close\ndata: \n\n" 而不能只发送yield "event: close\n" …

菱形打印和十进制ip转二进制

1.菱形打印 用for循环 #!/bin/bashread -p "请输入菱形的大小&#xff1a;" num #打印向上的等腰三角形 for ((i1;i<num;i)) dofor ((jnum-1;j>i;j--))doecho -n " " #打印的是前面的空格donefor ((k1;k<2*i-1;k))doecho -n "*" #打印…

OneNote中的键盘快捷记录(超全)

本文列出了桌面 WindowsOneNote 的键盘快捷方式。 常用快捷方式 执行的操作 按 打开新的 OneNote 窗口。 CtrlM 创建 快速笔记。 CtrlShiftM 或 AltWindows 徽标键N 停靠 OneNote 窗口。 CtrlAltD 撤消前一个操作。 CtrlZ 如果可能&#xff0c;请重做上一个操作。 …

HCIE之BGP正则表达式(四)

BGP 一、AS-Path正则表达式数字| 等同于或的关系[]和.$ 一个字符串的结束_代表任意^一个字符串的开始()括号包围的是一个组合\ 转义字符* 零个或多个&#xff1f;零个或一个一个或多个 二、BGP对等体组三、BGP安全性 一、AS-Path正则表达式 正则表达式是按照一定模版匹配字符串…

《思考的快与慢》部分整理

认知心理学机位大洞见&#xff1a;人类大脑的默认模式是系统1&#xff0c;而不是系统2&#xff0c;人类大脑遵循“能不用脑&#xff0c;就不用脑”的原则。 系统1&#xff08;快系统&#xff09;对应着我们常说的直觉思维 系统2&#xff08;慢系统&#xff09;对应着理性思维…

Linux实验记录:使用RAID(独立冗余磁盘阵列)

前言&#xff1a; 本文是一篇关于Linux系统初学者的实验记录。 参考书籍&#xff1a;《Linux就该这么学》 实验环境&#xff1a; VmwareWorkStation 17——虚拟机软件 RedHatEnterpriseLinux[RHEL]8——红帽操作系统 目录 前言&#xff1a; 备注&#xff1a; 部署磁盘阵…

Vue路由

1. 路由的基本概念 1.1. 什么是路由&#xff1f; 路由的概念 路由的本质就是一种对应关系&#xff0c;比如说我们在url地址中输入我们要访问的url地址之后&#xff0c;浏览器要去请求这个url地址对应的资源。 那么url地址和真实的资源之间就有一种对应的关系&#xff0c;就是…

成功解决IndexError: index 0 is out of bounds for axis 1 with size 0.

成功解决IndexError: index 0 is out of bounds for axis 1 with size 0. &#x1f335;文章目录&#x1f335; &#x1f333;引言&#x1f333;&#x1f333;报错分析及解决方案&#x1f333;&#x1f333;参考文章&#x1f333;&#x1f333;结尾&#x1f333; &#x1f333;…

Cesium.js实现显示点位对应的自定义信息弹窗(数据面板)

零、相关技术选型&#xff1a; Vue2 Vuecli5 Cesium.js 天地图 一、需求说明 在使用2D地图&#xff08;天地图、高德地图等&#xff09;基于官方文档可以实现下面需求&#xff1a; 实现添加点位&#xff0c;并在点位附近显示对应的信息弹窗。 一般信息弹窗的显示方式有两种&am…

【数据结构1-2】二叉树

树形结构不仅能表示数据间的指向关系&#xff0c;还能表示出数据的层次关系&#xff0c;而有很明显的递归性质。因此&#xff0c;我们可以利用树的性质解决更多种类的问题。 但是在平常的使用中&#xff0c;我们并不需要使用这么复杂的结构&#xff0c;只需要建立一个包含int r…

分享一个POI封装的Excel解析工具

前言: 本来我已经很久没做java的项目了&#xff0c;最近手头的项目没啥事又被拉过去搞java了&#xff0c;但是看到这帮人写的代码&#xff0c;心凉了一截&#xff0c;写一个Excel的导入写的 都有很多问题&#xff0c; 写个示范吧&#xff1a; ExcelUtil util new ExcelUtil()&…

【极数系列】Flink配置参数如何获取?(06)

文章目录 gitee码云地址简介概述01 配置值来自.properties文件1.通过路径读取2.通过文件流读取3.通过IO流读取 02 配置值来自命令行03 配置来自系统属性04 注册以及使用全局变量05 Flink获取参数值Demo1.项目结构2.pom.xml文件如下3.配置文件4.项目主类5.运行查看相关日志 gite…

sqli-labs第一关

1.判断是否存在注入&#xff0c;注入是字符型还是数字型? ?id1 and 11 ?id1 and 12 因为输入and 11与and 12 回显正常&#xff0c;所以该地方不是数字型。 ?id1 ?id1-- 输入单引号后报错&#xff0c;在单引号后添加--恢复正常&#xff0c;说明存在字符注入 2.猜解SQL查…

【物联网】物联网技术的起源、发展、重点技术、应用场景与未来演进

物联网技术的起源、发展、重点技术、应用场景与未来演进 物联网&#xff08;IoT, Internet of Things&#xff09;是近年来科技领域中的热门话题&#xff0c;它将物理世界的各种“事物”与互联网连接起来&#xff0c;从而实现了数据的交换和通信。物联网技术的起源可追溯到20世…

【新书推荐】3.7 数据类型转换

本节必须掌握的知识点&#xff1a; 整型提升 浮点型和整型转换 浮点型转换 普通算术类型转换 示例十二 在实际项目应用过程中&#xff0c;我们通常会根据实际需要&#xff0c;对数据进行扩展和截取&#xff0c;我们称之为数据类型转换。对数据类型的转换需要遵循以下规则。 3.7…

毕业论文格式

官方格式 编号格式&#xff1a; 【论文标题设置】论文一二三级标题设置_哔哩哔哩_bilibili 编号和文字的间距太大怎么办&#xff1f;两招轻松解决&#xff01;

倒计时80天

1.J-兔子不会种树_浙江机电职业技术学院第八届新生亮相赛&#xff08;同步赛&#xff09; (nowcoder.com) /****** __----~~~~~~~~~~~------___* . . ~~//...... __--~ ~~…

前端——JavaScript

目录 文章目录 前言 一. JavaScript基础 1.JavaScript基本结构 2. JavaScript 执行过程 3. JavaScript 引入方式 二. JavaScript 语法 1.数据类型 2.变量 2.1 var 关键字定义变量 2.2 let 关键字定义变量 2.3 var 与 let 的区别 3.字符串 3.1定义字符串 3.2 字…

Java中this引用详解

文章目录 一、 为什么要有this引用二、什么是this引用三、this引用的特性四、如何用好this关键字 一、 为什么要有this引用 我们先看一段代码 class Data {public int year;public int month;public int day;public void setDay(int y,int m,int d) {year y;month m;day d…