什麼是流式輸出

流式輸出，也稱為流式傳輸，指的是服務器持續地將數據推送到客户端，而不是一次性發送完畢。這種模式下，連接一旦建立，服務器就能實時地發送更新給客户端。
人話講就是跟接口建立連接，只要接口不斷開，服務器就能實時的把信息發送給前端，AI流式輸出中，接口每次返回一小段話，前端拿到後流式渲染即可。
有點類似websocket，但SSE是單向的

fetch-event-source

有些框架可以直接對接OpenAI、DeepSeek等接口，如果無法直接對接，那麼一般是使用SSE技術。
Fetch Event Source 是一個用於處理服務器發送事件（Server-Sent Events, SSE）的 JavaScript 庫，並具有 Fetch API 中所提供的所有功能。
1、安裝依賴

npm install @microsoft/fetch-event-source

2、使用示例

// AbortController可手動終止SSE連接
const abortController = ref();

const startChat = async () => {
  // 你的自定義請求參數
  let params: any = {
    query: '', // 提問內容
    inputs: {}, // 查詢參數
    response_mode: 'streaming', 
    user: '', 
    conversation_id: '', // 會話id
    files: [], // 上傳的文件
    auto_generate_name: true // 是否自動生成標題
  };

  // 創建一個AbortController用於手動停止連接
  abortController.value = new AbortController();

  // 請求url
  let url = 'https://xxxxx.xxx.xxx/xxx/chat-messages'
  
  // 發送請求
  fetchEventSource(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `你的token`
    },
    openWhenHidden: true,
    body: JSON.stringify(params), // 你的自定義請求參數，序列化傳輸
    signal: abortController.value.signal, // 傳入abortController用於手動停止
   
    // 連接成功
    onopen: (response: any): any => {
      console.log('成功建立連接', response);
    },

    // 響應
    onmessage(event: any) {
      // 這裏可以根據接收到的流式數據更新到界面需要的地方
      console.log('接收流式接口響應的數據', event)
    },

    //  報錯
    onerror(err) {
      console.error('流式響應報錯', err);
    },

    // 服務器關閉連接
    onclose() {
      console.log('SSE關閉');
    }
  });
};

上面的示例就創建了一個基礎的SSE連接，但是需要注意，我們的流式接口發送後需要手動停止，比如你在遇到某些異常或者用户操作其它模塊需要手動終止SSE連接時，我們需要一個東西來控制，它就是AbortController構造函數。
當我們建立SSE連接時，將abortController.value.signal傳入signal屬性中用於控制接口連接。
當我們需要前端手動停止長連接的時候可以使用abortController.value.abort()來終止。

const stopChat = async () => {

  // 前端手動停止長連接
  if (abortController.value) {
    abortController.value.abort();
    abortController.value = null;
  }
};

當然這是前端層面的停止連接，我們還需要告訴後端，接口終止，如果有停止響應的接口可以調用，做到雙重保險。

const stopChat = async () => {
  // 調用接口停止
  if(currentMsg.value.task_id){
      await chatMessagesStopAPI(currentMsg.value.task_id, { user: account.value.userid });
  }

  // 前端手動停止長連接
  if (abortController.value) {
    abortController.value.abort();
    abortController.value = null;
  }
};

到這裏你的SSE就建立完成了，我們只需要onmessage這裏拿到後端返回的數據做流式渲染即可。

參考資料：
AbortController() 構造函數
什麼是流式輸出
Fetch Event Source接入