diff --git a/src/main.js b/src/main.js index 169c103..4d93a44 100644 --- a/src/main.js +++ b/src/main.js @@ -12,6 +12,7 @@ import '@/assets/styles/index.scss' // global css import App from './App' import store from './store' +import useUserStore from './store/modules/user' import router from './router' import directive from './directive' // directive import WebSocketPlugin from './plugins/websocket' @@ -92,7 +93,7 @@ app.use(plugins) app.use(elementIcons) app.use(WebSocketPlugin, { url: import.meta.env.VITE_WS_URL, - userId: 'your_user_id' + userId: () => useUserStore(store).id }) app.component('svg-icon', SvgIcon) diff --git a/src/plugins/websocket.js b/src/plugins/websocket.js index 2f2ee77..f3c51e4 100644 --- a/src/plugins/websocket.js +++ b/src/plugins/websocket.js @@ -1,3 +1,5 @@ +import { getToken } from '../utils/auth'; + const MEDIA_HEADER_SIZE = 26; const MEDIA_MAGIC = [0x43, 0x4d, 0x56, 0x46]; // CMVF const MEDIA_MIME_TYPES = { @@ -18,6 +20,11 @@ class WebSocketManager { this.maxQueueSize = 100; this.status = false; this.channelSubscriptions = new Set(); + this.connectionUserId = null; + } + + resolveUserId() { + return typeof this.userId === 'function' ? this.userId() : this.userId; } connect() { @@ -25,8 +32,19 @@ class WebSocketManager { console.error('浏览器不支持 WebSocket'); return; } + if (!this.url) { + console.error('WebSocket 地址未配置'); + return; + } - this.ws = new WebSocket(`${this.url}?userId=${this.userId}`, [], { perMessageDeflate: true }); + const userId = this.resolveUserId(); + if (typeof this.userId === 'function' && !userId) return; + const connectionUrl = new URL(this.url, window.location.href); + if (userId) connectionUrl.searchParams.set('userId', userId); + const token = getToken(); + if (token) connectionUrl.searchParams.set('token', token); + this.connectionUserId = userId || null; + this.ws = new WebSocket(connectionUrl.toString(), [], { perMessageDeflate: true }); this.ws.binaryType = 'arraybuffer'; // 确保接收 ArrayBuffer this.ws.onopen = () => { @@ -168,6 +186,12 @@ class WebSocketManager { this.channelSubscriptions.delete(payload.channel); } } + const userId = this.resolveUserId(); + if (this.ws && this.ws.readyState !== WebSocket.CLOSED && this.connectionUserId !== userId) { + this.ws.close(4001, 'user identity changed'); + return; + } + if (!this.ws || this.ws.readyState === WebSocket.CLOSED) this.connect(); if (this.ws && this.ws.readyState === 1) { this.ws.send(JSON.stringify(payload)); } else if (payload?.type !== 'channel_subscription') {