From c6babaa262b1d4116e86f750509b10fc8ad0f4ea Mon Sep 17 00:00:00 2001 From: fengerli <528575642@qq.com> Date: Sat, 9 Aug 2025 09:47:50 +0800 Subject: [PATCH] =?UTF-8?q?=E8=BF=9B=E5=BA=A6=E6=9D=A1=E5=8A=A0=E8=BD=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/6170/deviceControl/index.vue | 20 +++++++++++-- utils/mqtt.js | 48 ++++++++++++++++++++---------- utils/request.js | 2 +- 3 files changed, 51 insertions(+), 19 deletions(-) diff --git a/pages/6170/deviceControl/index.vue b/pages/6170/deviceControl/index.vue index 2bc8527..e205ef5 100644 --- a/pages/6170/deviceControl/index.vue +++ b/pages/6170/deviceControl/index.vue @@ -912,7 +912,18 @@ icon: 'none' }) } + }, + handleMqttLost() { + this.Progress = { + ...this.Progress, + show: false, // 隐藏进度条 + }; + uni.showToast({ + title: '网络异常', + icon: 'none' + }); } + }, onLoad(options) { const eventChannel = this.getOpenerEventChannel(); @@ -973,9 +984,10 @@ this.selectedImage = ''; // 清空已选图片 } } - }); - }); + }) + // 设置连接丢失回调 + uni.$on('mqttConnectionLost', this.handleMqttLost); if (this.apiType === 'listA') { this.fetchDeviceDetail(data.data.id) } else { @@ -995,6 +1007,10 @@ if (this.mqttClient) { this.mqttClient.disconnect(); } + uni.$off('mqttConnectionLost', this.handleMqttLost); + if (this.mqttClient) { + this.mqttClient.disconnect(); + } }, } diff --git a/utils/mqtt.js b/utils/mqtt.js index a95a486..999405b 100644 --- a/utils/mqtt.js +++ b/utils/mqtt.js @@ -1,5 +1,5 @@ // 兼容性补丁：为 Paho MQTT 提供 uni-app 环境下的 WebSocket 实现 -(function (root) { +(function(root) { // 如果未能找到全局对象，则无法应用补丁。 if (!root) { console.error("MQTT Polyfill: 未能找到全局对象 (global/window/self 均未定义)。"); @@ -10,7 +10,7 @@ if (typeof root.WebSocket !== 'undefined') { return; } - + console.log("MQTT Polyfill: 正在为 uni-app 应用 WebSocket 兼容性补丁。"); class WebSocket { @@ -26,8 +26,11 @@ const errText = JSON.stringify(err) || "Empty error object"; console.error(`uni.connectSocket 失败: ${errText}`); if (this.onerror) { - const errorMessage = (err && err.errMsg) ? err.errMsg : "uni.connectSocket call failed"; - this.onerror({ message: errorMessage }); + const errorMessage = (err && err.errMsg) ? err.errMsg : + "uni.connectSocket call failed"; + this.onerror({ + message: errorMessage + }); } } }); @@ -53,22 +56,29 @@ console.error(`WebSocket polyfill 错误: ${errText}`); if (this.onerror) { // Paho expects an object that can be stringified, not a real Error object. - const errorMessage = (err && err.errMsg) ? err.errMsg : "WebSocket connection failed in uni-app"; - this.onerror({ message: errorMessage }); + const errorMessage = (err && err.errMsg) ? err.errMsg : + "WebSocket connection failed in uni-app"; + this.onerror({ + message: errorMessage + }); } }); socketTask.onMessage((res) => { if (this.onmessage) { // Paho 期望事件对象有一个 'data' 属性 - this.onmessage({ data: res.data }); + this.onmessage({ + data: res.data + }); } }); } send(data) { if (this.readyState === WebSocket.OPEN) { - this._socketTask.send({ data: data }); + this._socketTask.send({ + data: data + }); } else { console.error('WebSocket polyfill: send() 在非 OPEN 状态下被调用。'); throw new Error('WebSocket is not open'); @@ -109,7 +119,7 @@ import Paho from 'paho-mqtt'; import allConfigs from '../config/index.js'; // 根据环境选择正确的配置 -const env = 'development';//production //开发of线上 改这里就行 +const env = 'production'; //production //开发of线上 改这里就行 const config = allConfigs[env]; class MqttClient { @@ -138,18 +148,22 @@ class MqttClient { try { // Paho-MQTT 的客户端需要 host, port, path, clientId this.client = new Paho.Client(brokerUrl, Number(brokerPort), "/mqtt", this.options.clientId); - + this.onConnectCallback = onConnectCallback; // 设置回调 this.client.onConnectionLost = (responseObject) => { if (responseObject.errorCode !== 0) { console.log("MQTT连接丢失: " + responseObject.errorMessage); - // 可以在此添加重连逻辑 + // 发送全局事件 + uni.$emit('mqttConnectionLost', { + error: responseObject.errorMessage, + timestamp: Date.now() + }); } }; - this.client.onMessageArrived = (message) => { + this.client.onMessageArrived = (message) => { const topic = message.destinationName; const payload = message.payloadString; console.log(`收到消息, 主题: ${topic}, 内容: ${payload}`); @@ -158,7 +172,7 @@ class MqttClient { this.messageCallbacks.get(topic)(payload); } }; - + const connectOptions = { timeout: 4, userName: this.options.username, @@ -192,7 +206,9 @@ class MqttClient { subscribe(topic, onMessageCallback) { if (this.client && this.client.isConnected()) { console.log(`尝试订阅主题: ${topic}`); - this.client.subscribe(topic, { qos: 1 }); + this.client.subscribe(topic, { + qos: 1 + }); // 存储该主题的回调函数 this.messageCallbacks.set(topic, onMessageCallback); } else { @@ -216,7 +232,7 @@ class MqttClient { console.error('MQTT未连接，无法发布'); } } - + /** * 取消订阅 * @param {String} topic - 需要取消订阅的主题 @@ -246,4 +262,4 @@ class MqttClient { } } -export default MqttClient; \ No newline at end of file +export default MqttClient; \ No newline at end of file diff --git a/utils/request.js b/utils/request.js index a5f55e2..375949b 100644 --- a/utils/request.js +++ b/utils/request.js @@ -1,5 +1,5 @@ import config from '../config/index.js'; -const env = 'development'; //production development //开发of线上 改这里就行 +const env = 'production'; //production development //开发of线上 改这里就行 const BASE = config[env]; const request = (options) => { console.log("options"+JSON.stringify(options),BASE.BASE_URL)