在现代前端开发中，使用 Server-Sent Events (SSE) 实现流式数据传输，尤其是在像 GPT-3/4 这样的聊天流式输出中变得越来越流行。本文将详细介绍如何使用
@microsoft/fetch-event-source
发送 SSE 请求，并以 GPT 模型的流式输出为例，实现高效的数据传输与实时更新。
目录
1. 什么是 Server-Sent Events (SSE)
Server-Sent Events (SSE) 是一种轻量的服务器向客户端推送消息的机制，基于 HTTP 协议实现单向通信，适用于需要实时更新的场景。
与 WebSocket 不同，SSE 只允许服务器向客户端发送数据，因此其实现简单、开销小，特别适合应用在以下场景：
- 实时数据流更新
- 实时通知或消息推送
- GPT-3/4 等 AI 模型的流式输出
SSE 的优势
- 简单性：基于 HTTP，使用简单。
- 效率：相比 WebSocket，SSE 对于服务器资源的消耗较小。
- 浏览器支持：现代浏览器均支持 SSE。
- 自动重连：SSE 有内置的自动重连机制，连接断开时，浏览器会自动尝试恢复。
2. 如何使用
@microsoft/fetch-event-source
微软的
@microsoft/fetch-event-source
是一个库，用于通过 Fetch API 实现 SSE 的流式数据传输。它封装了请求发送、消息接收和连接恢复的逻辑，非常适合流式数据的处理。
安装库
首先，我们需要安装该库：
npminstall @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: 出现错误时的回调。
3. GPT 流式输出的实现思路
我们将通过 SSE 来实现 GPT 模型的流式输出效果。在 GPT 模型中，生成文本时每一小段文本都会逐步返回，类似实时聊天的效果。使用
@microsoft/fetch-event-source
，我们可以轻松处理这些逐步返回的数据，并实时展示在前端。
GPT 模型流式输出的步骤
- 客户端发送请求：发送 SSE 请求到后端。
- 服务端返回流式数据：GPT 模型逐步返回生成的文本，服务器将这些文本通过 SSE 推送给客户端。
- 前端实时更新显示：前端接收文本片段，并逐步更新界面。
4. 完整代码示例
以下是一个完整的示例，展示如何使用
@microsoft/fetch-event-source
实现 GPT 模型的流式输出：
前端实现
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>GPT 流式输出示例</title></head><body><h1>GPT 实时生成</h1><divid="gpt-output"></div><scripttype="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
来实现流式输出。
@RestControllerpublicclassGptController{@PostMapping("/gpt-stream")publicSseEmitterstreamGPT(@RequestBodyMap<String,String> request){SseEmitter emitter =newSseEmitter();newThread(()->{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;}}
运行效果
- 用户访问前端页面后，发送 SSE 请求。
- 服务端逐步返回生成的 GPT 文本，前端通过
onmessage实时接收并更新界面。 - 文本会像打字一样逐步显示在页面上，用户体验流畅。
5. 总结
本文详细介绍了如何使用
@microsoft/fetch-event-source
发送 SSE 请求，并通过实际的 GPT 流式输出场景演示了其强大的功能。通过 SSE 实现流式数据传输，能够带来更加实时的用户体验，适用于聊天系统、数据推送等场景。
@microsoft/fetch-event-source
是一个非常实用的库，在使用中极大简化了 SSE 的操作，开发者可以轻松集成并实现复杂的数据流处理。
本文转载自: https://blog.csdn.net/qq_42978535/article/details/142670403
版权归原作者 一只蜗牛儿 所有， 如有侵权，请联系我们删除。
版权归原作者 一只蜗牛儿 所有， 如有侵权，请联系我们删除。