【MQTT】Vue中使用mqtt

在Vue中使用MQTT，你可以使用mqtt包。首先，安装mqtt包：

npm install mqtt --save

然后，在Vue组件中使用：

<template>
  <div>
    <p>MQTT Message: {{ message }}</p>
  </div>
</template>
 
<script>
import mqtt from 'mqtt';
 
export default {
  data() {
    return {
      client: null,
      message: ''
    };
  },
  methods: {
    connectMqtt() {
      this.client = mqtt.connect('mqtt://broker.hivemq.com');
 
      this.client.on('connect', () => {
        console.log('Connected to MQTT Broker');
        this.client.subscribe('vue_mqtt_test');
      });
 
      this.client.on('message', (topic, message) => {
        // Convert the message to a string and update the data property
        this.message = message.toString();
      });
 
      this.client.on('error', (error) => {
        console.log('Error from MQTT: ', error);
      });
    }
  },
  mounted() {
    this.connectMqtt();
  },
  beforeDestroy() {
    if (this.client) {
      this.client.end();
    }
  }
};
</script>

在这个例子中，我们连接到了一个公共的MQTT代理broker.hivemq.com，订阅到了vue_mqtt_test主题，并在组件被销毁前断开连接。你可以根据自己的需求修改代理地址、主题以及其他配置。