vue3中使用sse最佳實踐,封裝工具詳解
更新時間:2024年08月29日 09:17:36 作者:夢染(°ー°〃)星塵
這篇文章主要介紹了vue3中使用sse最佳實踐,封裝工具,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue3使用sse最佳實踐,封裝工具
工具
// 接受參數(shù) export interface SSEChatParams { url: string,// sse 連接 onmessage: (event: MessageEvent) => void,// 處理消息的函數(shù) onopen: () => void,// 建立連接觸發(fā)的事件 finallyHandler: () => void,// 相當(dāng)于 try_finally 中的 finally 部分,不管出現(xiàn)異常或者關(guān)閉必然會執(zhí)行的代碼塊 } class SSEService { private eventSource: EventSource | null = null; private finallyHandler: (() => void) | undefined; // 建立連接 connect(sseChatParams: SSEChatParams) { this.finallyHandler = sseChatParams.finallyHandler; this.eventSource = new EventSource(sseChatParams.url); if (sseChatParams.onopen != null) { this.eventSource.onopen = sseChatParams.onopen; }else{ this.eventSource.onopen = () => { console.log('SSE 連接已開啟'); }; } if (sseChatParams.onmessage != null) { this.eventSource.onmessage = sseChatParams.onmessage; } else { this.eventSource.onmessage = (event) => { console.log('收到消息:', event.data); }; } this.eventSource.onerror = (error) => { if (this.eventSource?.readyState === EventSource.CLOSED) { console.log("SSE 連接已關(guān)閉"); } else { console.error("SSE 錯誤:", error); } sseChatParams.finallyHandler(); }; } // 關(guān)閉連接 disconnect() { if (this.eventSource) { this.eventSource.close(); console.log("關(guān)閉 sse 連接") if (this.finallyHandler != null) { this.finallyHandler(); } } } } export const sseService = new SSEService();
使用
我在我代碼中是這樣使用的,就這么簡單
const onopen = () => { console.log("建立無敵 sse 連接成功") } // 建立連接 let sseChatParams: SSEChatParams = { onopen, url: import.meta.env.VITE_GLOB_API_URL + 'sse/createConnect?clientId=' + userStore.getSseClientId(), onmessage: (event: MessageEvent) => { // 收到消息 console.log('收到消息xsssx:', event.data); let chunk = event.data; if (chunk === '[DONE]') { sseService.disconnect() state.imageList = [] chatGuide(chatStore.activeChatId).then(resp => { chatGuideList.value = resp.data.guideList scrollViewBottom() }) return } chunk = JSON.parse(chunk) if (chunk.type === 'error') { errorText = chunk.content console.log("errorText", errorText); updateChatData(errorText) return; } chunk = chunk.content; if (!chunk) { return; } lastText = lastText + chunk // 更新聊天數(shù)據(jù)源中的對話 updateChatData(lastText) }, finallyHandler: () => { console.log("finallyHandler操作") sessionStatus.value = 0 inputDisabled.value = false dataSources.value[dataSources.value.length - 1].loading = false loading.value = false if (!isMobile.value) { // 聚焦輸入框 inputRef.value?.focus() } } }; sseService.connect(sseChatParams)
另外你可能還需要增加一下關(guān)閉觸發(fā)時機
// 當(dāng)組件從 DOM 中卸載前執(zhí)行的操作 onUnmounted(() => { sseService.disconnect() })
這里需要提一嘴,關(guān)于 sse 中的 onopen 觸發(fā)時機
當(dāng)你和服務(wù)器建立 sse 連接的時候,如果后端沒有通過 sse 返回給你消息的話,那么前端瀏覽器大概率是不會觸發(fā) onopen 事件。
所以當(dāng)與后端建立連接后要注意咯~
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue-image-crop基于Vue的移動端圖片裁剪組件示例
這篇文章主要介紹了vue-image-crop基于Vue的移動端圖片裁剪組件示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08vue使用keep-alive進行組件緩存方法詳解(組件不緩存問題解決)
keep-alive包裹動態(tài)組件時,會緩存不活動的組件實例,而不是銷毀它們,下面這篇文章主要給大家介紹了關(guān)于vue使用keep-alive進行組件緩存方法(組件不緩存問題解決)的相關(guān)資料,需要的朋友可以參考下2022-09-09vue3?實現(xiàn)關(guān)于?el-table?表格組件的封裝及調(diào)用方法
這篇文章主要介紹了vue3?實現(xiàn)關(guān)于?el-table?表格組件的封裝及調(diào)用方法,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-06-06