在现代前端开发中，使用 Server-Sent Events (SSE) 实现流式数据传输，尤其是在像 GPT-3/4 这样的聊天流式输出中变得越来越流行。本文将详细介绍如何使用 @microsoft/fetch-event-source 发送 SSE 请求，并以 GPT 模型的流式输出为例，实现高效的数据传输与实时更新。

目录

1. 什么是 Server-Sent Events (SSE)
2. 如何使用 @microsoft/fetch-event-source
3. GPT 流式输出的实现思路
4. 完整代码示例
5. 总结

1. 什么是 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 有内置的自动重连机制，连接断开时，浏览器会自动尝试恢复。

  ---

  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 模型流式输出的步骤

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

    ---

    4. 完整代码示例

    以下是一个完整的示例，展示如何使用 @microsoft/fetch-event-source 实现 GPT 模型的流式输出：

    前端实现

    
    
        
        
        GPT 流式输出示例
    
    
    GPT 实时生成
    
    
        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);
            }
        });
    
    
    
    

    后端实现（假设使用 Java 和 Spring Boot）

    在服务端，假设我们使用 Spring Boot 来实现 GPT 模型的接口。我们通过返回 SseEmitter 来实现流式输出。

    @RestController
    public class GptController {
        @PostMapping("/gpt-stream")
        public SseEmitter streamGPT(@RequestBody Map request) {
            SseEmitter emitter = new SseEmitter();
            new Thread(() -> {
                try {
                    String query = request.get("query");
                    // 模拟 GPT 模型逐步生成文本
                    for (int i = 0; i  
    运行效果
     
    

    • 用户访问前端页面后，发送 SSE 请求。
    • 服务端逐步返回生成的 GPT 文本，前端通过 onmessage 实时接收并更新界面。
    • 文本会像打字一样逐步显示在页面上，用户体验流畅。

      ---

      5. 总结

      本文详细介绍了如何使用 @microsoft/fetch-event-source 发送 SSE 请求，并通过实际的 GPT 流式输出场景演示了其强大的功能。通过 SSE 实现流式数据传输，能够带来更加实时的用户体验，适用于聊天系统、数据推送等场景。

      @microsoft/fetch-event-source 是一个非常实用的库，在使用中极大简化了 SSE 的操作，开发者可以轻松集成并实现复杂的数据流处理。

      
      （图片来源网络，侵删）
      
      （图片来源网络，侵删）
      
      （图片来源网络，侵删）