快捷導(dǎo)航

Vue3連接SSE并且返回結(jié)果用打字機效果呈現(xiàn)方法

更新時間：2026年03月10日 09:29:35 作者：琦遇

SSE的核心是一個持久的HTTP連接,服務(wù)端通過該連接不斷發(fā)送文本格式的數(shù)據(jù),下面這篇文章主要介紹了Vue3連接SSE并且返回結(jié)果用打字機效果呈現(xiàn)方法的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

連接SSE

<script setup>
import { ref,onMounted,onUnmounted } from 'vue';
const sse = ref()
const reconnectAttempts = ref(0)
const timer = ref()
onMounted(()=>{
    initSSE();
})
onUnmounted(() => {
    if (sse.value) {
        sse.value.close();
    }
    // 清除定時器
    clearTimeout(timer.value);
});
const initSSE = () => {
    sse.value = new EventSource(`http://192.168.16.18:8888/sse/subscribe?userId=1`);
    sse.value.onopen = function (e) {
        console.log(e, "連接成功");
        reconnectAttempts.value = 0; // 重置重連次數(shù)
    };
    sse.value.onmessage = (event) => {
        console.log(event.data)
    }
    sse.value.onerror = (error) => {
        console.error("SSE 連接出錯：", error);
        sse.value.close();
        sse.value = null;
        // 自動重連邏輯
        reconnectAttempts.value++;
        const reconnectDelay = Math.min(30000, 1000 * Math.pow(2, reconnectAttempts.value)); // 計算重連延遲，最大延遲為30秒
        console.log(`將在 ${reconnectDelay} 毫秒后嘗試重連...`);
        // 等待一定時間后重連
        setTimeout(() => {
            if (!sse.value) {
                console.log("嘗試重連 SSE...");
                initSSE(); // 遞歸調(diào)用重連
            }
        }, reconnectDelay);
    }
}
</script>

返回值加入打字機效果

<script>
import { ref,onMounted,onUnmounted } from 'vue';
const sse = ref()
const reconnectAttempts = ref(0)
const contentList = ref([])//對話列表
const fullText = ref("")
const timer = ref()
onMounted(()=>{
    initSSE();
})
onUnmounted(() => {
    if (sse.value) {
        sse.value.close();
    }
    // 清除定時器
    clearTimeout(timer.value);
});
// 打字機效果的方法
const typeWriterEffect = () => {
    if (fullText.value.length > 0) {
        contentList.value[contentList.value.length - 1].content += fullText.value[0];
        fullText.value = fullText.value.slice(1);
        // 設(shè)置打字速度（例如每 100 毫秒顯示一個字符）
        timer.value = setTimeout(typeWriterEffect, 100);
        if (fullText.value == "") {
            //打字機效果結(jié)束后關(guān)閉加載效果，這里可以自由發(fā)揮
            contentList.value[contentList.value.length - 1].show = false
        }
        //滾動到底部的距離
        scrollToBottom();
    }
};
const initSSE = () => {
    sse.value = new EventSource(`http://192.168.16.18:8888/sse/subscribe?userId=1`);
    sse.value.onopen = function (e) {
        console.log(e, "連接成功");
        reconnectAttempts.value = 0; // 重置重連次數(shù)
    };
    sse.value.onmessage = (event) => {
        console.log(event.data)
        fullText.value += event.data;
        // 開始打字機效果
        typeWriterEffect();
    }
    sse.value.onerror = (error) => {
        console.error("SSE 連接出錯：", error);
        sse.value.close();
        sse.value = null;
        // 自動重連邏輯
        reconnectAttempts.value++;
        const reconnectDelay = Math.min(30000, 1000 * Math.pow(2, reconnectAttempts.value)); // 計算重連延遲，最大延遲為30秒
        console.log(`將在 ${reconnectDelay} 毫秒后嘗試重連...`);
        // 等待一定時間后重連
        setTimeout(() => {
            if (!sse.value) {
                console.log("嘗試重連 SSE...");
                initSSE(); // 遞歸調(diào)用重連
            }
        }, reconnectDelay);
    }
}
</script>

這時候根據(jù)SSE發(fā)送的數(shù)據(jù)流界面已經(jīng)完成了，樣式還需要優(yōu)化（現(xiàn)在是純文字的界面），下一章介紹樣式的優(yōu)化，展示的代碼編輯器樣式優(yōu)化。