js mqtt4.1.0.js的基本使用

一、MQTT通信介绍

MQTT 是一种基于客户端服务端架构的发布/订阅模式的消息传输协议。它的设计思想是轻巧、开放、 简单、规范，易于实现。这些特点使得它对很多场景来说都是很好的选择，特别是对于受限的环境如机器与机器的通信（M2M）以及物联网环境（IoT）

关键词解释：
subscribe：订阅某个主题，未来这个主题收到的消息都会发给你
publish：发送消息给某个主题，只要是订阅了这个主题的客户端，都会收到这条消息
Payload：发送的数据，一般数据格式为string、hex(16进制字符串)、json，这个由前后端商定
QoS： 分为三个等级，0:最多交付一次， 1:至少交付一次， 2:只交付一次
其中，使用 QoS 0 可能丢失消息，使用 QoS 1 可以保证收到消息，但消息可能重复，使用 QoS 2 可以保证消息既不丢失也不重复。QoS 等级从低到高，不仅意味着消息可靠性的提升，也意味着传输复杂程度的提升。
Retain：遗嘱消息，客户端订阅某个主题后，会将这个主题之前最近一次的消息发送过来。
适用场景：比如某个温度传感器，设置的每隔1个小时发送一次温度数据，刚好某个app要展示这个温度传感器数据，打开app的时候，刚好错过温度传感器上次一发送数据，正常情况下需要再等待1个小时，但是如果设置消息为Retain，app打开之后，依旧可以收到温度传感器上一次发送的数据

二、小程序使用mqtt的准备工作

微信公众平台配置mqtt接口地址，必须是加密版的socket

image.png
下载mqtt4.1.0.js地址：
链接：https://pan.baidu.com/s/16X0T4rAexe4gDUkkcclbKQ?pwd=abcd
提取码：abcd

三、小程序使用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连接,不支持发送16进制buffer数据，暂弃用*/
  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), //这个地方最好用一个随机字符串方法生成
      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('服务器连接成功', e)
      client.subscribe('abc', {
        qos: 1
      }, function (err, granted) {
        if (!err) {
          _that.data.isConnecting = true;
          console.log('订阅成功', err, granted)
          wx.showToast({
            title: '订阅成功',
            icon: 'none'
          })
        }
      })
    })
    //信息监听
    client.on('message', function (topic, massage) {
      console.log('收到topic：' + topic)
      console.log('收到massage：' + massage)
      // console.log('收到转化：' + _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;
    })
    // 连接断开后触发的回调 
    client.on("close", function () {
      console.log("已断开连接")
      _that.data.isConnecting = false;
    });
    // 客户端脱机下线触发回调 
    client.on("offline", function () {
      console.log("您已断开连接，请检查网络")
      _that.data.isConnecting = false;
    });
    //当客户端发送任何数据包时发出。这包括publish()以及MQTT用于管理订阅和连接的包 
    client.on("packetsend", (packet) => {
      console.log("客户端已发出报文", packet);
    });
    //取消订阅
    // client.unsubscribe("adc");
  },
  //mqtt发送数据，只支持string，不支持16进制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转换成字符串*/
  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: //发送
        this.mqttSend(`{"company":"半岛医疗"}`);
        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测试服务器和测试工具推荐
因为大部分前端一般不做后端工作，所以会出现小程序连接mqtt失败、发送消息失败等问题。但是无法确认是前端问题还是后端问题，这里推荐EMQX官方提供的测试工具和公共测试服务器，当使用后端配置的mqtt服务，调试出现问题的时候，可以用来测试，如果是正常的，大概率是你们后端配置的mqtt有问题了。

###mqtt测试工具
https://www.emqx.com/zh/products/mqttx

###mqtt公共测试服务器
https://www.emqx.com/zh/mqtt/public-mqtt5-broker

mqtt测试服务器官网首页

image.png

mqtt测试工具创建一个服务

image.png

mqtt测试工具创建一个订阅

image.png