ai 的流式输出是怎么做的呢

原则猫2025-08-07 17:35

公司早期，我在开发智能问答平台，早期是全量返回，并不支持，流式输出，整体的内部用户体验比较差，因此接入了流式接口。

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

js 复制代码

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');
  }
});

当建立链接后，会不断监听到服务端消息传递，前端这里先不断累加响应字符串，然后，一定时间间隔更新内容状态，最终通过reactmarkdown 来进行展示相关的视图。ai 内容，一般只有转换为markdown 格式，才能更精准的识别内容块的类别，或者代码块等。