Vue 实现MQTT通信

通常，你需要在 Vue 3 项目中安装 MQTT 客户端库，然后在需要使用 MQTT 的组件或模块中引入并使用它。下面是一个简单的示例：

1. 使用 MQTT 客户端库，并连接到了一个 MQTT 服务器，订阅一个主题，并在接收到消息时更新了组件的数据。

首先，安装 MQTT.js：

npm install mqtt --save

然后，在 Vue 3 组件中引入并使用 MQTT 客户端库：

import mqtt from 'mqtt';

export default {
  data() {
    return {
      client: null,
      message: ''
    };
  },
  mounted() {
    // 连接到 MQTT 服务器
    this.client = mqtt.connect('mqtt://broker.example.com');

    // 订阅主题
    this.client.subscribe('topic/example');

    // 监听消息
    this.client.on('message', (topic, message) => {
      this.message = message.toString();
    });
  },
  beforeUnmount() {
    // 断开与 MQTT 服务器的连接
    this.client.end();
  }
}

2. 发送 MQTT 消息，已经连接到 MQTT 服务器的客户端实例来发布消息

import mqtt from 'mqtt';

export default {
  data() {
    return {
      client: null,
      messageToSend: ''
    };
  },
  mounted() {
    // 连接到 MQTT 服务器
    this.client = mqtt.connect('mqtt://broker.example.com');
  },
  methods: {
    sendMessage() {
      // 发布消息到指定主题
      this.client.publish('topic/example', this.messageToSend);
      // 清空消息输入框
      this.messageToSend = '';
    }
  },
  beforeUnmount() {
    // 断开与 MQTT 服务器的连接
    this.client.end();
  }
}

定义了一个 sendMessage 方法，当用户点击发送按钮时调用该方法。在 sendMessage 方法中，我们使用 this.client.publish 方法来向指定主题发布消息，发布的消息内容是用户在输入框中输入的消息。发送消息后，我们还清空了输入框中的内容。这样，当用户在 Vue  应用程序中执行发送操作时，就会向 MQTT 服务器发送消息。请确保在发送消息之前已经成功连接到 MQTT 服务器，并订阅了相应的主题。