支付宝小程序集成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一站式入门使用
从源码编译、部署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
目录
相关文章
|
1月前
|
搜索推荐 Android开发 iOS开发
安卓与iOS系统的用户界面设计对比分析
本文通过对安卓和iOS两大操作系统的用户界面设计进行对比分析,探讨它们在设计理念、交互方式、视觉风格等方面的差异及各自特点,旨在帮助读者更好地理解和评估不同系统的用户体验。
24 1
|
1月前
|
移动开发 监控 安全
mPaaS常见问题之Android集成dexPatch热修复运行时候无法正常进行热更新如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
34 0
|
1月前
|
小程序 Devops 开发工具
支付宝小程序入门学习之一:如何创建支付宝小程序并在手机上预览
支付宝小程序入门学习之一:如何创建支付宝小程序并在手机上预览
32 0
|
1月前
|
搜索推荐 Android开发 iOS开发
安卓与iOS操作系统的发展与比较
在移动互联网时代,安卓和iOS两大操作系统在智能手机市场竞争激烈。本文将从技术架构、生态系统、用户体验等方面对安卓和iOS进行比较分析,探讨它们各自的特点和发展趋势。
|
1月前
|
人工智能 自然语言处理 语音技术
探索未来:安卓与iOS在人工智能领域的竞争与合作
【2月更文挑战第12天】本文深入探讨了安卓和iOS两大操作系统在人工智能(AI)领域的发展现状、竞争态势及未来合作可能性。通过对比分析两系统在AI技术集成、开发者支持、用户体验优化等方面的表现,揭示了它们各自的优势与挑战。文章最终展望了一个既有竞争又充满合作的未来,认为安卓和iOS的共同进步将推动整个人工智能技术向前发展,为用户带来更加智能、便捷的生活体验。
|
1月前
|
搜索推荐 Android开发 iOS开发
探索未来:安卓与iOS双系统的融合与创新
【2月更文挑战第12天】 在数字化时代,智能手机操作系统的发展不仅代表了技术的进步,更是用户体验革新的前沿。本文深入探讨了安卓和iOS这两大主流操作系统的未来走向,特别是它们在技术融合与创新方面的可能性。通过分析当前的市场需求、技术挑战和潜在的发展机会,我们将展望一个可能出现的未来场景:一个结合了安卓开放性和iOS优雅体验的双系统融合平台。这不仅仅是对技术极限的挑战,更是对用户体验极致追求的一次探索。
37 2
|
1月前
|
人工智能 搜索推荐 Android开发
探索未来:安卓与iOS在人工智能时代的融合趋势
【2月更文挑战第12天】 在这篇探索性文章中,我们将深入分析安卓和iOS两大移动操作系统在人工智能(AI)时代的融合趋势。随着技术的飞速发展,AI已成为推动智能手机进化的关键力量。本文通过对安卓和iOS各自在AI领域的最新进展进行比较,揭示了两大平台如何在保持各自特色的同时,也在向着更加智能、更加个性化的方向发展。我们不仅聚焦于当前的技术现状,而且还将展望未来,探讨这一趋势对用户体验、应用开发以及整个科技生态的深远影响。
|
1月前
|
人工智能 安全 搜索推荐
探索未来:安卓与iOS在人工智能时代的融合与创新
【2月更文挑战第12天】随着人工智能(AI)技术的飞速发展,安卓和iOS系统作为智能手机操作系统的两大巨头,正面临着前所未有的融合与创新机遇。本文将从AI技术对移动操作系统的影响、两大系统在AI领域的创新应用,以及未来可能的融合方向三个方面进行深入探讨。通过对比分析,我们旨在揭示安卓和iOS在人工智能时代如何共同推进技术革新,为用户提供更加智能、便捷的服务体验。
|
20天前
|
消息中间件 Java Kafka
Springboot集成高低版本kafka
Springboot集成高低版本kafka
|
26天前
|
NoSQL Java Redis
SpringBoot集成Redis解决表单重复提交接口幂等(亲测可用)
SpringBoot集成Redis解决表单重复提交接口幂等(亲测可用)
300 0

热门文章

最新文章