一、MQTT通信介紹

MQTT 是一種基于客戶端服務(wù)端架構(gòu)的發(fā)布/訂閱模式的消息傳輸協(xié)議。它的設(shè)計(jì)思想是輕巧、開放、 簡單、規(guī)范，易于實(shí)現(xiàn)。這些特點(diǎn)使得它對很多場景來說都是很好的選擇，特別是對于受限的環(huán)境如機(jī)器與機(jī)器的通信（M2M）以及物聯(lián)網(wǎng)環(huán)境（IoT）

關(guān)鍵詞解釋：
subscribe：訂閱某個(gè)主題，未來這個(gè)主題收到的消息都會(huì)發(fā)給你
publish：發(fā)送消息給某個(gè)主題，只要是訂閱了這個(gè)主題的客戶端，都會(huì)收到這條消息
Payload：發(fā)送的數(shù)據(jù)，一般數(shù)據(jù)格式為string、hex(16進(jìn)制字符串)、json，這個(gè)由前后端商定
QoS： 分為三個(gè)等級，0:最多交付一次， 1:至少交付一次， 2:只交付一次
其中，使用 QoS 0 可能丟失消息，使用 QoS 1 可以保證收到消息，但消息可能重復(fù)，使用 QoS 2 可以保證消息既不丟失也不重復(fù)。QoS 等級從低到高，不僅意味著消息可靠性的提升，也意味著傳輸復(fù)雜程度的提升。
Retain：遺囑消息，客戶端訂閱某個(gè)主題后，會(huì)將這個(gè)主題之前最近一次的消息發(fā)送過來。
適用場景：比如某個(gè)溫度傳感器，設(shè)置的每隔1個(gè)小時(shí)發(fā)送一次溫度數(shù)據(jù)，剛好某個(gè)app要展示這個(gè)溫度傳感器數(shù)據(jù)，打開app的時(shí)候，剛好錯(cuò)過溫度傳感器上次一發(fā)送數(shù)據(jù)，正常情況下需要再等待1個(gè)小時(shí)，但是如果設(shè)置消息為Retain，app打開之后，依舊可以收到溫度傳感器上一次發(fā)送的數(shù)據(jù)

二、小程序使用mqtt的準(zhǔn)備工作

微信公眾平臺配置mqtt接口地址，必須是加密版的socket

image.png

三、小程序使用mqtt4.1.0.js

此處需要用wxs,請注意!!!

image.png

// pages/mqtt/index.js
const mqtt = require('../../utils/mqtt4.1.0.js');


Page({
  data: {
    client: null,
    isConnecting: false, //是否連接
  },
  onLoad(options) {

  },
  onShow() {

  },
  /**mqtt連接,不支持發(fā)送16進(jìn)制buffer數(shù)據(jù)，暫棄用*/
  connectmqtt() {
    var _that = this
    const options = {
      keepalive: 30,
      //protocolVersion: 4, //MQTT V3.1.1
      connectTimeout: 4000,
      clientId: 'mqttx_' + Math.random().toString(16).substr(2, 8), //這個(gè)地方最好用一個(gè)隨機(jī)字符串方法生成
      port: 8084,
      username: '',
      password: '',
    }
    //此處需要用wxs,請注意!!!
    let client = client = mqtt.connect(`wxs://broker.emqx.io/mqtt`, options);
    this.data.client = client;
    client.on('connect', (e) => {
      console.log('服務(wù)器連接成功', e)
      client.subscribe('abc', {
        qos: 1
      }, function (err, granted) {
        if (!err) {
          _that.data.isConnecting = true;
          console.log('訂閱成功', err, granted)
          wx.showToast({
            title: '訂閱成功',
            icon: 'none'
          })
        }
      })
    })
    //信息監(jiān)聽
    client.on('message', function (topic, massage) {
      console.log('收到topic：' + topic)
      console.log('收到massage：' + massage)
      // console.log('收到轉(zhuǎn)化：' + _that.ab2hex(massage))
    })
    client.on('reconnect', (error) => {
      console.log('正在重連', error)
      _that.data.isConnecting = false;
    })
    client.on('error', (error) => {
      console.log('連接失敗', error)
      _that.data.isConnecting = false;
    })
    // 連接斷開后觸發(fā)的回調(diào) 
    client.on("close", function () {
      console.log("已斷開連接")
      _that.data.isConnecting = false;
    });
    // 客戶端脫機(jī)下線觸發(fā)回調(diào) 
    client.on("offline", function () {
      console.log("您已斷開連接，請檢查網(wǎng)絡(luò)")
      _that.data.isConnecting = false;
    });
    //當(dāng)客戶端發(fā)送任何數(shù)據(jù)包時(shí)發(fā)出。這包括publish()以及MQTT用于管理訂閱和連接的包 
    client.on("packetsend", (packet) => {
      console.log("客戶端已發(fā)出報(bào)文", packet);
    });
    //取消訂閱
    // client.unsubscribe("adc");
  },
  //mqtt發(fā)送數(shù)據(jù)，只支持string，不支持16進(jìn)制buffer
  mqttSend(msg) {
    if (!this.data.isConnecting) {
      wx.showToast({
        title: '未連接',
        icon: 'none'
      })
      return;
    }
    this.data.client.publish('abc', msg, {
      qos: 0
    }, function (err) {
      console.log('send', err)
    })
  },
  /**將ArrayBuffer轉(zhuǎn)換成字符串*/
  ab2hex(buffer) {
    var hexArr = Array.prototype.map.call(
      new Uint8Array(buffer),
      function (bit) {
        return ('00' + bit.toString(16)).slice(-2)
      }
    )
    return hexArr.join('');
  },
  clickHandler(e) {
    const operation = e.currentTarget.dataset.operation;
    const _that = this;
    switch (operation) {
      case 1: //初始化mqtt并連接
        this.connectmqtt();
        break;
      case 2: //發(fā)送
        this.mqttSend(`{"company":"半島醫(yī)療"}`);
        break;
      case 3: //斷開連接
        if (!this.data.isConnecting) {
          wx.showToast({
            title: '未連接',
            icon: 'none'
          })
          return;
        }
        this.data.isConnecting = false;
        this.data.client.end();
        break;
      case 4: //取消訂閱
        if (!this.data.isConnecting) {
          wx.showToast({
            title: '未連接',
            icon: 'none'
          })
          return;
        }
        this.data.client.unsubscribe('adc', function (err) {
          if (!err) {
            //_that.data.isConnecting = false;
            console.log('取消訂閱成功', err)
          }
        })
        break;
      default:
        break;
    }
  },
})

四：mqtt測試服務(wù)器和測試工具推薦
因?yàn)榇蟛糠智岸艘话悴蛔龊蠖斯ぷ?，所以?huì)出現(xiàn)小程序連接mqtt失敗、發(fā)送消息失敗等問題。但是無法確認(rèn)是前端問題還是后端問題，這里推薦EMQX官方提供的測試工具和公共測試服務(wù)器，當(dāng)使用后端配置的mqtt服務(wù)，調(diào)試出現(xiàn)問題的時(shí)候，可以用來測試，如果是正常的，大概率是你們后端配置的mqtt有問題了。

###mqtt測試工具
https://www.emqx.com/zh/products/mqttx

###mqtt公共測試服務(wù)器
https://www.emqx.com/zh/mqtt/public-mqtt5-broker

mqtt測試服務(wù)器官網(wǎng)首頁

image.png

mqtt測試工具創(chuàng)建一個(gè)服務(wù)

image.png

mqtt測試工具創(chuàng)建一個(gè)訂閱

image.png