微信小程序集成和使用mqtt(同时支持uniapp和原生)

简介: 微信小程序集成和使用mqtt(同时支持uniapp和原生)

前言

       在集成mqtt到小程序的开发过程中,确实走了不少弯路,下了许许多多的示例,一步步踩坑到现在终于完美解决了小程序引入mqtt的方法。该方法原生和uniapp均适用。

1. 小程序网页配置

先登录微信公众平台,找到开发》开发管理》开发设置页面

5943df6f304d4780bfc6c8c87120a3f9.png

服务器域名配置中 配置socket合法域名为,mq消息服务器的域名。然后保存退出。


2.代码集成


1.新建mqtt文件夹,下载paho-mqtt.js,把这个js放在新建的文件夹下。


下载地址https://download.csdn.net/download/qq_35921773/33237463  


2.然后新建mqtt.js用来初始化自己的连接信息

把mqtt.js和paho-mqtt.js放在同级文件夹下。这样方便引入

let Paho = require('./paho-mqtt.js');
var mqtt = {};
//client对象
var client = null;
//mqtt连接对象
const mqttUrl = {
    hostname: "xxx.cn",
    port:8084,
    path: "/mqtt"
}
//订阅的主题与回掉方法
var map = new Map();
/**
 * mqtt 连接状态
 * 0:正在连接
 * 1:连接成功建立
 * 2:连接正在关闭
 * 3:连接已经关闭
 */
let connectStatus = 0;
//初始化weboscket
mqtt.initMqtt = () => {
    if (null == client) {
        //创建mqtt客户端
        client = new Paho.Client(mqttUrl.hostname, Number(mqttUrl.port), mqttUrl.path, 'wxapp_client_'+Math.random(),);
    } else {
        //Do-nothing
    }
    client.onConnected = (reconnect, uri) => {
        console.log("mqtt连接成功!client:", reconnect, uri);
        //连接成功
        connectStatus = 1;
        //注册全局的报警事件
    }
    client.onConnectionLost = (responseObject) => {
        console.log("mqtt连接关闭!", responseObject);
        if (responseObject.errorCode != 0) {
            //异常关闭
            mqtt.initMqtt();
        } else {
            //正常关闭连接
        }
        connectStatus = 3;
    }
    client.onMessageArrived = (message) => {
        //console.log("Message Recieved: [Topic: ", message.destinationName, ", Payload: ", message.payloadString, ", QoS: ", message.qos, ", Retained: ", message.retained, ", Duplicate: ", message.duplicate, "]");
        let topic = message.destinationName;
        //console.log("map:",map);
        try {
            let msgObj = {}
            new Promise((resolve, reject) => {/* executor函数 */
                msgObj = JSON.parse(message.payloadString);
                resolve(msgObj);
            }).catch(function (value) {
                console.log('JSON转化异常')
                return;
            });
            if(topic.indexOf('$SYS/brokers/')>-1){
                map.get('home')(topic,msgObj);
            }else if(topic.indexOf('/client')>-1){
                map.get('device')(topic,msgObj);
            }
        } catch (err) {
            console.error(err);
        }
    }
    var options = {
        invocationContext: {
            host: mqttUrl.hostname,
            port: mqttUrl.port,
            path: mqttUrl.path,
            clientId: 'wxapp_client_'+Math.random(),
        },
        //超时
        timeout: 5,
        //心跳
        keepAliveInterval: 60,
        //清除session,如果不清除,重连之后还能收到订阅的数据
        cleanSession: true,
        useSSL:true,
        reconnect: true,
        onSuccess: onConnect,
        onFailure: onFail
    };
    function onConnect(context) {
        console.log("mqtt连接成功context:", context)
        //连接成功
        connectStatus = 1;
    }
    function onFail(context) {
        console.log("mqtt连接失败onFail:", context)
        mqtt.initMqtt();
    }
    if (1 != connectStatus) {
        console.log("开始连接");
        client.connect(options);
        //正在建立连接
        connectStatus = 0;
    }
}
/**
 * 订阅主题
 * topic:主题名称
 * qos:服务质量
 */
mqtt.subscribe = function(topic, qos, receiveCallback) {
    if (1 == mqtt.getStatus()) {
        client.subscribe(topic, {
            qos: Number(qos)
        });
        if(topic.indexOf('$SYS/brokers/')>-1){
            map.set('home',receiveCallback);
        }else if(topic.indexOf('/client')>-1){
            map.set('device',receiveCallback);
        }
    } else {
        setTimeout(function() {
            mqtt.subscribe(topic, qos, receiveCallback);
        }, 1000)
    }
}
/**
 * 取消订阅主题
 * topic:主题名称
 */
