vue3 mqtt 消息发送

要在 Vue3 中发送 MQTT 消息，你需要先安装一个 MQTT 客户端库，比如 Paho MQTT JavaScript 客户端。

安装 Paho MQTT 客户端:

npm install paho-mqtt --save

然后在 Vue 组件中使用 Paho MQTT 客户端来发送消息。以下是一个简单的实现：

<template>
  <div>
    <input type="text" v-model="message" />
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
import mqtt from 'paho-mqtt';

export default {
  data() {
    return {
      message: '',
      client: null,
    };
  },
  mounted() {
    // 创建一个 MQTT 客户端实例
    this.client = new mqtt.Client('broker.mqttdashboard.com', 8000, 'clientId');
    
    // 连接 MQTT 服务器
    this.client.connect({
      onSuccess: () => {
        console.log('Connected');
      },
    });
  },
  methods: {
    sendMessage() {
      // 发送消息
      this.client.send('/topic/test', this.message);
    },
  },
};
</script>

以上代码中，我们首先将 Paho MQTT 客户端引入到组件中，然后在组件的 `mounted` 钩子中，创建一个 MQTT 客户端实例并连接到 MQTT 服务器。在 `sendMessage` 方法中，我们可以通过 `client.send` 方法向指定的主题发送消息。