重要的事情前面說，如果你使用的是vue，那么為了可以流式輸出，必須關(guān)閉下面這個東西，這是我踩坑2個小時發(fā)現(xiàn)的： compress: false，這個必須設(shè)置，不然接受服務(wù)端響應(yīng)還是一大段內(nèi)容返回。

下面介紹一下EventSource

EventSource是HTML5中的一個API，用于實現(xiàn)服務(wù)器端的事件驅(qū)動推送SSE（Server-Sent Events）。

它允許服務(wù)器實時地向客戶端發(fā)送事件和數(shù)據(jù)，而不需要客戶端不斷地向服務(wù)器發(fā)起請求。

EventSource的特點和優(yōu)勢包括

• 1. 簡單易用：使用EventSource只需要幾行代碼即可建立連接和監(jiān)聽事件。
• 2. 自動重連：EventSource會自動嘗試重新連接服務(wù)器，即使網(wǎng)絡(luò)斷開或服務(wù)器重啟，客戶端也會自動恢復(fù)連接。
• 3. 單向通信：EventSource只支持服務(wù)器向客戶端的單向通信，不支持客戶端向服務(wù)器發(fā)送數(shù)據(jù)，因此更適合服務(wù)器主動推送信息給客戶端。
• 4. 長連接：EventSource使用長連接，減少了頻繁的請求和響應(yīng)，降低了網(wǎng)絡(luò)開銷和服務(wù)器負載。

但是EventSource有一個缺點就是沒法設(shè)置請求頭信息和請求方式，EventSource只支持Get請求，我翻了一下CSDN找到了解決方案，使用FetchEventSource。

FetchEventSource 是一個 JavaScript 庫，用于從服務(wù)器或其他源獲取事件流數(shù)據(jù)。它是基于 Fetch API，提供了一種簡單和靈活的方式來處理服務(wù)器發(fā)送的事件流數(shù)據(jù)。

使用 fetchEventSource，您可以設(shè)置一個事件回調(diào)函數(shù)，用于處理從服務(wù)器發(fā)送的事件。當(dāng)服務(wù)器發(fā)送新的事件時，該回調(diào)函數(shù)將被觸發(fā)，并且您可以在回調(diào)函數(shù)中執(zhí)行相應(yīng)的操作。

FetchEventSource 還提供了一些方法來管理事件流的連接狀態(tài)，例如打開連接、關(guān)閉連接、重新連接等。它還支持設(shè)置請求頭、查詢參數(shù)等功能，以滿足不同的需求。

現(xiàn)在我來介紹一下使用流程

1.安裝庫

npm install fetch-event-source

2.導(dǎo)入函數(shù)

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

3.創(chuàng)建請求連接(并支持設(shè)置請求頭，請求方式)

 this.eventSource = await fetchEventSource(url, {
            // 這里設(shè)置請求頭信息
            headers: {
              'Authorization': 'Bearer ' + localStorage.getItem('token')
            },
})

4.監(jiān)聽連接

5.監(jiān)聽服務(wù)端返回數(shù)據(jù)

6.監(jiān)聽服務(wù)端錯誤

7.監(jiān)聽服務(wù)端關(guān)閉

這里有個屬性openWhenHidden: true 是指瀏覽器頁簽不處于活躍時仍然可以輸出信息。

8.請求SSE

const urlWithUuid = `/api/map/houseproperty/createSse?uuid=${encodeURIComponent(uuid)}`
this.sseRequest(urlWithUuid) // 使用帶有UUID的URL進行SSE請求

至此，頁面就可以像GPT一樣流式輸出信息了。

結(jié)果如下：

已經(jīng)可以完成流式輸出信息了。

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論