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

SSE基础配置与使用

news 2025/7/7 5:25:48

什么是 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)

如何使用 @microsoft/fetch-event-source

GPT 流式输出的实现思路

完整代码示例

总结

相关文章：

SSE基础配置与使用

Android -- 简易音乐播放器

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

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

【Docker】Docker配置远程访问

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

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

Docker 容器隔离关键技术：Seccomp

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

LinuxC高级

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

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

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

MyBatis的if标签的基本使用

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

【微服务】Nacos

5、定义与调用函数

Linux 网络编程之TCP套接字

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

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

龙虎榜——20250610

【网络】每天掌握一个Linux命令 - iftop

【配置 YOLOX 用于按目录分类的图片数据集】

OpenLayers 分屏对比(地图联动)

HDFS分布式存储 zookeeper

Python Ovito统计金刚石结构数量

数据库——redis

【iOS】 Block再学习

LeetCode - 148. 排序链表

【Axure高保真原型】图片列表添加和删除图片