vue3使用SSE实现前端全局事件通讯方式

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连接失败');
            }
        }
    });

    // 错误处理
    watch(eventSource.error, (err) => {
        if (err) console.error('SSE连接错误:', 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数据解析错误:', e);
            }
        }
    });
};

// 添加消息监听
export function addListener(callback: (data: any) => void) {
    callbacks.add(callback);
    return () => removeListener(callback); // 返回取消订阅函数
}

// 移除消息监听
function removeListener(callback: (data: any) => void) {
    callbacks.delete(callback);
}

// 关闭SSE连接
export function closeSse() {
    eventSource?.close();
    eventSource = null;
    callbacks.clear();
}

// 在应用初始化时调用
import { initSSE } from '@/utils/sse';

// 启动SSE连接
initSSE();

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

// 组件内订阅
const unsubscribe = addListener((data) => {
    console.log('收到消息:', data);
    // 处理业务逻辑...
});

// 组件销毁时取消订阅
onUnmounted(() => {
    closeSse();
});

// 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连接错误:', 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数据解析错误:', 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();
}