提交

ruoyi-ui/src/settings.js

@@ -1,5 +1,5 @@
 module.exports = {
-  urls: `http://192.168.101.86:8099`,
+  urls: `http://192.168.101.245:8099`,
    // urls: `http://10.90.90.53:8099`,
   // 10.90.90.52 192.168.101.245
   // 10.90.90.53

ruoyi-ui/src/views/shipinggaoj/mqtt/index.vue

@@ -76,7 +76,7 @@ export default {
 		messageToSend:'',
 		mqttConfig:{
 			url: 'ws://13.229.167.76:1884/mqtt',
-			topic: 'test/topic'
+			topic: 'test'
 		},
 	};
   },
@@ -118,7 +118,6 @@ export default {
 		      // 订阅主题
 		      client.subscribe(this.mqttConfig.topic, (err) => {
 		        if (err) {
-
 		          console.error('Subscribe error:', err)
 		        }
 		      })

ruoyi-ui/src/views/shipinggaoj/shebecanshu/index.vue

@@ -214,6 +214,7 @@ export default {
       startTime: 0, // 开始录制的时间点
       videoTimer: 0,
        camera_ip: '192.168.101.86:8000',
+       // 127.0.0.1:8000
        showRecordt:false,
        numg:0,
     };

ruoyi-ui/src/views/shipinggaoj/shebecanshuhuabu/index.vue

@@ -43,6 +43,12 @@
   </div>
 </template>
 <script>
+// import mqttHandle from "../../../utils/mqttHandler.js"
+import mqtt from 'mqtt';
+import { MqttClient } from 'mqtt'
+// 状态变量
+ // const client = mqtt.connect('ws://13.229.167.76:1884/mqtt')
+ var client = MqttClient||null
 export default {
   data() {
     return {
@@ -116,6 +122,19 @@ export default {
         //   },
         // },
       ],
+      connectionStatus:'',
+      isConnected:false,
+      connecting:false,
+      messages:[{ type: 'sent' , content: '', timestamp: '' }],
+      messageToSend:[],
+      mqttConfig:{
+      	url: 'ws://13.229.167.76:1884/mqtt',
+      	topic: 'test'
+      },
+      mqttThemeName:{
+      	url: 'ws://13.229.167.76:1884/mqtt',
+      	topic: 'test'
+      },
       // [
       //   {"polygon": {"x1":700,"y1":273,"x2":975,"y2":278,"x3":1107,"y3":368,"x4":718,"y4":354}}
       // ]
@@ -130,10 +149,30 @@ export default {
       this.initCanvas();
       this.getImage();
     });
+    this.toggleConnection()
+    // this.mqttzz()
     // setTimeout(() => {
     // }, 500);
   },
   methods: {
+    // 创mqtt最终版
+    mqttzz(){
+      // 创建一个连接到MQTT broker的客户端实例
+         // 连接成功后，订阅一个主题
+         client.on('connect', function () {
+           client.subscribe('test', function (err) {
+             if (!err) {
+               console.log('成功订阅 test 主题！')
+             }
+           })
+         })
+
+         // 监听订阅主题上的消息
+         client.on('message', function (topic, message) {
+           // 处理接收到的消息
+           console.log('收到主题 ' + topic + ' 的消息: ' + message.toString())
+         })
+    },
     initCanvas() {
       // 初始化canvas画布
 
@@ -314,10 +353,79 @@ export default {
       });
       this.submitData = objectPoints;
       console.log("最终提交数据", objectPoints);
-      this.$router.go(-1)
+      this.messageToSend = objectPoints
+      this.sendMessage()
+      // this.$router.go(-1)
+    },
+    toggleConnection(){
+      if (this.isConnected) {
+        // 断开连接
+        client.end()
+        this.isConnected= false
+        this.connectionStatus = 'Disconnected'
+        return
+      }
+
+      // 建立连接
+      this.connecting = true
+      try {
+        client= mqtt.connect(this.mqttConfig.url, {
+          clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8),
+          keepalive: 60,
+          clean: true,
+          connectTimeout: 4000,
+          reconnectPeriod: 1000
+        })
+        client.on('connect', () => {
+          this.isConnected = true
+          this.connectionStatus= 'Connected'
+          this.connecting = false
+          console.log(3)
+          // 订阅主题
+          client.subscribe(this.mqttConfig.topic, (err) => {
+            if (err) {
+              console.error('Subscribe error:', err)
+            }else{
+               console.log('成功订阅 test 主题！')
+            }
 
+          })
+        })
+        client.on('message', (topic, message) => {
+          // 接受信息
+          console.log(topic,message)
+          this.messages.unshift({
+            type: 'received',
+            content: message.toString(),
+            timestamp: new Date().toLocaleTimeString()
+          })
+        })
+        client.on('error', (err) => {
+          console.error('MQTT Error:', err)
+          this.connectionStatus= 'Error'
+          this.connecting = false
+        })
+      } catch (error) {
+        console.error('Connection error:', error)
+        this.connectionStatus= 'Error'
+        this.connecting = false
+      }
+    },
+    sendMessage(){
+
+      if (!client || !this.messageToSend) return
+      this.messageToSend = JSON.stringify(this.messageToSend)
+      console.log(this.messageToSend)
+      client.publish(this.mqttConfig.topic, this.messageToSend)
+      this.messages.unshift({
+        type: 'sent',
+        content: this.messageToSend,
+        timestamp: new Date().toLocaleTimeString()
+      })
+      this.messageToSend = []
     },
     renderDatas() {
+
       // 将提交数据数据转换成画布坐标
       this.drawedPoints = this.submitData.map((item) => {
         let polygon = item.polygon;