什么是 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 的操作，开发者可以轻松集成并实现复杂的数据流处理。