在现代前端开发中，使用 Server-Sent Events (SSE) 实现流式数据传输，尤其是在像 GPT-3/4 如许的聊天流式输出中变得越来越流行。本文将详细介绍如何使用 @microsoft/fetch-event-source 发送 SSE 哀求，并以 GPT 模型的流式输出为例，实现高效的数据传输与实时更新。
目录
- 什么是 Server-Sent Events (SSE)
- 如何使用 @microsoft/fetch-event-source
- 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 的流式数据传输。它封装了哀求发送、消息接收和连接恢复的逻辑，非常适合流式数据的处理。
安装库
首先，我们需要安装该库：
- 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: 出现错误时的回调。
3. GPT 流式输出的实现思绪
我们将通过 SSE 来实现 GPT 模型的流式输出结果。在 GPT 模型中，天生文本时每一小段文本都会逐步返回，类似实时聊天的结果。使用 @microsoft/fetch-event-source，我们可以轻松处理这些逐步返回的数据，并实时展示在前端。
GPT 模型流式输出的步调
- 客户端发送哀求：发送 SSE 哀求到后端。
- 服务端返回流式数据：GPT 模型逐步返回天生的文本，服务器将这些文本通过 SSE 推送给客户端。
- 前端实时更新显示：前端接收文本片断，并逐步更新界面。
4. 完备代码示例
以下是一个完备的示例，展示如何使用 @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>
在服务端，假设我们使用 Spring Boot 来实现 GPT 模型的接口。我们通过返回 SseEmitter 来实现流式输出。
- @RestController
- public class GptController {
- @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;
- }
- }
- 用户访问前端页面后，发送 SSE 哀求。
- 服务端逐步返回天生的 GPT 文本，前端通过 onmessage 实时接收并更新界面。
- 文本会像打字一样逐步显示在页面上，用户体验流畅。
5. 总结
本文详细介绍了如何使用 @microsoft/fetch-event-source 发送 SSE 哀求，并通过实际的 GPT 流式输出场景演示了其强大的功能。通过 SSE 实现流式数据传输，能够带来更加实时的用户体验，适用于聊天系统、数据推送等场景。
@microsoft/fetch-event-source 是一个非常实用的库，在使用中极大简化了 SSE 的操作，开发者可以轻松集成并实现复杂的数据流处理。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
