支付宝小程序集成mqtt兼容IOS和安卓

1. 前言

​ 去年就想做支付宝小程序接入mqtt协议。但最终多方咨询，问客服问社区得到的答案都是支付宝小程序不能直接支持mqtt协议。偶然间发现徐宏大神的佳作，终于发现了xmqtt.js这个好东西。它实现了支付宝小程序完美接入mqtt协议，设备可以正常连接、订阅、收发消息。这里站在巨人的肩膀上分享下，接入xmqtt.js的全过程。

2. xmqtt.js

xmqtt.js免费0积分下载地址https://download.csdn.net/download/qq_35921773/88306608

3. 封装api

新建alimqtt.js，这里为了便于使用，我们对他进行一次封装。

let xmqtt = require('./xmqtt.js');
var mqtt = {};
import { uuid } from 'vue-uuid';
const host = 'alis://'+process.env.SERVER_HOST+':8084/mqtt';
//client对象
var client = null;
var options={protocolVersion: 4, //MQTT连接协议版本clientId: 'wxapp_client_'+uuid.v1(),myAli: null,clean: true,password: 'dd',username: 'admin',reconnectPeriod: 3000, //1000毫秒，两次重新连接之间的间隔connectTimeout: 30 * 1000, //1000毫秒，两次重新连接之间的间隔resubscribe: true //如果连接断开并重新连接，则会再次自动订阅已订阅的主题（默认true）
}
//订阅的主题与回掉方法
var map = new Map();/*** mqtt 连接状态* 0:正在连接* 1:连接成功建立* 2:连接正在关闭* 3:连接已经关闭*/
let connectStatus = 0;//初始化weboscket
mqtt.initMqtt = () => {//开始连接if(null == client){console.log('连接mqtt服务器',host,options)client = xmqtt.connect(host, options);}client.on('connect', function (connack) {console.log('连接成功')})//服务器下发消息的回调client.on("message", function (topic, payload) {console.log(" 收到 topic:" + topic + " , payload :" + payload)})//服务器连接异常的回调client.on("error", function (error) {console.log(" 服务器 error 的回调" + error)})//服务器重连连接异常的回调，一般是域名或者服务器不存在client.on("reconnect", function () {console.log(" 服务器 reconnect的回调")})//服务器连接异常的回调client.on("offline", function (err) {console.log(" 服务器offline的回调"+JSON.stringify(err))})
}/*** 订阅主题* topic：主题名称* qos：服务质量*/
mqtt.subscribe = function(topic, qos, receiveCallback) {if (client && client.connected) {//仅订阅单个主题client.subscribe(topic, function (err, granted) {if (!err) {console.log('订阅主题成功')map.set('device',receiveCallback);} else {console.log('订阅主题失败')}})} else {console.log('请先连接服务器')setTimeout(function() {mqtt.subscribe(topic, qos, receiveCallback);}, 1000)}
}/*** 取消订阅主题* topic：主题名称*/
mqtt.unsubscribe = function(topic) {if (client && client.connected) {client.unsubscribe(topic);map.delete('device')} else {console.log('请先连接服务器')setTimeout(function() {mqtt.unsubscribe(topic);}, 1000)}
}/*** 发送消息* message：消息内容* topic：主题* qos：服务质量*/
mqtt.publish = function(message, topic, qos) {if (client && client.connected) {client.publish(topic, message,qos);console.log('发布成功')} else {console.log('请先连接服务器')uni.showToast({title: '正在重新连接服务器，请稍后重试',icon: 'none',duration: 2000})setTimeout(function() {mqtt.publish(message, topic, qos);}, 1000)}
}/*** 关闭连接*/
mqtt.disconnect = function() {console.log("关闭mqtt连接");if (null != client) {client.disconnect();} else {//Do-nothing}client = null;
}mqtt.initMqtt();export default mqtt;

4. 如何使用

1. 页面引入此js，会自动连接mqtt服务器。

   //#ifdef MP-ALIPAY
   import mqtt from "../../common/utils/alimqtt";
   //#endif
   

2. 订阅主题

    onLoad(option) {//初始化时订阅该主题，当收到消息后自动调用deviceReceiveMsg方法mqtt.subscribe('device', 0, this.deviceReceiveMsg);}
   

3. 消息接收

     methods: {deviceReceiveMsg(topic, msgObj) {//mqtt收到消息console.log('当前主题' + topic)console.log('消息内容' + msgObj)}}
   

4. 消息发送

    mqtt.publish("device", "测试消息", 0)