欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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 項目代理設(shè)置的優(yōu)化

    Vue 項目代理設(shè)置的優(yōu)化

    這篇文章主要介紹了Vue 項目代理設(shè)置的優(yōu)化功能,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2018-04-04
  • vue-image-crop基于Vue的移動端圖片裁剪組件示例

    vue-image-crop基于Vue的移動端圖片裁剪組件示例

    這篇文章主要介紹了vue-image-crop基于Vue的移動端圖片裁剪組件示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • 在vue項目如何使用base64加密

    在vue項目如何使用base64加密

    這篇文章主要介紹了在vue項目如何使用base64加密,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • vue實現(xiàn)彈窗引用另一個頁面窗口

    vue實現(xiàn)彈窗引用另一個頁面窗口

    這篇文章主要介紹了vue實現(xiàn)彈窗引用另一個頁面窗口,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue2.x中$attrs的使用方法教程

    vue2.x中$attrs的使用方法教程

    正常情況下Vue推薦用props向子組件參數(shù),但是在特定場景下,使用$attrs會更方便,下面這篇文章主要給大家介紹了關(guān)于vue2.x中$attrs使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-11-11
  • vue使用keep-alive進行組件緩存方法詳解(組件不緩存問題解決)

    vue使用keep-alive進行組件緩存方法詳解(組件不緩存問題解決)

    keep-alive包裹動態(tài)組件時,會緩存不活動的組件實例,而不是銷毀它們,下面這篇文章主要給大家介紹了關(guān)于vue使用keep-alive進行組件緩存方法(組件不緩存問題解決)的相關(guān)資料,需要的朋友可以參考下
    2022-09-09
  • vue3?實現(xiàn)關(guān)于?el-table?表格組件的封裝及調(diào)用方法

    vue3?實現(xiàn)關(guān)于?el-table?表格組件的封裝及調(diào)用方法

    這篇文章主要介紹了vue3?實現(xiàn)關(guān)于?el-table?表格組件的封裝及調(diào)用方法,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
    2024-06-06
  • 使用Vue自定義指令實現(xiàn)Select組件

    使用Vue自定義指令實現(xiàn)Select組件

    這篇文章主要介紹了使用Vue自定義指令實現(xiàn)Select組件,如果哪位朋友對vue自定義指令不是多了解的話,此篇文章會對你有所幫助的,需要的朋友可以參考下
    2018-05-05
  • VueJS全面解析

    VueJS全面解析

    Vue.js(讀音 /vjuː/, 類似于 view) 是一套構(gòu)建用戶界面的漸進式框架。與其他重量級框架不同的是,Vue 采用自底向上增量開發(fā)的設(shè)計。這篇文章主要介紹了VueJS全面解析的相關(guān)資料,需要的朋友可以參考下
    2016-11-11
  • Vue前后端不同端口的實現(xiàn)方法

    Vue前后端不同端口的實現(xiàn)方法

    今天小編就為大家分享一篇Vue前后端不同端口的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09

最新評論