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

本文涉及的产品
云消息队列RocketMQ,TPS总和2000次/秒
简介: 支付宝小程序集成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
  1. 订阅主题
onLoad(option) {
 //初始化时订阅该主题,当收到消息后自动调用deviceReceiveMsg方法
     mqtt.subscribe('device', 0, this.deviceReceiveMsg);
 }
  1. 消息接收
methods: {
    deviceReceiveMsg(topic, msgObj) {
      //mqtt收到消息
      console.log('当前主题' + topic)
      console.log('消息内容' + msgObj)
    }
  }
  1. 消息发送
mqtt.publish("device", "测试消息", 0)
相关实践学习
RocketMQ一站式入门使用
从源码编译、部署broker、部署namesrv,使用java客户端首发消息等一站式入门RocketMQ。
消息队列 MNS 入门课程
1、消息队列MNS简介 本节课介绍消息队列的MNS的基础概念 2、消息队列MNS特性 本节课介绍消息队列的MNS的主要特性 3、MNS的最佳实践及场景应用 本节课介绍消息队列的MNS的最佳实践及场景应用案例 4、手把手系列:消息队列MNS实操讲 本节课介绍消息队列的MNS的实际操作演示 5、动手实验:基于MNS,0基础轻松构建 Web Client 本节课带您一起基于MNS,0基础轻松构建 Web Client
目录
相关文章
|
18天前
|
小程序 开发工具 Android开发
Donut多端框架小程序打包适配ios和安卓app
腾讯新出了一个 Donut 多端框架,可以直接将微信小程序转成 ios 和 安卓 app,小程序开发者工具里也集成了 app 相关升级、调试和打包的功能,终于可以一套代码开发出3个客户端了!
53 0
Donut多端框架小程序打包适配ios和安卓app
|
21天前
|
JSON 小程序 Android开发
小程序列表左滑效果在IOS呈上下滑动影响样式
小程序列表左滑效果在IOS呈上下滑动影响样式
23 0
|
21天前
|
小程序 Android开发 iOS开发
在钉钉小程序中安卓无法打开webview
在钉钉小程序中安卓无法打开webview
22 1
|
3月前
|
小程序 Android开发 iOS开发
微信小程序-虚拟支付:适用场景 / iPhone调试用支付成功,Android调用失败,提示“小程序支付能力已被限制” / “errMsg“.“requestPayment:fail banned”
微信小程序-虚拟支付:适用场景 / iPhone调试用支付成功,Android调用失败,提示“小程序支付能力已被限制” / “errMsg“.“requestPayment:fail banned”
78 0
|
3月前
|
移动开发 小程序 Android开发
支付宝小程序IOS连接mqtt接收AMQJS0007E Socket error
支付宝小程序IOS连接mqtt接收AMQJS0007E Socket error
21 0
|
3月前
|
小程序 iOS开发
uniapp中IOS端小程序底部黑线适配的方法(整理)
uniapp中IOS端小程序底部黑线适配的方法(整理)
|
6月前
|
小程序 API Android开发
小程序获取WIFI的API(IOS conncetWifi()自动跳转设置页)
小程序获取WIFI的API(IOS conncetWifi()自动跳转设置页)
133 0
|
6月前
|
小程序 JavaScript 前端开发
基于安卓Android微信小程序的汽车租赁小程序-app
随着信息技术和网络技术的飞速发展,人类已进入全新信息化时代,传统管理技术已无法高效,便捷地管理信息。为了迎合时代需求,优化管理效率,各种各样的管理系统应运而生,各行各业相继进入信息管理时代,汽车租赁小程序就是信息时代变革中的产物之一。任何系统都要遵循系统设计的基本流程,本系统也不例外,同样需要经过市场调研,需求分析,概要设计,详细设计,编码,测试这些步骤,基于Java语言、微信小程序技术设计并实现了汽车租赁小程序。系统主要包括系统首页、个人中心、用户管理、驾驶证管理、车辆品牌管理、车辆信息管理、预约租赁管理、汽车租赁管理、还车信息管理、费用结算管理、系统管理等功能模块。本文首先介绍了汽车租赁小
181 0
|
小程序 前端开发 Shell
接入 mPaaS 小程序并实现启动 iOS 版| 学习笔记
快速学习接入 mPaaS 小程序并实现启动 iOS 版。
503 0
接入 mPaaS 小程序并实现启动 iOS 版| 学习笔记
|
小程序 IDE API
iOS 端预览和调试小程序| 学习笔记
快速学习 iOS 端预览和调试小程序。
171 0
iOS 端预览和调试小程序| 学习笔记
相关产品
云迁移中心
推荐文章
更多