From 4a81782825884026da16c4f940825d561495f656 Mon Sep 17 00:00:00 2001
From: zhanghao <774378400@qq.com>
Date: Wed, 26 Aug 2026 14:04:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0WebSocket=E8=BF=9E?=
 =?UTF-8?q?=E6=8E=A5=E9=80=BB=E8=BE=91=EF=BC=8C=E6=94=AF=E6=8C=81=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E7=94=A8=E6=88=B7ID=E5=92=8Ctoken=E4=BC=A0=E9=80=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development         |  4 ++--
 src/main.js              |  3 ++-
 src/plugins/websocket.js | 26 +++++++++++++++++++++++++-
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/.env.development b/.env.development
index 705c892..368025f 100644
--- a/.env.development
+++ b/.env.development
@@ -7,8 +7,8 @@ VITE_APP_ENV = 'development'
 # 招商车研物联网平台/开发环境
 VITE_APP_BASE_API = '/dev-api'
 
-VITE_API_URL = http://192.168.0.199:14080
-VITE_WS_URL = ws://192.168.0.199:14080/ws
+VITE_API_URL = http://192.168.0.222:14080
+VITE_WS_URL = ws://192.168.0.222:14080/ws
 VITE_PORT = 5174
 VITE_INSPECTION_TYPE = "inspection"
 VITE_MINIO_URL = "http://192.168.28.10:9000/cmvr-iot/"
diff --git a/src/main.js b/src/main.js
index eae1fa2..8557d20 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') {