大模型流式数据前端实现

前端接收流式数据可以通过多种方式实现，常见方法包括 Server-Sent Events (SSE)、WebSocket 和 Fetch API + Streams API。

Server-Sent Events (SSE)

SSE 是一种基于 HTTP 协议的单向通信方式，适用于实时日志、股票行情等场景。

步骤：

1. 创建 EventSource 实例连接服务端。
2. 监听 onmessage 或自定义事件接收数据。
3. 处理错误并自动重连。

代码示例：

const eventSource = new EventSource('/api/stream');

// 接收消息

eventSource.onmessage = (event) => {

console.log('New data:', event.data);

};

// 自定义事件

eventSource.addEventListener('customEvent', (e) => {

console.log('Custom data:', e.data);

});

// 错误处理

eventSource.onerror = () => {

console.error('Stream failed');

};

服务端要求：

• 响应头需设置 Content-Type: text/event-stream。
• 数据格式为 data: {内容}\n\n。

WebSocket

WebSocket 支持全双工通信，适合高频双向数据交换，如在线聊天或实时游戏。

步骤：

1. 创建 WebSocket 实例连接服务端。
2. 监听 onmessage 接收数据。
3. 使用 send 方法发送消息。

代码示例：

const socket = new WebSocket('wss://api.example.com/stream');

socket.onopen = () => {

socket.send('subscribe:stocks'); // 发送订阅指令

};

socket.onmessage = (event) => {

const data = JSON.parse(event.data);

console.log('Real-time data:', data);

};

socket.onclose = () => {

console.log('Connection closed');
};

服务端要求：

• 使用 WebSocket 协议（ws:// 或 wss://）。
• 支持二进制和文本数据传输。

Fetch API + Streams API

此方法适合处理大文件或逐块加载数据，提供对流式数据的精细控制。

步骤：

1. 使用 fetch 获取流式响应。
2. 调用 body.getReader() 分块读取数据。
3. 解码并处理每个数据块。

前端数据的返回本来就是流式返回的，不过通常情况下我们需要的是完整的响应体。如果需要类似于 ChatGPT 那种流式的返回，只需要将请求的响应体等待去掉就可以。要理解下面代码的两次await的作用：

async function getRes(content) {
  const res = await fetch(url, {...});
  // 从响应中提取 JSON 对象                             
  const data = await res.json();
  return data;
}

这里的第一个await是在等待服务器的响应，也就是服务器响应头到达客户端后，第一个await就会结束。

第二个await是在等待所有的响应体到达。

如果要流式读取，只需要修改第二个await的处理：

const url = 'http://jsonplaceholder.typicode.com/posts';

async function getResponse() {
    const resp = await fetch(url, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        }
    });
    const reader = resp.body.getReader();
    const decoder = new TextDecoder();
	// 循环来完成所有流数据的读取
    while (true) {
        // 读取数据流的第一块数据，done表示数据流是否完成，value表示当前的数
        const { done,value} = await reader.read();
        if (done) break;
        const txt = decoder.decode(value);
        console.log(done);
        console.log(txt);
    }
}

getResponse();

现成库 @microsoft/fetch-event-source

@microsoft/fetch-event-source (opens new window)是一个用于处理服务器发送事件(Server-Sent Events, SSE)的客户端库，通过 fetch 和 EventSource API 实现。它提供了一个可靠的方式来建立与服务器的长连接，接收实时更新，特别适用于流式 API 响应、实时通知和数据流等场景。

1. 核心实现基础：
   • 该库基于浏览器原生的 fetch API 实现
   • 兼容并扩展了 HTML5 的 EventSource 接口
   • 提供了比原生 EventSource 更强大的功能
2. 主要特性：
   • 支持自定义 headers（原生 EventSource 不支持）
   • 支持 HTTP 方法和请求体（原生 EventSource 仅支持 GET）
   • 提供更完善的错误处理和重连机制
   • 支持取消请求（通过 AbortController）
3. 相对于原生方案的优势：
   • 原生 EventSource 有较多限制，如不能设置 headers、只支持 GET 请求等
   • @microsoft/fetch-event-source 解决了这些限制，同时保持了 EventSource 的易用性

基本用法

import { fetchEventSource } from '@microsoft/fetch-event-source';

// 建立连接
fetchEventSource('/api/events', {
  method: 'GET',
  headers: {
    'Accept': 'text/event-stream',
    // 可以添加其他请求头，如认证信息
  },
  onmessage(event) {
    // 处理接收到的消息
    console.log(event.data);
  },
  onopen(response) {
    // 连接打开时的回调
    console.log('Connection opened:', response.status);
  },
  onerror(error) {
    // 错误处理
    console.error('Error:', error);
  },
  onclose() {
    // 连接关闭时的回调
    console.log('Connection closed');
  }
});