From 7372ec452ef2d185ccfd981fb837c139f968d6a5 Mon Sep 17 00:00:00 2001
From: lld <15027638633@163.com>
Date: Sun, 28 Dec 2025 23:41:48 +0800
Subject: [PATCH] mqtt

---
 pages/demo/index.vue | 669 +++++++++++++++++++++++++++++++------------
 1 file changed, 491 insertions(+), 178 deletions(-)

diff --git a/pages/demo/index.vue b/pages/demo/index.vue
index 240be9d..97a09f4 100644
--- a/pages/demo/index.vue
+++ b/pages/demo/index.vue
@@ -1,220 +1,533 @@
-
 <template>
   <view class="container">
-    <uni-section :title="lastTopic" type="line" padding>
-      <uni-grid :column="4" border-color="#03a9f4">
-        <uni-grid-item :index="0">
-          <view class="grid-item-box">
-            <text class="text">{{ data.temp1 }} </text>
-            <text class="text"> 温度1 ℃</text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item :index="1">
-          <view class="grid-item-box">
-            <text class="text">{{ data.temp2 }}</text>
-            <text class="text"> 温度2 </text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item :index="2">
-          <view class="grid-item-box">
-            <text class="text">{{ data.temp3 }}</text>
-            <text class="text"> 温度3 </text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item :index="3">
-          <view class="grid-item-box">
-            <text class="text">{{ data.temp4 }}</text>
-            <text class="text"> 温度4 </text>
-          </view>
-        </uni-grid-item>
-      </uni-grid>
-      <uni-grid :column="4" border-color="#03a9f4">
-        <uni-grid-item :index="0">
-          <view class="grid-item-box">
-            <text class="text">{{ data.humi1 }}</text>
-            <text class="text"> 湿度1 </text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item :index="1">
-          <view class="grid-item-box">
-            <text class="text">{{ data.humi2 }}</text>
-            <text class="text"> 湿度2 </text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item :index="2">
-          <view class="grid-item-box">
-            <text class="text">{{ data.humi3 }}</text>
-            <text class="text"> 湿度3 </text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item :index="3">
-          <view class="grid-item-box">
-            <text class="text">{{ data.humi4 }}</text>
-            <text class="text"> 湿度4 %RH</text>
-          </view>
-        </uni-grid-item>
-      </uni-grid>
-    </uni-section>
+    <!-- 连接配置区域 -->
+    <view class="config-section">
+      <view class="section-title">MQTT连接配置</view>
+      <form @submit="handleConnect">
+        <view class="form-item">
+          <label>服务器地址：</label>
+          <input
+              v-model="mqttConfig.broker"
+              type="text"
+              placeholder="如：ws://test.mosquitto.org:8080/mqtt"
+              class="form-input"
+          />
+        </view>
+        <view class="form-item" v-if="false">
+          <label>客户端ID：</label>
+          <input
+              v-model="mqttConfig.clientId"
+              type="text"
+              placeholder="自动生成或自定义"
+              class="form-input"
+          />
+        </view>
+        <view class="form-item">
+          <label>用户名：</label>
+          <input
+              v-model="mqttConfig.username"
+              type="text"
+              placeholder="可选"
+              class="form-input"
+          />
+        </view>
+        <view class="form-item">
+          <label>密码：</label>
+          <input
+              v-model="mqttConfig.password"
+              type="password"
+              placeholder="可选"
+              class="form-input"
+          />
+        </view>
+        <view class="form-item" v-if="false">
+          <label>连接超时：</label>
+          <input
+              v-model.number="mqttConfig.timeout"
+              type="number"
+              placeholder="默认30秒"
+              class="form-input"
+          />
+        </view>
+
+        <view class="btn-group">
+          <button
+              type="primary"
+              :disabled="isConnected"
+              @click="handleConnect"
+          >
+            连接
+          </button>
+          <button
+              type="warn"
+              :disabled="!isConnected"
+              @click="handleDisconnect"
+          >
+            断开连接
+          </button>
+        </view>
+      </form>
+    </view>
+
+    <!-- 订阅区域 -->
+    <view class="subscribe-section" v-if="isConnected">
+      <view class="section-title">主题订阅</view>
+      <view class="form-item">
+        <label>订阅主题：</label>
+        <input
+            v-model="subscribeTopic"
+            type="text"
+            placeholder="如：test/topic"
+            class="form-input"
+        />
+      </view>
+      <button
+          type="primary"
+          @click="handleSubscribe"
+      >
+        订阅
+      </button>
+
+      <!-- 已订阅主题列表 -->
+      <view class="topic-list" v-if="subscribedTopics.length">
+        <view class="list-title">已订阅主题：</view>
+        <view
+            class="topic-item"
+            v-for="(topic, index) in subscribedTopics"
+            :key="index"
+        >
+          {{topic}}
+          <button
+              size="mini"
+              type="warn"
+              @click="handleUnsubscribe(topic)"
+          >
+            取消订阅
+          </button>
+        </view>
+      </view>
+    </view>
+
+
+    <!-- 消息日志区域 -->
+    <view class="log-section">
+      <view class="section-title">消息日志</view>
+      <scroll-view
+          class="log-content"
+          scroll-y="true"
+          :style="{height: logHeight + 'px'}"
+      >
+        <view
+            class="log-item"
+            v-for="(log, index) in messageLogs"
+            :key="index"
+            :class="{'received': log.type === 'received', 'sent': log.type === 'sent', 'system': log.type === 'system'}"
+        >
+          <view class="log-time">{{log.time}}</view>
+          <view class="log-type">{{log.type === 'received' ? '接收' : log.type === 'sent' ? '发送' : '系统'}}</view>
+          <view class="log-topic">主题：{{log.topic}}</view>
+          <view class="log-message">内容：{{log.message}}</view>
+        </view>
+      </scroll-view>
+    </view>
+
+
+    <!-- 发布消息区域 -->
+    <view class="publish-section" v-if="isConnected">
+      <view class="section-title">发布消息</view>
+      <view class="form-item">
+        <label>发布主题：</label>
+        <input
+            v-model="publishTopic"
+            type="text"
+            placeholder="如：test/topic"
+            class="form-input"
+        />
+      </view>
+      <view class="form-item">
+        <label>消息内容：</label>
+        <textarea
+            v-model="publishMessage"
+            placeholder="输入要发布的消息内容"
+            class="form-textarea"
+        ></textarea>
+      </view>
+      <button
+          type="primary"
+          @click="handlePublish"
+      >
+        发布消息
+      </button>
+    </view>
+
+
   </view>
 </template>
 
 <script>
