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

SSE基础配置与使用

news 2026/3/26 7:35:52

什么是 Server-Sent Events (SSE)

**Server-Sent Events (SSE) **是一种轻量的服务器向客户端推送消息的机制，基于 HTTP 协议实现单向通信，适用于需要实时更新的场景。

与 WebSocket 不同，SSE 只允许服务器向客户端发送数据，因此其实现简单、开销小，特别适合应用在以下场景：

  • 实时数据流更新
  • 实时通知或消息推送
  • GPT-3/4 等 AI 模型的流式输出

SSE 的优势

  1. 简单性：基于 HTTP，使用简单。
  2. 效率：相比 WebSocket，SSE 对于服务器资源的消耗较小。
  3. 浏览器支持：现代浏览器均支持 SSE。
  4. 自动重连：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 模型流式输出的步骤

  1. 客户端发送请求：发送 SSE 请求到后端。
  2. 服务端返回流式数据：GPT 模型逐步返回生成的文本，服务器将这些文本通过 SSE 推送给客户端。
  3. 前端实时更新显示：前端接收文本片段，并逐步更新界面。

完整代码示例

以下是一个完整的示例，展示如何使用 @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) **是一种轻量的服务器向客户端推送消息的机制&#xff0c;基于 HTTP 协议实现单向通信&#xff0c;适用于需要实时更新的场景。 与 WebSocket 不同&#xff0c;SSE 只允许服务器向客户端发送数据&#xff0c;因此…...

编程日记 2024/12/1 15:54:14

Android -- 简易音乐播放器

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

编程日记 2024/12/1 15:52:12

【开源免费】基于Vue和SpringBoot的技术交流分享平台（附论文）

博主说明&#xff1a;本文项目编号 T 053 &#xff0c;文末自助获取源码 \color{red}{T053&#xff0c;文末自助获取源码} T053&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析…...

编程日记 2024/12/1 15:51:11

Python异步编程新写法：asyncio模块的最新实践

Python异步编程新写法&#xff1a;asyncio模块的最新实践 引言1. 异步编程基础2. 旧写法的问题3. 最新的写法4. 代码解析5. 最佳实践6. 总结7. 参考资料 引言 在现代编程中&#xff0c;异步编程已经成为提高程序性能和响应能力的重要手段。Python的asyncio模块为开发者提供了一…...

编程日记 2024/12/1 15:50:10

【Docker】Docker配置远程访问

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

编程日记 2024/12/1 15:49:09

网络安全入门之网络安全工具分享-含初期所有工具(附百度网盘链接)

网络安全基础工具 抓包工具 burpsuite 这是一款十分经典的抓包改包工具&#xff0c;在全球范围内使用十分广泛&#xff0c;并且其内置各种插件&#xff0c;具有爆破&#xff0c;自动识别验证码&#xff0c;加解密发包等多种功能 专业版破解网盘链接&#xff1a; 通过百度网…...

编程日记 2024/12/1 15:47:06

玩转 uni-app 静态资源 static 目录的条件编译

一. 前言 老生常谈&#xff0c;了解 uni-app 的开发都知道&#xff0c;uni-app 可以同时支持编译到多个平台&#xff0c;如小程序、H5、移动端 App 等。它的多端编译能力是 uni-app 的一大特点&#xff0c;让开发者可以使用同一套代码基于 Vue.js 的语法编写程序&#xff0c;然…...

编程日记 2024/12/1 15:46:04

Docker 容器隔离关键技术：Seccomp

Docker 容器隔离关键技术&#xff1a;Seccomp 在 Docker 容器中&#xff0c;Seccomp&#xff08;Secure Computing Mode&#xff09; 是一种内核安全机制&#xff0c;用来限制容器内的程序可以调用哪些系统调用&#xff08;Syscalls&#xff09;。通过列清单的方式&#xff0c…...

编程日记 2024/12/1 15:45:02

【大模型】深度解析 NLP 模型5大评估指标及 应用案例：从 BLEU、ROUGE、PPL 到METEOR、BERTScore

在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;无论是机器翻译、文本生成&#xff0c;还是问答系统开发&#xff0c;模型性能评估指标始终是开发者绕不开的工具。BLEU、ROUGE、PPL&#xff08;困惑度&#xff09;、METEOR 和 BERTScore 是五个最具代表性的指标&am…...

