快捷導(dǎo)航

vue3使用SSE實(shí)現(xiàn)前端全局事件通訊方式

更新時(shí)間：2025年10月15日 08:38:42 作者：你的眼睛會(huì)笑

文章介紹了使用Vue3和VueUse實(shí)現(xiàn)基于SSE（Server-Sent Events）的全局事件通訊系統(tǒng),SSE具有單向通信、基于HTTP、自動(dòng)重連和輕量級(jí)等特點(diǎn),適合實(shí)時(shí)性要求高的應(yīng)用,實(shí)現(xiàn)方案包括訂閱消息、取消訂閱和關(guān)閉連接等功能

vue3 SSE實(shí)現(xiàn)前端全局事件通訊

什么是SSE (useEventSource)

SSE(Server-Sent Events)是一種基于HTTP的服務(wù)器推送技術(shù)，允許服務(wù)器單向向客戶端發(fā)送事件。相比WebSocket，SSE具有以下特點(diǎn)：

單向通信（服務(wù)器→客戶端）
基于HTTP協(xié)議，無(wú)需額外協(xié)議
自動(dòng)重連機(jī)制
輕量級(jí)，實(shí)現(xiàn)簡(jiǎn)單

為什么選擇SSE作為全局通訊方案

實(shí)時(shí)性 ：服務(wù)器可以即時(shí)推送數(shù)據(jù)到所有客戶端
低開(kāi)銷 ：相比輪詢，減少了不必要的請(qǐng)求
自動(dòng)重連 ：內(nèi)置連接恢復(fù)機(jī)制
兼容性 ：現(xiàn)代瀏覽器普遍支持

實(shí)現(xiàn)方案

以下是基于Vue 3和VueUse的SSE全局通訊實(shí)現(xiàn)：

import { getToken } from "@/store/modules/auth/helper";
import { useEventSource } from '@vueuse/core'
import { watch } from "vue";

const baseURL = 'https://xxxxxxxxxxxx.com/api'
let eventSource: ReturnType<typeof useEventSource> | null = null;
const callbacks = new Set<(data: any) => void>();

// 初始化SSE連接
export const initSSE = () => {
    if (eventSource) return;

    const token = getToken();
    const url = `${baseURL}/sse?Authorization=${token}`;

    eventSource = useEventSource(url, [], {
        autoReconnect: {
            retries: 5,
            delay: 5000,
            onFailed() {
                console.error('SSE連接失敗');
            }
        }
    });

    // 錯(cuò)誤處理
    watch(eventSource.error, (err) => {
        if (err) console.error('SSE連接錯(cuò)誤:', err);
    });

    // 消息處理
    watch(eventSource.data, (msg) => {
        if (msg && msg !== 'heartbeat') {
            try {
                const data = JSON.parse(msg);
                callbacks.forEach(cb => cb(data)); // 通知所有訂閱者
            } catch (e) {
                console.error('SSE數(shù)據(jù)解析錯(cuò)誤:', e);
            }
        }
    });
};

核心功能實(shí)現(xiàn)

訂閱消息

// 添加消息監(jiān)聽(tīng)
export function addListener(callback: (data: any) => void) {
    callbacks.add(callback);
    return () => removeListener(callback); // 返回取消訂閱函數(shù)
}

取消訂閱

// 移除消息監(jiān)聽(tīng)
function removeListener(callback: (data: any) => void) {
    callbacks.delete(callback);
}

關(guān)閉連接

// 關(guān)閉SSE連接
export function closeSse() {
    eventSource?.close();
    eventSource = null;
    callbacks.clear();
}

在Vue組件中使用

初始化連接

// 在應(yīng)用初始化時(shí)調(diào)用
import { initSSE } from '@/utils/sse';

// 啟動(dòng)SSE連接
initSSE();

訂閱消息

import { addListener,closeSse } from '@/utils/sse';

// 組件內(nèi)訂閱
const unsubscribe = addListener((data) => {
    console.log('收到消息:', data);
    // 處理業(yè)務(wù)邏輯...
});

// 組件銷毀時(shí)取消訂閱
onUnmounted(() => {
    closeSse();
});

實(shí)際應(yīng)用場(chǎng)景

實(shí)時(shí)通知系統(tǒng) ：新消息提醒、系統(tǒng)公告等
數(shù)據(jù)監(jiān)控：實(shí)時(shí)展示服務(wù)器狀態(tài)、監(jiān)控?cái)?shù)據(jù)
協(xié)同編輯：多人協(xié)作時(shí)的內(nèi)容同步
任務(wù)進(jìn)度更新：長(zhǎng)時(shí)間任務(wù)的進(jìn)度通知

性能優(yōu)化建議

心跳機(jī)制：服務(wù)器定期發(fā)送心跳包保持連接
消息壓縮：對(duì)大消息進(jìn)行壓縮處理
批量發(fā)送：合并多個(gè)小消息為一次發(fā)送
連接共享：多個(gè)組件復(fù)用同一個(gè)連接

完整代碼

// sse.ts
import { getToken } from "@/store/modules/auth/helper";
import { useEventSource } from '@vueuse/core'
import { watch } from "vue";
const baseURL =  'http://xxxxxxxxxx'
let eventSource:any = null;
const callbacks: Set<(data: any) => void> = new Set();
export const initSSE = () => {
    if (eventSource) return;

    const token = getToken();
    const url = `${baseURL}/sse?Authorization=${token}`;

     eventSource = useEventSource(url, [], {
        autoReconnect: {
            retries: 5,
            delay: 5000,
            onFailed() {
                console.log('Failed to connect after 5 retries');
            }
        }
    });

    const { data, error } = eventSource;
    watch(error, (err) => {
        if (err) {
            console.error('SSE連接錯(cuò)誤:', err);
            error.value = null;
        }
    });

    watch(data, (msg) => {
        if (msg) {
            console.log('SSE接收到消息:', msg);
                try {
                    const parsedData = JSON.parse(msg);
                    callbacks.forEach(cb => cb(parsedData));
                } catch (e) {
                    console.error('SSE數(shù)據(jù)解析錯(cuò)誤:', e);
                }
            data.value = null;
        }
    });



};

export function addListener(callback: (data: any) => void) {
    callbacks.add(callback);
    return () => removeListener(callback);
}

function removeListener(callback: (data: any) => void) {
    callbacks.delete(callback);
}

export function closeSse() {
    // eventSource?.close();
    eventSource = null;
    callbacks.clear();
}