利用FetchEventSource在大模型流式輸出的應(yīng)用方式
FetchEventSource在大模型流式輸出應(yīng)用
先講講這個(gè)微軟開發(fā)的可以使用POST的SSE的api，github鏈接：GitHub - Azure/fetch-event-source: A better API for making Event Source requests, with all the features of fetch()
FetchEventSource 是微軟在 ASP.NET Core 中引入的一個(gè)功能，它允許開發(fā)者以一種更簡單和高效的方式處理 HTTP 請(qǐng)求和響應(yīng)。
這個(gè)功能是作為 ASP.NET Core 的一部分提供的，它利用了 System.Net.Http.Desktop 命名空間中的 FetchResult 類型。
在 ASP.NET Core 中，FetchEventSource 通常用于處理服務(wù)器發(fā)送的事件（Server-Sent Events，SSE），這是一種允許服務(wù)器向客戶端異步推送實(shí)時(shí)數(shù)據(jù)的技術(shù)。
使用 FetchEventSource，開發(fā)者可以更容易地創(chuàng)建和消費(fèi)這些實(shí)時(shí)數(shù)據(jù)流。
使用 FetchEventSource 的一些關(guān)鍵點(diǎn)
- 創(chuàng)建 EventSource 客戶端：開發(fā)者可以通過
FetchEventSource創(chuàng)建一個(gè)EventSource對(duì)象，該對(duì)象用于連接到服務(wù)器上的特定端點(diǎn)。 - 監(jiān)聽事件：一旦
EventSource對(duì)象被創(chuàng)建，就可以通過注冊(cè)事件監(jiān)聽器來監(jiān)聽服務(wù)器發(fā)送的事件。 - 處理連接：
EventSource對(duì)象可以處理連接的建立、重連和關(guān)閉，以及可能出現(xiàn)的錯(cuò)誤。 - 接收數(shù)據(jù)：當(dāng)服務(wù)器向客戶端推送數(shù)據(jù)時(shí)，可以通過注冊(cè)的事件監(jiān)聽器接收這些數(shù)據(jù)。
- 斷線重連：如果連接丟失，
EventSource對(duì)象可以自動(dòng)嘗試重新連接到服務(wù)器。 - 取消訂閱：開發(fā)者可以取消對(duì)特定事件的訂閱，或者完全關(guān)閉
EventSource連接。
以調(diào)用Qwen大模型為例
import { fetchEventSource } from '@microsoft/fetch-event-source';
export default {
data() {
return {
output: '',
apiKey: '$your-dashscope-api-key', // 替換為你的 DashScope API-KEY
url: 'https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation',
body: {
model: 'qwen-turbo',
input: {
messages: [
{
role: 'system',
content: 'You are a helpful assistant.'
},
{
role: 'user',
content: '你好'
}
]
},
parameters: {
incremental_output: true
}
}
};
},
methods: {
async startSSE() {
const headers = {
'Content-Type': 'application/json',
'Authorization': `Bearer ${this.apiKey}`,
'X-DashScope-SSE': 'enable'
};
try {
this.eventSource = await fetchEventSource(this.url, {
method: 'POST',
headers: headers,
body: JSON.stringify(this.body),
onopen: (response) => {
if (!response.ok) {
throw new Error('Server returned an error');
}
},
onmessage: (event) => {
const data = JSON.parse(event.data);
if (data.output && data.output.choices) {
const content = data.output.choices[0].message.content;
this.output += content; // 將內(nèi)容添加到輸出中
}
},
onerror: (err) => {
console.error('EventSource failed:', err);
this.stopSSE();
}
});
} catch (error) {
console.error('Failed to start SSE:', error);
}
},
stopSSE() {
if (this.eventSource) {
this.eventSource.close();
this.eventSource = null;
}
}
},
unmounted() {
this.stopSSE();
}
};這樣就可以建立SSE的鏈接了。
那么有小伙伴就要問了，那前端怎么實(shí)時(shí)顯示接收到的輸出呢？
onmessage: (event) => {
const data = JSON.parse(event.data);
if (data.output && data.output.choices) {
const content = data.output.choices[0].message.content;
this.output += content; // 將內(nèi)容添加到輸出中
}
}- 事件處理器聲明：
onmessage: (event) => { // ... },這里定義了一個(gè) onmessage 事件處理器。
當(dāng)通過 SSE 連接接收到消息時(shí)，會(huì)觸發(fā)這個(gè)處理器。
- 解析接收到的數(shù)據(jù)：
const data = JSON.parse(event.data);
event.data 包含了服務(wù)器發(fā)送的消息內(nèi)容，通常是以 JSON 格式的字符串。
JSON.parse 函數(shù)用于將這個(gè) JSON 字符串解析為 JavaScript 對(duì)象。
- 檢查輸出數(shù)據(jù)：
if (data.output && data.output.choices) { // ... }這里使用 if 語句來確保 data 對(duì)象中存在 output 屬性，并且 output 屬性中存在 choices 數(shù)組。
這是一種防御性編程的做法，用來避免在數(shù)據(jù)結(jié)構(gòu)不完整時(shí)出現(xiàn)錯(cuò)誤。
- 獲取消息內(nèi)容：
const content = data.output.choices[0].message.content;
這行代碼進(jìn)一步從 choices 數(shù)組中的第一個(gè)元素（通常是最相關(guān)的或者默認(rèn)的消息）中提取 message.content。
這通常是服務(wù)器推送的有用信息或數(shù)據(jù)。
- 累加內(nèi)容：
this.output += content;
this.output 是 Vue 組件實(shí)例的一個(gè)數(shù)據(jù)屬性，用于累積從服務(wù)器接收到的所有消息內(nèi)容。
這里使用 += 操作符將新接收到的 content 追加到 this.output 的當(dāng)前值上。
整個(gè) onmessage 事件處理器的作用是：當(dāng)通過 SSE 接收到消息時(shí)，它將解析消息內(nèi)容，從中提取有用的信息，并將其追加到 Vue 組件的 output 數(shù)據(jù)屬性中。
這樣，組件的模板中的 <pre>{{ output }}</pre> 就可以顯示所有接收到的消息內(nèi)容，保持其原始的格式。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue2的路由和異步請(qǐng)求方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
Vue-scoped(局部)樣式使用方法及實(shí)例代碼
這篇文章主要介紹了Vue-scoped(局部)樣式使用方法及實(shí)例代碼，文中示例代碼介紹了的非常詳細(xì)感興趣的同學(xué)可以參考閱讀一下2023-05-05
下面小編就為大家分享一篇在Vue組件上動(dòng)態(tài)添加和刪除屬性方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Element中el-select下拉框?qū)崿F(xiàn)選中圖標(biāo)并回顯圖標(biāo)
本文主要介紹了Element中el-select下拉框?qū)崿F(xiàn)選中圖標(biāo)并回顯圖標(biāo)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
vue父子組件傳值不能實(shí)時(shí)更新的解決方法
Vue是一個(gè)以數(shù)據(jù)驅(qū)動(dòng)、組件化的前端框架,其中組件化是Vue中較為重要的概念之一,組件之間的通信則成為Vue中較為普遍的需求,下面這篇文章主要給大家介紹了關(guān)于vue父子組件傳值不能實(shí)時(shí)更新的解決方法,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了前端拖拽功能的基本知識(shí),并詳細(xì)講解了如何在Vue3工程中實(shí)現(xiàn)拖拽指令,拖拽功能涉及HTML、CSS和JavaScript的綜合運(yùn)用,需要的朋友可以參考下2025-01-01
最近項(xiàng)目中有用到j(luò)son編輯器,我選用了這款vue的編輯器,看起來也是比較簡潔,接下來就具體介紹一下它,下面這篇文章主要給大家介紹了關(guān)于VUE3使用JSON編輯器的詳細(xì)圖文教程,需要的朋友可以參考下2023-04-04
基于前端VUE+ElementUI實(shí)現(xiàn)table行上移或下移功能(支持跨頁移動(dòng))
有時(shí)候需要前端實(shí)現(xiàn)上移和下移功能,下面這篇文章主要給大家介紹了關(guān)于如何基于前端VUE+ElementUI實(shí)現(xiàn)table行上移或下移(支持跨頁移動(dòng))的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
Vue實(shí)現(xiàn)不同用戶權(quán)限的方法詳解
在項(xiàng)目中,實(shí)現(xiàn)不同用戶的權(quán)限控制是常見的需求也是常見的功能模塊,本文將以 vue 為主要的代碼框架介紹幾種常見的權(quán)限控制方式,有需要的可以了解下2025-03-03
vue移動(dòng)端微信授權(quán)登錄插件封裝的實(shí)例
今天小編就為大家分享一篇vue移動(dòng)端微信授權(quán)登錄插件封裝的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08