vue使用mqtt（二十三）

vue使用mqtt

之前以為自己寫了，但是后來發現沒寫，所有來補上，其實這些個通信在寫法上都是差不多的，只是用不同而已，適應的場景不同。
解釋：作為mqtt而言，還是訂閱發布的形式嗎，不多說了，開始補作業

1.先安裝

npm install mqtt --save

2.使用位置

這個東西還是建議用到哪個地方就放在哪個地方
你可以放在一個公共的組件里面，或者進行約束好 放在App.vue

3.開始使用

引入庫文件 定義相應的變量

    // 使用mqtt接收推送消息
    import mqtt from 'mqtt'

    const options = {
        connectTimeout: 4000,
        username: 'mqtt的登錄名稱',
        password: 'mqtt的密碼',
        clean: true
    }

建議把mqtt的對象 掛載到公共的變量， 賦值成全局的變量，這樣使用起來方便，
建立一個公共的文件 gloab.js ，存儲獲取連接成功的mqtt的對象

//gloab.js
 export default {
    // 接收消息的對象
    ws: {},
    setWs: function(newWs) {
        this.ws = newWs
    },
  }

	// 將mqtt的連接對象賦值成全局的
      this.global.setCompulsoryWs(mqtt.connect('ws://地址:8083/mqtt', options))
      this.global.CompulsoryWs.on('connect', () => {
          this.global.CompulsoryWs.subscribe('mqtt的訂閱主題', {qos: 2}, (error) => {
              if (!error) {
                  console.log('（mqtt）監聽中', '時間:', new Date().toLocaleString())
              } else {
                  console.log('（mqtt）訂閱失敗')
              }
          })

      })


      // 接收消息處理
      this.global.CompulsoryWs.on('message', (topic, message) => {
          console.log('收到來自', topic, '的消息', message.toString())
      })
      // 斷開發起重連
      this.global.CompulsoryWs.on('reconnect', (error) => {
          console.log('（mqtt）正在重連:', error, '時間:', new Date().toLocaleString())
      })
      // 鏈接異常處理
      this.global.CompulsoryWs.on('error', (error) => {
          console.log('（mqtt）連接失敗:', error)
      })

注意：

qos 的三種模式 ，根據自己的需求進行使用
再有就是 你要是進行了全局的賦值 在進行連接的時候 要把那個清理掉 要不然容易出問題

this.global.setCompulsoryWs({})

還有就是版本問題，使用的時候根據自己的要求查看情況，要是出現解決不了的問題，降低版本試試