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

简介: 支付宝小程序集成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版
本实验将带您快速体验使用云消息队列RocketMQ版Serverless系列实例进行获取接入点、创建Topic、创建订阅组、收发消息、查看消息轨迹和仪表盘。
消息队列 MNS 入门课程
1、消息队列MNS简介 本节课介绍消息队列的MNS的基础概念 2、消息队列MNS特性 本节课介绍消息队列的MNS的主要特性 3、MNS的最佳实践及场景应用 本节课介绍消息队列的MNS的最佳实践及场景应用案例 4、手把手系列:消息队列MNS实操讲 本节课介绍消息队列的MNS的实际操作演示 5、动手实验:基于MNS,0基础轻松构建 Web Client 本节课带您一起基于MNS,0基础轻松构建 Web Client
目录
相关文章
|
27天前
|
安全 数据挖掘 Android开发
Cellebrite UFED 4PC 7.72 (Windows) - Android 和 iOS 移动设备取证软件
Cellebrite UFED 4PC 7.72 (Windows) - Android 和 iOS 移动设备取证软件
98 2
Cellebrite UFED 4PC 7.72 (Windows) - Android 和 iOS 移动设备取证软件
|
7月前
|
JavaScript 前端开发 Android开发
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
216 13
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
2月前
|
物联网 Linux 开发者
快速部署自己私有MQTT-Broker-下载安装到运行不到一分钟,快速简单且易于集成到自己项目中
本文给物联网开发的朋友推荐的是GMQT,让物联网开发者快速拥有合适自己的MQTT-Broker,本文从下载程序到安装部署手把手教大家安装用上私有化MQTT服务器。
833 5
|
7月前
|
安全 Android开发 数据安全/隐私保护
Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
295 12
Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
|
7月前
|
JavaScript 搜索推荐 Android开发
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
227 8
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
|
7月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
227 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
7月前
|
缓存 Java 测试技术
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
823 3
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
|
5月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
459 12
|
8月前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
294 0

热门文章

最新文章