当前位置：首页 > VUE

vue界面实现mqtt

2026-01-15 07:12:05VUE

实现Vue界面集成MQTT通信

安装MQTT客户端库 在Vue项目中安装mqtt库，通过npm或yarn执行安装命令：

npm install mqtt --save
# 或
yarn add mqtt

创建MQTT服务封装 新建src/utils/mqttClient.js文件，封装MQTT连接逻辑：

vue界面实现mqtt

import mqtt from 'mqtt'

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

let client = null

export function connectMQTT(brokerUrl) {
  client = mqtt.connect(brokerUrl, options)

  client.on('connect', () => {
    console.log('MQTT connected')
  })

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

  return client
}

export function subscribe(topic) {
  if (client) {
    client.subscribe(topic, { qos: 0 }, (err) => {
      if (!err) console.log(`Subscribed to ${topic}`)
    })
  }
}

export function publish(topic, message) {
  if (client) {
    client.publish(topic, message, { qos: 0 })
  }
}

export function disconnect() {
  if (client) {
    client.end()
    client = null
  }
}

Vue组件中使用MQTT 在组件中导入并使用封装好的MQTT方法：

import { connectMQTT, subscribe, publish, disconnect } from '@/utils/mqttClient'

export default {
  data() {
    return {
      receivedMessages: [],
      inputTopic: '',
      inputMessage: ''
    }
  },
  mounted() {
    connectMQTT('ws://broker.emqx.io:8083/mqtt')
    subscribe('test/topic')

    this.$mqtt = this.$root.$mqtt || {}
    this.$mqtt.client = this.$root.$mqtt.client

    this.$mqtt.client.on('message', (topic, message) => {
      this.receivedMessages.push({
        topic,
        message: message.toString()
      })
    })
  },
  methods: {
    sendMessage() {
      publish(this.inputTopic, this.inputMessage)
      this.inputMessage = ''
    }
  },
  beforeDestroy() {
    disconnect()
  }
}

界面模板示例

vue界面实现mqtt

<template>
  <div>
    <div>
      <input v-model="inputTopic" placeholder="Enter topic">
      <input v-model="inputMessage" placeholder="Enter message">
      <button @click="sendMessage">Publish</button>
    </div>

    <div>
      <h3>Received Messages:</h3>
      <ul>
        <li v-for="(msg, index) in receivedMessages" :key="index">
          {{ msg.topic }}: {{ msg.message }}
        </li>
      </ul>
    </div>
  </div>
</template>

安全注意事项