利用FetchEventSource在大模型流式輸出的應(yīng)用方式
FetchEventSource在大模型流式輸出應(yīng)用
先講講這個微軟開發(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 中引入的一個功能，它允許開發(fā)者以一種更簡單和高效的方式處理 HTTP 請求和響應(yīng)。
這個功能是作為 ASP.NET Core 的一部分提供的，它利用了 System.Net.Http.Desktop 命名空間中的 FetchResult 類型。
在 ASP.NET Core 中，FetchEventSource 通常用于處理服務(wù)器發(fā)送的事件（Server-Sent Events，SSE），這是一種允許服務(wù)器向客戶端異步推送實時數(shù)據(jù)的技術(shù)。
使用 FetchEventSource，開發(fā)者可以更容易地創(chuàng)建和消費這些實時數(shù)據(jù)流。
使用 FetchEventSource 的一些關(guān)鍵點
- 創(chuàng)建 EventSource 客戶端：開發(fā)者可以通過
FetchEventSource創(chuàng)建一個EventSource對象，該對象用于連接到服務(wù)器上的特定端點。 - 監(jiān)聽事件：一旦
EventSource對象被創(chuàng)建，就可以通過注冊事件監(jiān)聽器來監(jiān)聽服務(wù)器發(fā)送的事件。 - 處理連接：
EventSource對象可以處理連接的建立、重連和關(guān)閉，以及可能出現(xiàn)的錯誤。 - 接收數(shù)據(jù)：當(dāng)服務(wù)器向客戶端推送數(shù)據(jù)時，可以通過注冊的事件監(jiān)聽器接收這些數(shù)據(jù)。
- 斷線重連：如果連接丟失，
EventSource對象可以自動嘗試重新連接到服務(wù)器。 - 取消訂閱：開發(fā)者可以取消對特定事件的訂閱，或者完全關(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的鏈接了。
那么有小伙伴就要問了，那前端怎么實時顯示接收到的輸出呢？
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) => { // ... },這里定義了一個 onmessage 事件處理器。
當(dāng)通過 SSE 連接接收到消息時，會觸發(fā)這個處理器。
- 解析接收到的數(shù)據(jù)：
const data = JSON.parse(event.data);
event.data 包含了服務(wù)器發(fā)送的消息內(nèi)容，通常是以 JSON 格式的字符串。
JSON.parse 函數(shù)用于將這個 JSON 字符串解析為 JavaScript 對象。
- 檢查輸出數(shù)據(jù)：
if (data.output && data.output.choices) { // ... }這里使用 if 語句來確保 data 對象中存在 output 屬性，并且 output 屬性中存在 choices 數(shù)組。
這是一種防御性編程的做法，用來避免在數(shù)據(jù)結(jié)構(gòu)不完整時出現(xiàn)錯誤。
- 獲取消息內(nèi)容：
const content = data.output.choices[0].message.content;
這行代碼進一步從 choices 數(shù)組中的第一個元素（通常是最相關(guān)的或者默認的消息）中提取 message.content。
這通常是服務(wù)器推送的有用信息或數(shù)據(jù)。
- 累加內(nèi)容：
this.output += content;
this.output 是 Vue 組件實例的一個數(shù)據(jù)屬性，用于累積從服務(wù)器接收到的所有消息內(nèi)容。
這里使用 += 操作符將新接收到的 content 追加到 this.output 的當(dāng)前值上。
整個 onmessage 事件處理器的作用是：當(dāng)通過 SSE 接收到消息時，它將解析消息內(nèi)容，從中提取有用的信息，并將其追加到 Vue 組件的 output 數(shù)據(jù)屬性中。
這樣，組件的模板中的 <pre>{{ output }}</pre> 就可以顯示所有接收到的消息內(nèi)容，保持其原始的格式。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue2的路由和異步請求方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了Vue-scoped(局部)樣式使用方法及實例代碼，文中示例代碼介紹了的非常詳細感興趣的同學(xué)可以參考閱讀一下2023-05-05
下面小編就為大家分享一篇在Vue組件上動態(tài)添加和刪除屬性方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧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)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
Vue是一個以數(shù)據(jù)驅(qū)動、組件化的前端框架,其中組件化是Vue中較為重要的概念之一,組件之間的通信則成為Vue中較為普遍的需求,下面這篇文章主要給大家介紹了關(guān)于vue父子組件傳值不能實時更新的解決方法,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了前端拖拽功能的基本知識,并詳細講解了如何在Vue3工程中實現(xiàn)拖拽指令,拖拽功能涉及HTML、CSS和JavaScript的綜合運用,需要的朋友可以參考下2025-01-01
最近項目中有用到j(luò)son編輯器,我選用了這款vue的編輯器,看起來也是比較簡潔,接下來就具體介紹一下它,下面這篇文章主要給大家介紹了關(guān)于VUE3使用JSON編輯器的詳細圖文教程,需要的朋友可以參考下2023-04-04
基于前端VUE+ElementUI實現(xiàn)table行上移或下移功能(支持跨頁移動)
有時候需要前端實現(xiàn)上移和下移功能,下面這篇文章主要給大家介紹了關(guān)于如何基于前端VUE+ElementUI實現(xiàn)table行上移或下移(支持跨頁移動)的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-07-07
在項目中,實現(xiàn)不同用戶的權(quán)限控制是常見的需求也是常見的功能模塊,本文將以 vue 為主要的代碼框架介紹幾種常見的權(quán)限控制方式,有需要的可以了解下2025-03-03
今天小編就為大家分享一篇vue移動端微信授權(quán)登錄插件封裝的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08