快捷導(dǎo)航

Vue+(SSE)EventSource實(shí)現(xiàn)流式輸出過(guò)程

更新時(shí)間：2025年12月16日 09:36:54 作者：李李...

文章介紹了如何在Vue項(xiàng)目中使用EventSource和FetchEventSource實(shí)現(xiàn)服務(wù)器端事件驅(qū)動(dòng)推送,并分享了它們的特點(diǎn)、優(yōu)勢(shì)以及使用流程,通過(guò)設(shè)置請(qǐng)求頭和請(qǐng)求方式,解決了EventSource無(wú)法設(shè)置這些屬性的問(wèn)題

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

下面介紹一下EventSource

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

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

EventSource的特點(diǎn)和優(yōu)勢(shì)包括

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

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

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

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

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

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

1.安裝庫(kù)

npm install fetch-event-source

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

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

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

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

4.監(jiān)聽(tīng)連接

5.監(jiān)聽(tīng)服務(wù)端返回?cái)?shù)據(jù)

6.監(jiān)聽(tīng)服務(wù)端錯(cuò)誤

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

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

8.請(qǐng)求SSE

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

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

結(jié)果如下：

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