SSE基础配置与使用
什么是 Server-Sent Events (SSE)
**Server-Sent Events (SSE) **是一种轻量的服务器向客户端推送消息的机制,基于 HTTP 协议实现单向通信,适用于需要实时更新的场景。
与 WebSocket 不同,SSE 只允许服务器向客户端发送数据,因此其实现简单、开销小,特别适合应用在以下场景:
- 实时数据流更新
- 实时通知或消息推送
- GPT-3/4 等 AI 模型的流式输出
SSE 的优势
- 简单性:基于 HTTP,使用简单。
- 效率:相比 WebSocket,SSE 对于服务器资源的消耗较小。
- 浏览器支持:现代浏览器均支持 SSE。
- 自动重连:SSE 有内置的自动重连机制,连接断开时,浏览器会自动尝试恢复。
如何使用 @microsoft/fetch-event-source
微软的 @microsoft/fetch-event-source 是一个库,用于通过 Fetch API 实现 SSE 的流式数据传输。它封装了请求发送、消息接收和连接恢复的逻辑,非常适合流式数据的处理。
安装库
首先,我们需要安装该库:
npm install @microsoft/fetch-event-source
基本用法
在前端项目中引入 @microsoft/fetch-event-source 后,使用它来发送 SSE 请求并处理流式数据。
import { fetchEventSource } from '@microsoft/fetch-event-source';fetchEventSource('http://your-api-endpoint.com/stream', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify({ query: '你的查询' }),onmessage(ev) {console.log('Received message:', ev.data);// 这里可以根据接收到的流式数据更新前端界面},onclose() {console.log('Connection closed by server');},onerror(err) {console.error('Error received:', err);},
});
主要参数
- method: HTTP 方法,通常为 POST。
- headers: 请求头信息,通常需要指定 Content-Type 为 application/json。
- body: 请求体内容,可以根据需求传递给后端。
- onmessage: 处理流式消息的回调函数,每当服务器发送一条消息时会调用。
- onclose: 服务器关闭连接时的回调。
- onerror: 出现错误时的回调。
GPT 流式输出的实现思路
我们将通过 SSE 来实现 GPT 模型的流式输出效果。在 GPT 模型中,生成文本时每一小段文本都会逐步返回,类似实时聊天的效果。使用 @microsoft/fetch-event-source,我们可以轻松处理这些逐步返回的数据,并实时展示在前端。
GPT 模型流式输出的步骤
- 客户端发送请求:发送 SSE 请求到后端。
- 服务端返回流式数据:GPT 模型逐步返回生成的文本,服务器将这些文本通过 SSE 推送给客户端。
- 前端实时更新显示:前端接收文本片段,并逐步更新界面。
完整代码示例
以下是一个完整的示例,展示如何使用 @microsoft/fetch-event-source 实现 GPT 模型的流式输出:
前端实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>GPT 流式输出示例</title>
</head>
<body><h1>GPT 实时生成</h1>
<div id="gpt-output"></div><script type="module">import { fetchEventSource } from '@microsoft/fetch-event-source';const outputDiv = document.getElementById('gpt-output');// 发送 SSE 请求fetchEventSource('http://localhost:8080/gpt-stream', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify({ query: '你的问题是什么?' }),onmessage(ev) {// 实时接收数据,并将其添加到页面outputDiv.innerText += ev.data;},onclose() {console.log('连接关闭');},onerror(err) {console.error('连接错误', err);}});
</script></body>
</html>
后端实现(假设使用 Java 和 Spring Boot)
在服务端,假设我们使用 Spring Boot 来实现 GPT 模型的接口。我们通过返回 SseEmitter 来实现流式输出。
@PostMapping("/gpt-stream")
public SseEmitter streamGPT(@RequestBody Map<String, String> request) {SseEmitter emitter = new SseEmitter();new Thread(() -> {try {String query = request.get("query");// 模拟 GPT 模型逐步生成文本for (int i = 0; i < query.length(); i++) {emitter.send(query.charAt(i));Thread.sleep(500); // 模拟延迟}emitter.complete();} catch (Exception e) {emitter.completeWithError(e);}}).start();return emitter;
}
总结
本文详细介绍了如何使用 @microsoft/fetch-event-source 发送 SSE 请求,并通过实际的 GPT 流式输出场景演示了其强大的功能。通过 SSE 实现流式数据传输,能够带来更加实时的用户体验,适用于聊天系统、数据推送等场景。
@microsoft/fetch-event-source 是一个非常实用的库,在使用中极大简化了 SSE 的操作,开发者可以轻松集成并实现复杂的数据流处理。
相关文章:
SSE基础配置与使用
什么是 Server-Sent Events (SSE) **Server-Sent Events (SSE) **是一种轻量的服务器向客户端推送消息的机制,基于 HTTP 协议实现单向通信,适用于需要实时更新的场景。 与 WebSocket 不同,SSE 只允许服务器向客户端发送数据,因此…...

Android -- 简易音乐播放器
Android – 简易音乐播放器 播放器功能:* 1. 播放模式:单曲、列表循环、列表随机;* 2. 后台播放(单例模式);* 3. 多位置同步状态回调;处理模块:* 1. 提取文件信息:音频文…...

【开源免费】基于Vue和SpringBoot的技术交流分享平台(附论文)
博主说明:本文项目编号 T 053 ,文末自助获取源码 \color{red}{T053,文末自助获取源码} T053,文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析…...
Python异步编程新写法:asyncio模块的最新实践
Python异步编程新写法:asyncio模块的最新实践 引言1. 异步编程基础2. 旧写法的问题3. 最新的写法4. 代码解析5. 最佳实践6. 总结7. 参考资料 引言 在现代编程中,异步编程已经成为提高程序性能和响应能力的重要手段。Python的asyncio模块为开发者提供了一…...

【Docker】Docker配置远程访问
配置Docker的远程访问,你需要按照以下步骤进行操作: 1. 在Docker宿主机上配置Docker守护进程监听TCP端口 Docker守护进程默认只监听UNIX套接字,要实现远程访问,需要修改配置以监听TCP端口。 方法一:修改Docker服务…...

网络安全入门之网络安全工具分享-含初期所有工具(附百度网盘链接)
网络安全基础工具 抓包工具 burpsuite 这是一款十分经典的抓包改包工具,在全球范围内使用十分广泛,并且其内置各种插件,具有爆破,自动识别验证码,加解密发包等多种功能 专业版破解网盘链接: 通过百度网…...

玩转 uni-app 静态资源 static 目录的条件编译
一. 前言 老生常谈,了解 uni-app 的开发都知道,uni-app 可以同时支持编译到多个平台,如小程序、H5、移动端 App 等。它的多端编译能力是 uni-app 的一大特点,让开发者可以使用同一套代码基于 Vue.js 的语法编写程序,然…...
Docker 容器隔离关键技术:Seccomp
Docker 容器隔离关键技术:Seccomp 在 Docker 容器中,Seccomp(Secure Computing Mode) 是一种内核安全机制,用来限制容器内的程序可以调用哪些系统调用(Syscalls)。通过列清单的方式,…...

【大模型】深度解析 NLP 模型5大评估指标及 应用案例:从 BLEU、ROUGE、PPL 到METEOR、BERTScore
在自然语言处理(NLP)领域,无论是机器翻译、文本生成,还是问答系统开发,模型性能评估指标始终是开发者绕不开的工具。BLEU、ROUGE、PPL(困惑度)、METEOR 和 BERTScore 是五个最具代表性的指标&am…...

LinuxC高级
gdb调试工具 gdb调试的作用 gdb用于调试代码中逻辑错误,而非语法错误 gdb调试流程 生成可以使用gdb调试的执行文件 gcc -g xxx.c ---> 生成的文件可以使用gdb调试 进入gdb工具 gdb 可执行文件 ---> 使用gdb工具开始调试可执行文件 r/run:运行代码 …...

实现PDF文档加密,访问需要密码
01. 背景 今天下午老板神秘兮兮的来问我,能不能做个文档加密功能,就是那种用户下载打开需要密码才能打开的那种效果。boss都发话了,那必须可以。 需求:将pdf文档经过加密处理,客户下载pdf文档,打开文档需要…...
LangChain——加载知识库文本文档 PDF文档
文档加载 这涵盖了如何加载目录中的所有文档。 在底层,默认情况下使用 UnstructedLoader。需要安装依赖 pip install unstructuredpython导入方式 from langchain_community.document_loaders import DirectoryLoader我们可以使用 glob 参数来控制加载特定类型文…...

深度学习2:从零开始掌握PyTorch:数据操作不再是难题
文章目录 一、导读二、张量的定义与基本操作三、广播机制四、索引与切片五、内存管理六、与其他Python对象的转换本文是经过严格查阅相关权威文献和资料,形成的专业的可靠的内容。全文数据都有据可依,可回溯。特别申明:数据和资料已获得授权。本文内容,不涉及任何偏颇观点,…...

MyBatis的if标签的基本使用
在MyBatis框架中,if标签用于在构建SQL语句时,根据参数条件判断的结果,动态地选择加入或不加where条件中。 一 常见使用 在使用MyBatis处理查询逻辑的时候,常用的是判断一些参数是否为空,列举常用的几种情况展示 1.1…...

【Azure Cache for Redis】Redis的导出页面无法配置Storage SAS时通过az cli来完成
问题描述 在Azure Redis的导出页面,突然不能配置Storage Account的SAS作为授权方式。 image.png 那么是否可以通过AZ CLI或者是Powershell来实现SAS的配置呢? 问题解答 可以的。使用 az redis export 可以实现 az redis export --container --prefix[--a…...

【微服务】Nacos
一、安装 1、官网地址:https://nacos.io/download/nacos-server/ 2、启动:找到bin目录下的startup.cmd双击启动,或者打开一个命令窗口输入: startup.cmd -m standalone双击启动后如下:可以访问控制台地址 访问后的…...
5、定义与调用函数
大家好,欢迎来到Python函数入门课程! 在编程中,函数就像一个可以重复使用的代码块,它接受输入(参数),执行特定的任务,并可能返回一个结果。想象一下,函数就像一个厨房里的搅拌机,你放入水果(参数),按下按钮(调用函数),它就会帮你制作出美味的果汁(返回值)。…...

Linux 网络编程之TCP套接字
前言 上一期我们对UDP套接字进行了介绍并实现了简单的UDP网络程序,本期我们来介绍TCP套接字,以及实现简单的TCP网络程序! 🎉目录 前言 1、TCP 套接字API详解 1.1 socket 1.2 bind 1.3 listen 1.4 accept 1.5 connect 2、…...

前海湾地铁的腾通数码大厦背后的临时免费停车点探寻
临时免费停车点:前海湾地铁的腾通数码大厦背后的桂湾大街,目前看不仅整条桂湾大街停了车,而且还有工地餐点。可能是这个区域还是半工地状态,故暂时还不会有罚单的情况出现。 中建三局腾讯数码大厦项目部A栋 广东省深圳市南山…...
OpenCV相机标定与3D重建(7)鱼眼镜头立体校正的函数stereoRectify()的使用
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 cv::fisheye::stereoRectify 是 OpenCV 中用于鱼眼镜头立体校正的函数。该函数计算两个相机之间的校正变换,使得从两个相机拍摄的图像…...

龙虎榜——20250610
上证指数放量收阴线,个股多数下跌,盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型,指数短线有调整的需求,大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的:御银股份、雄帝科技 驱动…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中,iftop是网络管理的得力助手,能实时监控网络流量、连接情况等,帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多,如何一步解决,采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集(每个目录代表一个类别,目录下是该类别的所有图片),你需要进行以下配置步骤&#x…...
OpenLayers 分屏对比(地图联动)
注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能,和卷帘图层不一样的是,分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

HDFS分布式存储 zookeeper
hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架,允许使用简单的变成模型跨计算机对大型集群进行分布式处理(1.海量的数据存储 2.海量数据的计算)Hadoop核心组件 hdfs(分布式文件存储系统)&a…...

Python Ovito统计金刚石结构数量
大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...
数据库——redis
一、Redis 介绍 1. 概述 Redis(Remote Dictionary Server)是一个开源的、高性能的内存键值数据库系统,具有以下核心特点: 内存存储架构:数据主要存储在内存中,提供微秒级的读写响应 多数据结构支持&…...

【iOS】 Block再学习
iOS Block再学习 文章目录 iOS Block再学习前言Block的三种类型__ NSGlobalBlock____ NSMallocBlock____ NSStackBlock__小结 Block底层分析Block的结构捕获自由变量捕获全局(静态)变量捕获静态变量__block修饰符forwarding指针 Block的copy时机block作为函数返回值将block赋给…...

LeetCode - 148. 排序链表
目录 题目 思路 基本情况检查 复杂度分析 执行示例 读者可能出的错误 正确的写法 题目 148. 排序链表 - 力扣(LeetCode) 思路 链表归并排序采用"分治"的策略,主要分为三个步骤: 分割:将链表从中间…...

【Axure高保真原型】图片列表添加和删除图片
今天和大家分享图片列表添加和删除图片的原型模板,效果包括: 点击图片列表的加号可以显示图片选择器,选择里面的图片; 选择图片后点击添加按钮,可以将该图片添加到图片列表; 鼠标移入图片列表的图片&…...