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. 如何使用
- 页面引入此js,会自动连接mqtt服务器。
//#ifdef MP-ALIPAY import mqtt from "../../common/utils/alimqtt"; //#endif
- 订阅主题
onLoad(option) { //初始化时订阅该主题,当收到消息后自动调用deviceReceiveMsg方法 mqtt.subscribe('device', 0, this.deviceReceiveMsg); }
- 消息接收
methods: { deviceReceiveMsg(topic, msgObj) { //mqtt收到消息 console.log('当前主题' + topic) console.log('消息内容' + msgObj) } }
- 消息发送
mqtt.publish("device", "测试消息", 0)