mqtt vue

// MQTT与Vue集成的示例代码

<template>
  <div>
    <h1>MQTT 消息订阅</h1>
    <button @click="connect">连接</button>
    <button @click="disconnect" :disabled="!client || !client.connected">断开</button>
    <input v-model="message" placeholder="输入消息">
    <button @click="publishMessage" :disabled="!client || !client.connected">发布</button>
    <ul>
      <li v-for="(msg, index) in messages" :key="index">{{ msg }}</li>
    </ul>
  </div>
</template>

<script>
import { mqtt } from 'mqtt';

export default {
  data() {
    return {
      client: null,
      message: '',
      messages: []
    };
  },
  methods: {
    connect() {
      this.client = mqtt.connect('wss://test.mosquitto.org:8080');

      this.client.on('connect', () => {
        console.log('Connected to MQTT broker');
        this.client.subscribe('vue-mqtt-demo');
      });

      this.client.on('message', (topic, message) => {
        this.messages.push(`${topic}: ${message.toString()}`);
      });
    },
    disconnect() {
      if (this.client && this.client.connected) {
        this.client.end();
        console.log('Disconnected from MQTT broker');
      }
    },
    publishMessage() {
      if (this.client && this.client.connected && this.message) {
        this.client.publish('vue-mqtt-demo', this.message);
        this.message = '';
      }
    }
  }
};
</script>

解释说明

1. 模板部分 (<template>):

   • 包含了几个按钮和一个输入框，用于连接、断开MQTT客户端，以及发布消息。
   • 使用 v-model 绑定输入框的值到 data 中的 message 属性。
   • 使用 v-for 循环显示接收到的消息列表。

2. 脚本部分 (<script>):

   • 导入了 mqtt 库，并在 data 中定义了 client, message, 和 messages 属性。
   • connect 方法用于连接到MQTT代理，并订阅主题 vue-mqtt-demo。
   • disconnect 方法用于断开与MQTT代理的连接。
   • publishMessage 方法用于发布消息到指定的主题。
   • 监听 connect 和 message 事件，分别处理连接成功和接收消息的情况。