From 1abe5c6876b778e2333fe073c9d84b3f7a7f72d3 Mon Sep 17 00:00:00 2001
From: 17792275749 <812100002@qq.com>
Date: Wed, 19 Aug 2026 18:01:54 +0800
Subject: [PATCH] =?UTF-8?q?fix(mqtt):=20=E5=9B=BA=E5=AE=9A=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=20clientId=EF=BC=8C=E4=BF=AE=E5=A4=8D=E8=BF=9E?=
 =?UTF-8?q?=E6=8E=A5=E5=A0=86=E7=A7=AF=E4=B8=8E=E6=B6=88=E6=81=AF=E9=87=8D?=
 =?UTF-8?q?=E5=A4=8D=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- clientId 由随机改为 localStorage 固定，避免刷新产生新连接
- 修复重连后 message 监听器重复注册，防止消息重复触发
- led 页面销毁时断开 MQTT 连接
- 消息体判空保护
- MQTT 连接改用 wss

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/utils/mqtt.js                 | 16 ++++++----------
 src/views/dataBoard/dataBoard.vue | 12 +++++++++---
 src/views/led/led.vue             | 16 ++++++++++++----
 3 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/utils/mqtt.js b/src/utils/mqtt.js
index 650ff6d..3fe442d 100644
--- a/src/utils/mqtt.js
+++ b/src/utils/mqtt.js
@@ -32,6 +32,12 @@ export const initMqtt = (clientId, topic, type, {username='sw_mqtt', password='1
         const entry = { client, callback: null };
         clients[type] = entry;
 
+        client.on('message', (topic, message) => {
+            if (entry.callback) {
+                entry.callback({ topic, message: JSON.parse(message.toString()) });
+            }
+        });
+
         client.on("connect", () => {
             console.info("MQTT 连接成功_clientId：" + clientId);
 
@@ -39,11 +45,6 @@ export const initMqtt = (clientId, topic, type, {username='sw_mqtt', password='1
                 if (err) {
                     reject("订阅失败_clientId：" + clientId);
                 } else {
-                    if (entry.callback) {
-                        client.on('message', (topic, message) => {
-                            entry.callback({ topic, message: JSON.parse(message.toString()) });
-                        });
-                    }
                     resolve("订阅成功_clientId：" + clientId);
                 }
             });
@@ -59,11 +60,6 @@ export const callBackMqttMessage = (type, callback) => {
     const entry = clients[type];
     if (entry) {
         entry.callback = callback;
-        if (entry.client) {
-            entry.client.on('message', (topic, message) => {
-                callback({ topic, message: JSON.parse(message.toString()) });
-            });
-        }
     }
 };
 
diff --git a/src/views/dataBoard/dataBoard.vue b/src/views/dataBoard/dataBoard.vue
index cff6545..931df88 100644
--- a/src/views/dataBoard/dataBoard.vue
+++ b/src/views/dataBoard/dataBoard.vue
@@ -274,10 +274,16 @@ export default {
     },
     methods: {
         initMqttConnect() {
-            const clientId = 'db-' + Math.random().toString(16).substring(2, 8);
+            let clientId = localStorage.getItem('dbDeviceId');
+            if (!clientId) {
+                const bytes = new Uint8Array(8);
+                crypto.getRandomValues(bytes);
+                clientId = 'db-' + Array.from(bytes, b => b.toString(16).padStart(2, '0')).join('');
+                localStorage.setItem('dbDeviceId', clientId);
+            }
             console.log(clientId);
             initMqtt(clientId, 'yx/device/rankingScreen/needUpdate', 'db', {
-                head: 'ws',
+                head: 'wss',
                 username: process.env.VUE_APP_DB_MQTT_USERNAME,
                 password: process.env.VUE_APP_DB_MQTT_PASSWORD
             })
@@ -286,7 +292,7 @@ export default {
                         console.log('[MQTT] 收到消息:', data.topic, dayjs().format('YYYY-MM-DD HH:mm:ss'), data.message);
                         if (data.topic === 'yx/device/rankingScreen/needUpdate') {
                             const msg = data.message;
-                            if (msg.type === 'RANKING_UPDATE') {
+                            if (msg && msg.type === 'RANKING_UPDATE') {
                                 this.initData('');
                             }
                         }
diff --git a/src/views/led/led.vue b/src/views/led/led.vue
index 0d1b86e..e2b6041 100644
--- a/src/views/led/led.vue
+++ b/src/views/led/led.vue
@@ -21,7 +21,7 @@
 <script>
 import RowDom from "./components/rowDom.vue";
 import {httpRequest} from "@/XMLHttpRequest";
-import {callBackMqttMessage, initMqtt} from "@/utils/mqtt";
+import {callBackMqttMessage, disconnectMqtt, initMqtt} from "@/utils/mqtt";
 
 export default {
     name: "led",
@@ -36,7 +36,8 @@ export default {
             deviceDataList: [],
         }
     },
-    mounted() {
+    beforeDestroy() {
+        disconnectMqtt('led');
     },
     created() {
         for (let i = 1; i <= this.deviceNumber; i++) {
@@ -91,11 +92,18 @@ export default {
             })
         },
         initMQ() {
-            const clientId = 'deviceId-' + Math.random().toString(16).substring(2, 8);
+            let clientId = localStorage.getItem('ledDeviceId');
+            if (!clientId) {
+                const bytes = new Uint8Array(8);
+                crypto.getRandomValues(bytes);
+                clientId = 'deviceId-' + Array.from(bytes, b => b.toString(16).padStart(2, '0')).join('');
+                localStorage.setItem('ledDeviceId', clientId);
+            }
+            console.log(clientId);
             initMqtt(clientId, 'yx/device/foodRecord/needUpdate', 'led', {
                 username: process.env.VUE_APP_LED_MQTT_USERNAME,
                 password: process.env.VUE_APP_LED_MQTT_PASSWORD,
-                head: 'ws'
+                head: 'wss'
             }).then((res) => {
                 console.log(res);
                 callBackMqttMessage('led', (data) => {