vue.js+mqtt.js 封装插件以及使用方法

这是一个使用 MQTT.js 的 Vue.js 插件的使用说明文档。该插件允许你在 Vue.js 应用中全局使用 MQTT.js。

安装

首先，你需要在你的项目中安装 MQTT.js。你可以通过 npm 来安装：

npm install mqtt --save

封装插件

// 导入 mqtt 库
import * as mqtt from 'mqtt'

export default {
  install(Vue) {
    // 在 Vue 的原型上添加一个名为 $mqtt 的方法
    Vue.prototype.$mqtt = (url, topics, option) => {
      // 设置 MQTT 客户端的选项
      const options = {
        reconnectPeriod: 1000, // 如果连接断开，客户端将在1秒后尝试重新连接
        ...option
      }

      // 创建一个新的 MQTT 客户端并连接到服务器
      const client = mqtt.connect(url, options)

      // 当客户端连接到服务器时，打印一条消息并订阅主题
      client.on('connect', () => {
        console.log('MQTT client connected')
        // 订阅主题
        topics && topics.forEach(topic => client.subscribe(topic))
      })

      // 当客户端遇到错误时，打印错误消息
      client.on('error', (error) => {
        console.error('MQTT client encountered an error:', error)
      })

      // 当客户端正在尝试重新连接时，打印一条消息
      client.on('reconnect', () => {
        console.log('MQTT client is attempting to reconnect')
      })

      // 返回一个对象，该对象包含一些方法，这些方法可以在 Vue 组件中使用
      return {
        // 收到消息时的回调函数
        message: (callback) => {
          client.on('message', (topic, message) => {
            callback(topic, message.toString())
          })
        },
        // 发送消息
        publish: function(topic, message, callback) {
          client.publish(topic, message)
          callback()
        },

        // 关闭客户端
        end: callback => {
          client.end()
          callback()
        }
      }
    }
  }
}

然后，将上述代码保存为 mqttPlugin.js 文件，并将其放在你的项目的 src/plugins 目录下。

使用

在你的 Vue 组件中，你可以使用 $mqtt 方法来创建一个新的 MQTT 客户端。以下是 $mqtt 方法的参数：

• url：MQTT 服务器的 URL。
• topics：一个数组，包含你想要订阅的主题。
• option：一个对象，包含 MQTT 客户端的选项。这个对象会和默认选项合并。默认选项包括 reconnectPeriod: 1000，表示如果连接断开，客户端将在1秒后尝试重新连接。

$mqtt 方法返回一个对象，该对象包含以下方法：

• message(callback)：设置一个回调函数，当收到任何主题的消息时，该回调函数会被调用。回调函数接受两个参数，即主题和消息的内容（字符串格式）。
• publish(topic, message, callback)：向指定主题发送一个消息，然后调用回调函数。
• end(callback)：关闭 MQTT 客户端，然后调用回调函数。

示例

以下是一个如何在 Vue 组件中使用 mqttPlugin 插件的示例：

<template>
  <div>
    <button @click="connect">Connect</button>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mqttClient: null
    }
  },
  methods: {
    connect() {
      this.mqttClient = this.$mqtt('mqtt://test.mosquitto.org', ['topic1', 'topic2'])

      this.mqttClient.message((topic, message) => {
        console.log(`Received message on ${topic}: ${message}`)
      })
    },
    sendMessage() {
      this.mqttClient.publish('topic1', 'Hello, MQTT!', () => {
        console.log('Message sent')
      })
    },
    disconnect() {
      this.mqttClient.end(() => {
        console.log('MQTT client disconnected')
      })
    }
  },
  beforeDestroy() {
    // 在组件销毁时关闭 MQTT 客户端
    this.disconnect()
  },
}
</script>

在这个示例中，当你点击 “Connect” 按钮时，会创建一个新的 MQTT 客户端并连接到服务器。当你点击 “Send Message” 按钮时，会向 topic1 发送一个消息。当你离开当前页面路由，会断开 MQTT 客户端的连接。