Vue項目中MQTT如何使用

本篇文章為大家展示了 Vue項目中MQTT如何使用，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

安裝 MQTT 客戶端庫

1. 通過命令行安裝：

   可以使用 npm 或 yarn 命令，二者選一

• npm install mqtt --save

  
  

• yarn add mqtt

  
  

2. 通過 CDN 引入

   <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>

   
   

3. 下載到本地，然后使用相對路徑引入

   <script src="/your/path/to/mqtt.min.js"></script>

   
   

MQTT 的使用

連接 MQTT 服務器

本文將使用 EMQ X 提供的 免費公共 MQTT 服務器，該服務基于 EMQ X 的 MQTT 物聯網云平臺 創建。服務器接入信息如下：

• Broker: broker.emqx.io

• TCP Port: 1883

• Websocket Port: 8083

連接關鍵代碼：

<script>
import mqtt from 'mqtt'

export default {
  data() {
    return {
      connection: {
        host: 'broker.emqx.io',
        port: 8083,
        endpoint: '/mqtt',
        clean: true, // 保留會話
        connectTimeout: 4000, // 超時時間
        reconnectPeriod: 4000, // 重連時間間隔
        // 認證信息
        clientId: 'mqttjs_3be2c321',
        username: 'emqx_test',
        password: 'emqx_test',
      },
      subscription: {
        topic: 'topic/mqttx',
        qos: 0,
      },
      publish: {
        topic: 'topic/browser',
        qos: 0,
        payload: '{ "msg": "Hello, I am browser." }',
      },
      receiveNews: '',
      qosList: [
        { label: 0, value: 0 },
        { label: 1, value: 1 },
        { label: 2, value: 2 },
      ],
      client: {
        connected: false,
      },
      subscribeSuccess: false,
    }
  },

  methods: {
    // 創建連接
    createConnection() {
      // 連接字符串, 通過協議指定使用的連接方式
      // ws 未加密 WebSocket 連接
      // wss 加密 WebSocket 連接
      // mqtt 未加密 TCP 連接
      // mqtts 加密 TCP 連接
      // wxs 微信小程序連接
      // alis 支付寶小程序連接
      const { host, port, endpoint, ...options } = this.connection
      const connectUrl = `ws://${host}:${port}${endpoint}`
      try {
        this.client = mqtt.connect(connectUrl, options)
      } catch (error) {
        console.log('mqtt.connect error', error)
      }
      this.client.on('connect', () => {
        console.log('Connection succeeded!')
      })
      this.client.on('error', error => {
        console.log('Connection failed', error)?
      })
      this.client.on('message', (topic, message) => {
        this.receiveNews = this.receiveNews.concat(message)
        console.log(`Received message ${message} from topic ${topic}`)
      })
    },
  }
}
</script>

訂閱主題

doSubscribe() {
  const { topic, qos } = this.subscription
  this.client.subscribe(topic, qos, (error, res) => {
    if (error) {
      console.log('Subscribe to topics error', error)
      return
    }
    this.subscribeSuccess = true
    console.log('Subscribe to topics res', res)
 	})
},

取消訂閱

doUnSubscribe() {
  const { topic } = this.subscription
  this.client.unsubscribe(topic, error => {
    if (error) {
      console.log('Unsubscribe error', error)
    }
  })
}

消息發布

doPublish() {
  const { topic, qos, payload } = this.publication
  this.client.publish(topic, payload, qos, error => {
    if (error) {
      console.log('Publish error', error)
    }
  })
}

斷開連接

destroyConnection() {
  if (this.client.connected) {
    try {
      this.client.end()
      this.client = {
        connected: false,
      }
      console.log('Successfully disconnected!')
    } catch (error) {
      console.log('Disconnect failed', error.toString())
    }
  }
}

上述內容就是 Vue項目中MQTT如何使用，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。