编程日记 2024/12/1 15:44:00

LinuxC高级

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

编程日记 2024/12/1 15:41:58

实现PDF文档加密,访问需要密码

01. 背景 今天下午老板神秘兮兮的来问我&#xff0c;能不能做个文档加密功能&#xff0c;就是那种用户下载打开需要密码才能打开的那种效果。boss都发话了&#xff0c;那必须可以。 需求&#xff1a;将pdf文档经过加密处理&#xff0c;客户下载pdf文档&#xff0c;打开文档需要…...

编程日记 2024/12/1 15:40:56

LangChain——加载知识库文本文档 PDF文档

文档加载 这涵盖了如何加载目录中的所有文档。 在底层&#xff0c;默认情况下使用 UnstructedLoader。需要安装依赖 pip install unstructuredpython导入方式 from langchain_community.document_loaders import DirectoryLoader我们可以使用 glob 参数来控制加载特定类型文…...

编程日记 2024/12/1 15:39:54

深度学习2：从零开始掌握PyTorch：数据操作不再是难题

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

编程日记 2024/12/1 15:38:53

MyBatis的if标签的基本使用

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

编程日记 2024/12/1 15:37:50

【Azure Cache for Redis】Redis的导出页面无法配置Storage SAS时通过az cli来完成

问题描述 在Azure Redis的导出页面&#xff0c;突然不能配置Storage Account的SAS作为授权方式。 image.png 那么是否可以通过AZ CLI或者是Powershell来实现SAS的配置呢&#xff1f; 问题解答 可以的。使用 az redis export 可以实现 az redis export --container --prefix[--a…...

编程日记 2024/12/1 15:35:48

【微服务】Nacos

一、安装 1、官网地址&#xff1a;https://nacos.io/download/nacos-server/ 2、启动&#xff1a;找到bin目录下的startup.cmd双击启动&#xff0c;或者打开一个命令窗口输入&#xff1a; startup.cmd -m standalone双击启动后如下&#xff1a;可以访问控制台地址 访问后的…...

编程日记 2024/12/1 15:32:45

5、定义与调用函数

大家好，欢迎来到Python函数入门课程！ 在编程中，函数就像一个可以重复使用的代码块，它接受输入（参数），执行特定的任务，并可能返回一个结果。想象一下，函数就像一个厨房里的搅拌机，你放入水果（参数），按下按钮（调用函数），它就会帮你制作出美味的果汁（返回值）。…...

编程日记 2024/12/1 15:31:43

Linux 网络编程之TCP套接字

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

编程日记 2024/12/1 15:30:42

前海湾地铁的腾通数码大厦背后的临时免费停车点探寻

临时免费停车点&#xff1a;前海湾地铁的腾通数码大厦背后的桂湾大街&#xff0c;目前看不仅整条桂湾大街停了​车&#xff0c;而且还有工地餐点。可能是这个区域还是半工地状态&#xff0c;故暂时还不会有​罚单的情况出现。 中建三局腾讯数码大厦项目部A栋 广东省深圳市南山…...

编程日记 2024/12/1 15:28:39

OpenCV相机标定与3D重建(7)鱼眼镜头立体校正的函数stereoRectify()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 cv::fisheye::stereoRectify 是 OpenCV 中用于鱼眼镜头立体校正的函数。该函数计算两个相机之间的校正变换&#xff0c;使得从两个相机拍摄的图像…...

编程日记 2024/12/1 15:26:37

用Python处理SEED-VIG脑电数据：从PERCLOS标签到EEG特征提取的完整流程

用Python处理SEED-VIG脑电数据&#xff1a;从PERCLOS标签到EEG特征提取的完整流程 在神经工程和驾驶安全研究中&#xff0c;SEED-VIG数据集因其高质量的多模态生理信号采集而备受关注。这个包含EEG、EOG和眼动追踪数据的资源&#xff0c;为疲劳检测算法开发提供了宝贵素材。本文…...

编程新知 2026/3/26 6:31:44

SDMatte镜像轻量化：去除冗余依赖、多阶段构建、镜像体积压缩至3.2GB

SDMatte镜像轻量化&#xff1a;去除冗余依赖、多阶段构建、镜像体积压缩至3.2GB 1. 项目背景与挑战 SDMatte是一款面向高质量图像抠图的AI模型&#xff0c;特别擅长处理复杂边缘和半透明物体的抠图任务。在电商、设计、内容创作等领域有着广泛的应用场景。然而&#xff0c;原…...