-import mqtt from 'mqtt/dist/mqtt.js' //引入mqtt依赖
-// 然后 mqtt.connect(...)
-
-let client = null
+import mqtt from 'mqtt/dist/mqtt.min'
 
 export default {
   data() {
     return {
-      connected: false,
-      data: {
-        temp1: null,
-        humi1: null,
-        temp2: null,
-        humi2: null,
-        temp3: null,
-        humi3: null,
-        temp4: null,
-        humi4: null,
+      // MQTT配置
+      mqttConfig: {
+        broker: 'ws://1.94.254.176:9001/mqtt', // 公共测试服务器
+        clientId: 'uniapp_mqtt_' + Math.random().toString(16).substr(2, 8),
+        username: 'admin',
+        password: 'Admin#12345678',
+        timeout: 30
       },
-      lastTopic: "设备" + '',
-      lastRaw: ''
+      // 连接状态
+      isConnected: false,
+      client: null,
+      // 订阅相关
+      subscribeTopic: '',
+      subscribedTopics: [],
+      // 发布相关
+      publishTopic: '',
+      publishMessage: '',
+      // 消息日志
+      messageLogs: [],
+      logHeight: 300 // 日志区域高度
     }
   },
-  onShow() {
-    const clientId = 'uniapp_' + Date.now() + '_' + Math.floor(Math.random() * 100000)
-
-    client = mqtt.connect('ws://1.94.254.176:9001', {
-      clientId,
-      username: 'admin',          // 没有就删
-      password: 'Admin#12345678',        // 没有就删
-      clean: true,
-      reconnectPeriod: 2000,
-      connectTimeout: 5000
-    })
-
-    client.on('connect', () => {
-      this.connected = true
-      client.subscribe('dtu/+/up', { qos: 0 })
-    })
-
-    client.on('message', (topic, payload) => {
-      const s = payload.toString()
-      this.lastRaw = s
-
-      // 只处理JSON（混二进制就直接丢）
-      if (!(s.startsWith('{') && s.endsWith('}'))) return
-      let obj
-      try {
-        obj = JSON.parse(s)
-        const allKeysNumeric = Object.keys(obj).every(key => /^\d+$/.test(key));
-        if (Object.keys(obj).length <= 0 || !allKeysNumeric) {
-          return;
-        }
-      } catch(e) { return }
-
-      // 你的键：温度101~104、湿度201~204（按你之前约定温度/10、湿度/10）
-      const div10 = (v) => (v == null ? null : Math.round((Number(v)/10)*10)/10)
-      this.lastTopic = "设备【" + topic+"】"
-      this.data = {
-        temp1: div10(obj["201"]),
-        humi1: div10(obj["101"]),
-        temp2: div10(obj["202"]),
-        humi2: div10(obj["102"]),
-        temp3: div10(obj["203"]),
-        humi3: div10(obj["103"]),
-        temp4: div10(obj["204"]),
-        humi4: div10(obj["104"])
+  onReady() {
+    // 计算日志区域高度
+    uni.getSystemInfo({
+      success: (res) => {
+        this.logHeight = res.windowHeight - 600
       }
     })
-
-    client.on('close', () => { this.connected = false })
-    client.on('error', () => { this.connected = false })
   },
   onUnload() {
-    try { client && client.end(true) } catch(e) {}
+    // 页面卸载时断开连接
+    if (this.client && this.isConnected) {
+      this.client.end()
+    }
+  },
+  methods: {
+    // 添加日志
+    addLog(type, topic, message) {
+      const time = new Date().toLocaleTimeString()
+      this.messageLogs.unshift({
+        time,
+        type, // received/sent/system
+        topic,
+        message
+      })
+      // 限制日志数量
+      if (this.messageLogs.length > 100) {
+        this.messageLogs.pop()
+      }
+    },
 
-//     页面上直接展示：
-//
-// 连接状态 connected
-//
-//     temp1/humi1 … temp4/humi4
-//
-//     lastTopic 和 lastRaw（排查时非常有用）
-  },
-  onHide() {
-    client && client.end(true)
-  },
+    // 连接MQTT服务器
+    handleConnect() {
+      if (!this.mqttConfig.broker) {
+        uni.showToast({
+          title: '请输入服务器地址',
+          icon: 'none'
+        })
+        return
+      }
+
+      try {
+        // 配置连接选项
+        const options = {
+          clientId: this.mqttConfig.clientId || 'uniapp_mqtt_' + Math.random().toString(16).substr(2, 8),
+          username: this.mqttConfig.username,
+          password: this.mqttConfig.password,
+          connectTimeout: (this.mqttConfig.timeout || 30) * 1000,
+          keepalive: 60,
+          clean: true
+        }
+
+        // 创建客户端并连接
+        this.client = mqtt.connect(this.mqttConfig.broker, options)
+
+        // 连接成功回调
+        this.client.on('connect', () => {
+          this.isConnected = true
+          this.addLog('system', '', 'MQTT连接成功')
+          uni.showToast({
+            title: '连接成功',
+            icon: 'success'
+          })
+        })
+
+        // 接收消息回调
+        this.client.on('message', (topic, message) => {
+          this.addLog('received', topic, message.toString())
+        })
+
+        // 连接断开回调
+        this.client.on('close', () => {
+          this.isConnected = false
+          this.subscribedTopics = []
+          this.addLog('system', '', 'MQTT连接已断开')
+        })
+
+        // 错误回调
+        this.client.on('error', (error) => {
+          this.isConnected = false
+          this.addLog('system', '', '连接错误：' + error.message)
+          uni.showToast({
+            title: '连接失败：' + error.message,
+            icon: 'none',
+            duration: 3000
+          })
+        })
+      } catch (error) {
+        this.addLog('system', '', '连接异常：' + error.message)
+        uni.showToast({
+          title: '连接异常：' + error.message,
+          icon: 'none',
+          duration: 3000
+        })
+      }
+    },
+
+    // 断开连接
+    handleDisconnect() {
+      if (this.client) {
+        this.client.end()
+        this.isConnected = false
+        this.subscribedTopics = []
+        this.addLog('system', '', '已手动断开MQTT连接')
+        uni.showToast({
+          title: '已断开连接',
+          icon: 'success'
+        })
+      }
+    },
+
+    // 订阅主题
+    handleSubscribe() {
+      if (!this.subscribeTopic) {
+        uni.showToast({
+          title: '请输入订阅主题',
+          icon: 'none'
+        })
+        return
+      }
+
+      if (this.subscribedTopics.includes(this.subscribeTopic)) {
+        uni.showToast({
+          title: '该主题已订阅',
+          icon: 'none'
+        })
+        return
+      }
+
+      this.client.subscribe(this.subscribeTopic, (error) => {
+        if (error) {
+          this.addLog('system', '', '订阅失败：' + error.message)
+          uni.showToast({
+            title: '订阅失败',
+            icon: 'none'
+          })
+        } else {
+          this.subscribedTopics.push(this.subscribeTopic)
+          this.addLog('system', this.subscribeTopic, '订阅成功')
+          uni.showToast({
+            title: '订阅成功',
+            icon: 'success'
+          })
+        }
+      })
+    },
+
+    // 取消订阅
+    handleUnsubscribe(topic) {
+      this.client.unsubscribe(topic, (error) => {
+        if (error) {
+          this.addLog('system', topic, '取消订阅失败：' + error.message)
+          uni.showToast({
+            title: '取消订阅失败',
+            icon: 'none'
+          })
+        } else {
+          this.subscribedTopics = this.subscribedTopics.filter(item => item !== topic)
+          this.addLog('system', topic, '取消订阅成功')
+          uni.showToast({
+            title: '取消订阅成功',
+            icon: 'success'
+          })
+        }
+      })
+    },
+
+    // 发布消息
+    handlePublish() {
+      if (!this.publishTopic) {
+        uni.showToast({
+          title: '请输入发布主题',
+          icon: 'none'
+        })
+        return
+      }
+
+      if (!this.publishMessage) {
+        uni.showToast({
+          title: '请输入消息内容',
+          icon: 'none'
+        })
+        return
+      }
+
+      this.client.publish(this.publishTopic, this.publishMessage, (error) => {
+        if (error) {
+          this.addLog('system', this.publishTopic, '发布失败：' + error.message)
+          uni.showToast({
+            title: '发布失败',
+            icon: 'none'
+          })
+        } else {
+          this.addLog('sent', this.publishTopic, this.publishMessage)
+          uni.showToast({
+            title: '发布成功',
+            icon: 'success'
+          })
+          // 清空消息输入框
+          this.publishMessage = ''
+        }
+      })
+    }
+  }
 }
-
 </script>
 
 <style scoped>
 .container {
-  padding: 20rpx;
+  padding: 15px;
   background-color: #f5f5f5;
   min-height: 100vh;
 }
 
-.text {
-  font-size: 22px;
-  font-weight: bolder;
-  display: inline-block;
-}
-.text:nth-child(even) {
-  font-size: 14px;
-  margin-top: 5px;
-  color: #9c9c9c;
-}
-
-.example-body {
-  /* #ifndef APP-NVUE */
-  // display: block;
-  /* #endif */
-}
-
-.grid-dynamic-box {
+.config-section, .subscribe-section, .publish-section, .log-section {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 15px;
   margin-bottom: 15px;
 }
 
-.grid-item-box {
-  flex: 1;
-  // position: relative;
-  /* #ifndef APP-NVUE */
+.section-title {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 15px;
+  color: #333;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 8px;
+}
+
+.form-item {
   display: flex;
-  /* #endif */
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 15px 0;
+  margin-bottom: 12px;
 }
 
-.grid-item-box-row {
-  flex: 1;
-  // position: relative;
-  /* #ifndef APP-NVUE */
+.form-item label {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 5px;
+}
+
+.form-input {
+  height: 40px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  padding: 0 10px;
+  font-size: 14px;
+}
+
+.form-textarea {
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  padding: 10px;
+  font-size: 14px;
+  min-height: 100px;
+}
+
+.btn-group {
   display: flex;
-  /* #endif */
-  flex-direction: row;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.btn-group button {
+  flex: 1;
+}
+
+.topic-list {
+  margin-top: 15px;
+}
+
+.list-title {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 8px;
+}
+
+.topic-item {
+  display: flex;
+  justify-content: space-between;
   align-items: center;
-  justify-content: center;
-  padding: 15px 0;
+  padding: 8px 10px;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+  margin-bottom: 5px;
 }
 
-
-/* #ifdef H5 */
-@media screen and (min-width: 768px) and (max-width: 1425px) {
-  .swiper {
-    height: 630px;
-  }
+.log-section {
+  margin-top: 15px;
 }
 
-@media screen and (min-width: 1425px) {
-  .swiper {
-    height: 830px;
-  }
+.log-content {
+  background-color: #f9f9f9;
+  border-radius: 4px;
+  padding: 10px;
 }
 
-/* #endif */
-</style>
+.log-item {
+  padding: 8px;
+  border-bottom: 1px solid #eee;
+  margin-bottom: 5px;
+  font-size: 14px;
+}
+
+.log-item.received {
+  background-color: #e8f5e9;
+  border-radius: 4px;
+}
+
+.log-item.sent {
+  background-color: #e3f2fd;
+  border-radius: 4px;
+}
+
+.log-item.system {
+  background-color: #fff8e1;
+  border-radius: 4px;
+}
+
+.log-time {
+  color: #999;
+  font-size: 12px;
+  margin-bottom: 3px;
+}
+
+.log-type {
+  font-weight: bold;
+  margin-bottom: 3px;
+}
+
+.log-topic {
+  color: #666;
+  margin-bottom: 3px;
+}
+
+.log-message {
+  color: #333;
+}
+</style>
\ No newline at end of file