文章介绍了在开发智能问答平台时，从全量返回模式转向流式输出接口的关键性转变。早期平台因不支持流式输出导致用户体验不佳，接入流式接口后，通过@microsoft/fetch-event-source库实现了服务器发送事件(SSE)的实时数据流传输。前端通过累加响应字符串，并结合ReactMarkdown组件进行展示，有效地解决了AI内容在格式识别（如代码块）方面的挑战，显著提升了用户交互的流畅性和效率。

💡 早期智能问答平台全量返回模式导致用户体验不佳，无法满足实时交互需求，因此引入流式输出接口成为关键优化点。

🌐 @microsoft/fetch-event-source库是实现服务器发送事件(SSE)的核心工具，它能够建立稳定的长连接，接收服务器实时推送的数据流，非常适合流式API场景。

🔄 前端通过该库接收服务端消息，采用累加响应字符串的方式，并在一定时间间隔后更新内容，最终利用ReactMarkdown组件进行视图展示，确保AI内容的精准识别和格式化。

📝 将AI内容转换为Markdown格式是提升内容块（如代码块）识别准确性的重要手段，这使得前端能够更有效地处理和呈现结构化信息。

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

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

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 格式，才能更精准的识别内容块的类别，或者代码块等。