编程新知 2026/3/26 6:31:43

计算机毕业设计springboot基于的养老平台的设计与实现 SpringBoot架构下智慧养老综合服务系统的设计与实现 基于Java的社区养老数字化管理平台开发

计算机毕业设计springboot基于的养老平台的设计与实现&#xff08;配套有源码 程序 mysql数据库 论文&#xff09; 本套源码可以在文本联xi,先看具体系统功能演示视频领取&#xff0c;可分享源码参考。我国正加速步入老龄化社会&#xff0c;老年人口规模持续扩大&#xff0c;传…...

编程新知 2026/3/26 6:29:43

HunyuanVideo-Foley惊艳效果：AI生成的赛博朋克城市雨夜环境音效

HunyuanVideo-Foley惊艳效果&#xff1a;AI生成的赛博朋克城市雨夜环境音效 1. 效果展示&#xff1a;赛博朋克音效的沉浸式体验 HunyuanVideo-Foley 私有部署镜像带来的音效生成能力&#xff0c;让AI创作达到了专业音频工程师的水准。我们以"赛博朋克城市雨夜"为场…...

编程新知 2026/3/26 5:57:29

百川2-13B量化版调优指南：提升OpenClaw任务成功率的关键参数

百川2-13B量化版调优指南&#xff1a;提升OpenClaw任务成功率的关键参数 1. 为什么需要专门调优百川模型参数&#xff1f; 第一次用OpenClaw对接百川2-13B量化版时&#xff0c;我遇到了典型的"自动化尴尬"——明明是个简单的文件整理任务&#xff0c;AI却总在奇怪的…...

编程新知 2026/3/26 3:57:23

动态感受野选择：LSKNet在遥感目标检测中的创新应用

1. 遥感目标检测的挑战与机遇 遥感图像中的目标检测一直是计算机视觉领域的重要研究方向。与常规的自然图像不同&#xff0c;遥感图像通常从高空俯拍&#xff0c;具有覆盖范围广、分辨率高、目标尺寸差异大等特点。这就带来了几个独特的挑战&#xff1a;首先是微小目标检测问题…...

编程新知 2026/3/26 3:49:21

OpenClaw调试技巧：百川2-13B任务失败时的6种排查方法

OpenClaw调试技巧&#xff1a;百川2-13B任务失败时的6种排查方法 1. 为什么需要专门的调试方法&#xff1f; 上周我让OpenClaw自动整理一批会议录音转文字稿&#xff0c;结果凌晨3点收到飞书报警——任务卡在"正在分析关键内容"阶段。第二天检查发现&#xff0c;百…...

编程新知 2026/3/26 3:15:14

OpenClaw飞书机器人：GLM-4.7-Flash实现智能问答助手

OpenClaw飞书机器人&#xff1a;GLM-4.7-Flash实现智能问答助手 1. 为什么选择OpenClaw飞书GLM组合 去年我接手了一个技术文档整理项目&#xff0c;每天需要处理上百条来自不同渠道的技术咨询。手动回复效率低下&#xff0c;而公有云上的智能客服方案又存在数据安全顾虑。直到…...

编程新知 2026/3/26 3:11:13

毕设代码二手房数据实战：从爬取到可视化的一站式工程实现

最近在帮学弟学妹看计算机专业的毕业设计&#xff0c;发现“二手房数据分析”真是个热门选题。想法都挺好&#xff0c;但一到动手实现&#xff0c;很多人就卡在了数据上&#xff1a;要么网站反爬太严数据抓不下来&#xff0c;要么抓下来的数据乱七八糟没法用&#xff0c;好不容…...

编程新知 2026/3/26 3:03:10

Chrome WebRTC 性能优化实战：从延迟瓶颈到高效传输

最近在做一个实时视频会议项目&#xff0c;用到了 Chrome 的 WebRTC 能力。功能跑通后&#xff0c;一上真实网络环境&#xff0c;问题就来了&#xff1a;弱网下卡成PPT&#xff0c;高并发时延迟飙升&#xff0c;用户体验一言难尽。经过几轮深度折腾&#xff0c;总算摸到了一些门…...

编程新知 2026/3/26 2:04:59