当前位置：首页 > VUE

vue实现mqtt收发

2026-03-09 07:29:35VUE

Vue 中实现 MQTT 通信

安装 MQTT 客户端库

在 Vue 项目中安装 mqtt 库，支持浏览器和 Node.js 环境：

npm install mqtt --save

连接 MQTT 服务器

在 Vue 组件中引入并创建 MQTT 客户端：

vue实现mqtt收发

import mqtt from 'mqtt';

const client = mqtt.connect('ws://mqtt.eclipse.org:80/mqtt');

订阅主题

连接成功后订阅指定主题：

client.on('connect', () => {
  client.subscribe('topic/test', (err) => {
    if (!err) console.log('订阅成功');
  });
});

接收消息

监听 message 事件处理接收到的消息：

vue实现mqtt收发

client.on('message', (topic, message) => {
  console.log(`收到主题 ${topic} 的消息: ${message.toString()}`);
  // 可更新 Vue 的 data 或触发方法
});

发送消息

通过 publish 方法发送消息：

methods: {
  sendMessage() {
    client.publish('topic/test', 'Hello MQTT');
  }
}

断开连接

组件销毁时关闭连接：

beforeDestroy() {
  client.end();
}

完整组件示例

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
    <div>接收消息: {{ receivedMsg }}</div>
  </div>
</template>

<script>
import mqtt from 'mqtt';

export default {
  data() {
    return {
      client: null,
      receivedMsg: ''
    };
  },
  mounted() {
    this.client = mqtt.connect('ws://mqtt.eclipse.org:80/mqtt');

    this.client.on('connect', () => {
      this.client.subscribe('topic/test');
    });

    this.client.on('message', (topic, message) => {
      this.receivedMsg = message.toString();
    });
  },
  methods: {
    sendMessage() {
      this.client.publish('topic/test', 'Hello from Vue');
    }
  },
  beforeDestroy() {
    this.client.end();
  }
};
</script>