vue中 mqtt的发布及订阅

在 Vue 中使用 MQTT，一般需要安装 `paho-mqtt` 库。可以通过 `npm` 进行安装：

npm install paho-mqtt --save

接下来，我们可以在 Vue 的组件中使用 `paho-mqtt` 库进行 MQTT 的发布和订阅。

首先，需要创建一个 MQTT 的客户端连接对象，可以在 Vue 组件的 `created` 生命周期中进行创建：

created() {
  // 创建 MQTT 客户端连接对象
  this.client = new Paho.MQTT.Client("localhost", 8000, "clientId");
  // 连接服务器
  this.client.connect({ onSuccess: this.onConnect });
},

其中，`Paho.MQTT.Client` 是 `paho-mqtt` 库提供的 MQTT 客户端连接对象。它的构造函数需要传入三个参数：

- `host`：MQTT 服务器的主机名或 IP 地址；
- `port`：MQTT 服务器的端口号；
- `clientId`：客户端 ID。

接下来，我们可以在 `onConnect` 回调函数中订阅 MQTT 主题：

onConnect() {
  // 订阅主题
  this.client.subscribe("testTopic");
},

其中，`this.client.subscribe` 方法用于订阅 MQTT 主题，需要传入一个主题名称作为参数。

当客户端收到 MQTT 消息时，会触发 `onMessageArrived` 回调函数。可以在该函数中处理接收到的消息：

onMessageArrived(message) {
  console.log("Received message:", message.payloadString);
},

最后，我们可以在 Vue 组件中定义发布消息的方法：

methods: {
  // 发布消息
  publishMessage() {
    const message = new Paho.MQTT.Message("Hello, MQTT!");
    message.destinationName = "testTopic";
    this.client.send(message);
  },
},

其中，`Paho.MQTT.Message` 是 `paho-mqtt` 库提供的 MQTT 消息对象。它的构造函数需要传入一个字符串作为消息内容。接着，我们需要为消息设置目标主题，然后通过 `this.client.send` 方法将消息发送出去。

完整的代码示例如下：

<template>
  <div>
    <button @click="publishMessage">发布消息</button>
  </div>
</template>

<script>
import Paho from "paho-mqtt";

export default {
  data() {
    return {
      client: null,
    };
  },
  created() {
    // 创建 MQTT 客户端连接对象
    this.client = new Paho.MQTT.Client("localhost", 8000, "clientId");
    // 连接服务器
    this.client.connect({ onSuccess: this.onConnect });
  },
  methods: {
    // MQTT 连接成功回调函数
    onConnect() {
      // 订阅主题
      this.client.subscribe("testTopic");
    },
    // MQTT 收到消息回调函数
    onMessageArrived(message) {
      console.log("Received message:", message.payloadString);
    },
    // 发布消息
    publishMessage() {
      const message = new Paho.MQTT.Message("Hello, MQTT!");
      message.destinationName = "testTopic";
      this.client.send(message);
    },
  },
  mounted() {
    // 注册 MQTT 消息接收回调函数
    this.client.onMessageArrived = this.onMessageArrived;
  },
};
</script>