diff --git a/apps/web-antd/src/store/notify.ts b/apps/web-antd/src/store/notify.ts index 61e10040..c68e3243 100644 --- a/apps/web-antd/src/store/notify.ts +++ b/apps/web-antd/src/store/notify.ts @@ -2,6 +2,7 @@ import type { NotificationItem } from '@vben/layouts'; import { computed, ref, watch } from 'vue'; +import { SSEEvent } from '@vben/constants'; import { SvgMessageUrl } from '@vben/icons'; import { $t } from '@vben/locales'; import { useUserStore } from '@vben/stores'; @@ -46,27 +47,28 @@ export const useNotifyStore = defineStore( if (!sseReturnData) { return; } - const { data } = sseReturnData; + const { event, data } = sseReturnData; watch(data, (message) => { - if (!message) return; - console.log(`接收到消息: ${message}`); - - notification.success({ - description: message, - duration: 3, - message: $t('component.notice.received'), - }); - - notificationList.value.unshift({ - // avatar: `https://api.multiavatar.com/${random(0, 10_000)}.png`, 随机头像 - avatar: SvgMessageUrl, - date: dayjs().format('YYYY-MM-DD HH:mm:ss'), - isRead: false, - message, - title: $t('component.notice.title'), - userId: userId.value, - }); + if (!event || !message) return; + console.log(`接收到事件为:${event.value} 的消息: ${message}`); + if (event.value === SSEEvent.MESSAGE) { + notification.success({ + description: message, + duration: 3, + message: $t('component.notice.received'), + }); + + notificationList.value.unshift({ + // avatar: `https://api.multiavatar.com/${random(0, 10_000)}.png`, 随机头像 + avatar: SvgMessageUrl, + date: dayjs().format('YYYY-MM-DD HH:mm:ss'), + isRead: false, + message, + title: $t('component.notice.title'), + userId: userId.value, + }); + } else if (event.value === SSEEvent.HAZARD) { /* empty */ } // 需要手动置空 vue3在值相同时不会触发watch data.value = null; diff --git a/apps/web-antd/src/utils/message.ts b/apps/web-antd/src/utils/message.ts index 114e63f8..9d715f1f 100644 --- a/apps/web-antd/src/utils/message.ts +++ b/apps/web-antd/src/utils/message.ts @@ -1,3 +1,4 @@ +import { SSEEvent } from '@vben/constants'; import { useAppConfig } from '@vben/hooks'; import { useAccessStore } from '@vben/stores'; @@ -21,15 +22,19 @@ export function useSseMessage() { const sseAddr = `${apiURL}/resource/sse?clientid=${clientId}&Authorization=Bearer ${token}`; - const sseReturnData = useEventSource(sseAddr, [], { - autoReconnect: { - delay: 1000, - onFailed() { - console.error('sse重连失败.'); + const sseReturnData = useEventSource( + sseAddr, + [SSEEvent.MESSAGE, SSEEvent.HAZARD], + { + autoReconnect: { + delay: 1000, + onFailed() { + console.error('sse重连失败.'); + }, + retries: 3, }, - retries: 3, }, - }); + ); return sseReturnData; } diff --git a/packages/@core/base/shared/src/constants/index.ts b/packages/@core/base/shared/src/constants/index.ts index 6e818083..8fc36a0f 100644 --- a/packages/@core/base/shared/src/constants/index.ts +++ b/packages/@core/base/shared/src/constants/index.ts @@ -1,3 +1,4 @@ export * from './dict-enum'; export * from './globals'; +export * from './sse-event'; export * from './vben'; diff --git a/packages/@core/base/shared/src/constants/sse-event.ts b/packages/@core/base/shared/src/constants/sse-event.ts new file mode 100644 index 00000000..dbcb0c55 --- /dev/null +++ b/packages/@core/base/shared/src/constants/sse-event.ts @@ -0,0 +1,7 @@ +export const SSEEvent = { + NULL: null, + MESSAGE: 'message', + HAZARD: 'hazard', +} as const; + +export type SSEEventKey = keyof typeof SSEEvent;