vue3中使用sse最佳實(shí)踐,封裝工具詳解
vue3使用sse最佳實(shí)踐,封裝工具
工具
// 接受參數(shù)
export interface SSEChatParams {
url: string,// sse 連接
onmessage: (event: MessageEvent) => void,// 處理消息的函數(shù)
onopen: () => void,// 建立連接觸發(fā)的事件
finallyHandler: () => void,// 相當(dāng)于 try_finally 中的 finally 部分,不管出現(xiàn)異?;蛘哧P(guān)閉必然會(huì)執(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 錯(cuò)誤:", 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();
使用
我在我代碼中是這樣使用的,就這么簡(jiǎn)單
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ù)源中的對(duì)話
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ā)時(shí)機(jī)
// 當(dāng)組件從 DOM 中卸載前執(zhí)行的操作
onUnmounted(() => {
sseService.disconnect()
})這里需要提一嘴,關(guān)于 sse 中的 onopen 觸發(fā)時(shí)機(jī)
當(dāng)你和服務(wù)器建立 sse 連接的時(shí)候,如果后端沒有通過 sse 返回給你消息的話,那么前端瀏覽器大概率是不會(huì)觸發(fā) onopen 事件。
所以當(dāng)與后端建立連接后要注意咯~
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue 項(xiàng)目代理設(shè)置的優(yōu)化
這篇文章主要介紹了Vue 項(xiàng)目代理設(shè)置的優(yōu)化功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04
vue-image-crop基于Vue的移動(dòng)端圖片裁剪組件示例
這篇文章主要介紹了vue-image-crop基于Vue的移動(dòng)端圖片裁剪組件示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
vue實(shí)現(xiàn)彈窗引用另一個(gè)頁(yè)面窗口
這篇文章主要介紹了vue實(shí)現(xiàn)彈窗引用另一個(gè)頁(yè)面窗口,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
vue使用keep-alive進(jìn)行組件緩存方法詳解(組件不緩存問題解決)
keep-alive包裹動(dòng)態(tài)組件時(shí),會(huì)緩存不活動(dòng)的組件實(shí)例,而不是銷毀它們,下面這篇文章主要給大家介紹了關(guān)于vue使用keep-alive進(jìn)行組件緩存方法(組件不緩存問題解決)的相關(guān)資料,需要的朋友可以參考下2022-09-09
vue3?實(shí)現(xiàn)關(guān)于?el-table?表格組件的封裝及調(diào)用方法
這篇文章主要介紹了vue3?實(shí)現(xiàn)關(guān)于?el-table?表格組件的封裝及調(diào)用方法,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06
使用Vue自定義指令實(shí)現(xiàn)Select組件
這篇文章主要介紹了使用Vue自定義指令實(shí)現(xiàn)Select組件,如果哪位朋友對(duì)vue自定義指令不是多了解的話,此篇文章會(huì)對(duì)你有所幫助的,需要的朋友可以參考下2018-05-05

