当前位置：首页 > VUE

vue实现mqtt收发

2026-02-17 18:55:50VUE

安装MQTT客户端库

在Vue项目中安装MQTT.js库，这是JavaScript中最常用的MQTT客户端实现：

npm install mqtt --save

建立MQTT连接

在Vue组件中引入mqtt并创建连接：

import mqtt from 'mqtt'

const options = {
  clean: true,
  connectTimeout: 4000,
  clientId: 'vue_client_' + Math.random().toString(16).substr(2, 8),
  username: 'your_username',
  password: 'your_password'
}

const client = mqtt.connect('wss://mqtt.example.com:8083/mqtt', options)

处理连接事件

设置连接状态变化的回调函数：

vue实现mqtt收发

client.on('connect', () => {
  console.log('Connected to MQTT Broker')
})

client.on('error', (error) => {
  console.error('Connection error:', error)
})

client.on('reconnect', () => {
  console.log('Reconnecting...')
})

订阅主题

在连接成功后订阅需要的主题：

const topic = 'your/topic'
client.subscribe(topic, { qos: 0 }, (error) => {
  if (error) {
    console.error('Subscribe error:', error)
  } else {
    console.log(`Subscribed to ${topic}`)
  }
})

接收消息

设置消息接收的回调函数：

vue实现mqtt收发

client.on('message', (topic, message) => {
  console.log(`Received message from ${topic}: ${message.toString()}`)
  // 在这里处理接收到的消息
})

发布消息

通过publish方法发送消息到指定主题：

const publishMessage = (topic, message) => {
  client.publish(topic, message, { qos: 0, retain: false }, (error) => {
    if (error) {
      console.error('Publish error:', error)
    }
  })
}

// 使用示例
publishMessage('your/topic', 'Hello MQTT')

断开连接

在组件销毁时断开MQTT连接：

// 在Vue组件的beforeDestroy或onUnmounted钩子中
client.end(true, () => {
  console.log('Disconnected from MQTT Broker')
})

完整组件示例

<template>
  <div>
    <button @click="publish">Publish Message</button>
    <div v-for="(msg, index) in messages" :key="index">{{ msg }}</div>
  </div>
</template>

<script>
import mqtt from 'mqtt'

export default {
  data() {
    return {
      client: null,
      messages: []
    }
  },
  mounted() {
    this.initMQTT()
  },
  beforeDestroy() {
    if (this.client) {
      this.client.end()
    }
  },
  methods: {
    initMQTT() {
      this.client = mqtt.connect('wss://mqtt.example.com:8083/mqtt', {
        clientId: 'vue_client_' + Math.random().toString(16).substr(2, 8)
      })

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

      this.client.on('message', (topic, message) => {
        this.messages.push(message.toString())
      })
    },
    publish() {
      if (this.client && this.client.connected) {
        this.client.publish('your/topic', 'Hello from Vue')
      }
    }
  }
}
</script>