mqtt.unsubscribe = function(topic) {
    if (1 == mqtt.getStatus()) {
        client.unsubscribe(topic, {
            onSuccess: unsubscribeSuccess,
            onFailure: unsubscribeFailure,
            invocationContext: {
                topic: topic
            }
        });
        map.delete(topic);
    } else {
        setTimeout(function() {
            mqtt.unsubscribe(topic);
        }, 1000)
    }
}
function unsubscribeSuccess(context) {
    console.log("取消订阅成功Topic:", context.invocationContext.topic);
}
function unsubscribeFailure(context) {
    console.log("取消订阅成功Topic:", context.invocationContext.topic);
    setTimeout(function() {
        mqtt.unsubscribe(context.invocationContext.topic);
    }, 1000)
}
/**
 * 发送消息
 * message:消息内容
 * topic:主题
 * qos:服务质量
 */
mqtt.publish = function(message, topic, qos) {
    if (1 == mqtt.getStatus()) {
        var message = new Paho.Message(message);
        message.destinationName = topic;
        message.qos = Number(qos);
        message.retained = false;
        client.send(message);
        wx.showToast({
            title: '发送成功'
        })
    } else {
        wx.showToast({
            title: '正在重新连接服务器,请稍后重试',
            icon: 'none',
            duration: 2000
        })
        setTimeout(function() {
            mqtt.publish(message, topic, qos);
        }, 1000)
    }
}
/**
 * 返回mqtt的连接状态
 */
mqtt.getStatus = function() {
    return connectStatus;
}
/**
 * 关闭连接
 */
mqtt.disconnect = function() {
    console.log("关闭mqtt连接");
    if (null != client) {
        client.disconnect();
    } else {
        //Do-nothing
    }
    connectStatus = 3;
    client = null;
}
mqtt.initMqtt();
export default mqtt;

3.页面使用

import mqtt from '../../common/utils/mqtt.js'
//指向刚才新建的mqtt.js
//onLoad初始化订阅
onLoad(option) {
   mqtt.subscribe('$SYS/brokers/+/clients/#', 0, this.receiveCallback); 
},
methods: {
    //收到消息后的回调
     receiveCallback(){
          console.log('addad')
     },
}


相关实践学习
快速体验阿里云云消息队列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
目录
相关文章
|
JavaScript 小程序 API
UniApp X:鸿蒙原生开发的机会与DCloud的崛起之路·优雅草卓伊凡
UniApp X:鸿蒙原生开发的机会与DCloud的崛起之路·优雅草卓伊凡
829 12
UniApp X:鸿蒙原生开发的机会与DCloud的崛起之路·优雅草卓伊凡
|
11月前
|
物联网 Linux 开发者
快速部署自己私有MQTT-Broker-下载安装到运行不到一分钟,快速简单且易于集成到自己项目中
本文给物联网开发的朋友推荐的是GMQT,让物联网开发者快速拥有合适自己的MQTT-Broker,本文从下载程序到安装部署手把手教大家安装用上私有化MQTT服务器。
2236 5
|
11月前
|
供应链 小程序 API
微信小程序API集成京东库存,移动端销量暴涨!
在数字化时代,微信小程序与京东库存系统集成成为提升移动端销量的关键策略。本文详解如何通过API实现库存实时同步、优化用户体验,推动销量增长50%以上,并结合实际案例与代码示例,为企业提供可落地的解决方案。
|
安全 持续交付 云计算
课时5:阿里云容器服务:最原生的集成Docker和云服务
阿里云容器服务以服务化形式构建容器基础设施,大幅提升开发效率,简化应用部署流程。通过Docker容器和DevOps工具(如Jenkins),实现自动化部署与迭代,优化企业内部复杂部署问题。该服务支持GPU调度、混合云架构无缝迁移,并与阿里云产品体系无缝集成,提供安全防护、网络负载均衡等多重功能支持。凭借微服务架构,帮助企业突破业务瓶颈,提高资源利用率,轻松应对海量流量。
496 0
课时5:阿里云容器服务:最原生的集成Docker和云服务
|
JSON 小程序 JavaScript
原生微信小程序笔记完整总结
原生微信小程序笔记完整总结
655 1
|
安全 测试技术 数据安全/隐私保护
原生鸿蒙应用市场开发者服务的技术解析:从集成到应用发布的完整体验
原生鸿蒙应用市场开发者服务的技术解析:从集成到应用发布的完整体验
|
小程序 开发者
微信开发者工具如何集成SVN、同时解决集成SVN无效果的问题
这篇文章介绍了如何在微信开发者工具中集成SVN版本控制系统,并提供了解决集成后无效果问题的方法。
微信开发者工具如何集成SVN、同时解决集成SVN无效果的问题
|
机器学习/深度学习 人工智能 JSON
微信小程序原生AI运动(动作)检测识别解决方案
近年来,疫情限制了人们的出行,却推动了“AI运动”概念的兴起。AI运动已在运动锻炼、体育教学、线上主题活动等多个场景中广泛应用,受到互联网用户的欢迎。通过AI技术,用户可以在家中进行有效锻炼,学校也能远程监督学生的体育活动,同时,云上健身活动形式多样,适合单位组织。该方案成本低、易于集成和扩展,已成功应用于微信小程序。
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
4024 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机