支付宝小程序集成MQTT

1. 前言

由于支付宝只支持websocket连接，在尝试了很多npm安装mqtt亦或是使用paho-mqtt.js、重新编译过后的mqtt.js多方无果后，最终决定自己做一个桥接的websocket服务，来作为mqtt的Borker和小程序的websocket的中转服务。最终实现了支付宝小程序可以收到和发送mqtt消息的目的。

2. 处理流程

1. 搭建一个springboot的简易版websocket服务端，同时连接mqtt的Broker作为mqtt的客户端。简称中转服务。
2. 小程序使用websocket连接中转服务。
3. 小程序发送websocket服务到中转服务，中转服务把收到的消息发送给mqtt的Broker。
4. 中转服务收到mqtt发送的消息，查找对应的websocket小程序用户唯一id是否存在。如果存在就通过websocket发送给小程序。
5. 小程序收到websocket消息，做对应的处理。

本章主要介绍支付宝小程序的处理方式，下一章介绍如何搭建springboot的中转服务。

3. 接口详情

wss地址
这里是我们自己搭建的中转服务websocket地址。
```
wss://xxxx.cn/netgate/密钥/pid/sn/openid
```

参数说明

参数名称	参数说明
密钥	自定义标识符，用于鉴权处理
pid	设备产品ID【设备二维码中包含此信息】
sn	设备序列号【设备二维码中包含此信息】
openid	用户自己的id。可以使用个人平台的用户唯一id。相同ID会挤掉前一个用户的ws连接

4. 代码详解

小程序示例UNIAPP方式

如果没有使用uniapp框架，使用原生技术
微信小程序：需要把uni.替换成wx.

支付宝小程序：需要把uni.替换成my.

1. 新建ws.js文件

var ws = {};
const wsUrl= 'wss://xxxx.cn/netgate/密钥/';
var timeoutObj;
let connectStatus = 0;
//避免socket重复连接
let lockReconnect = false;
function heartCheck(){console.log('准备心跳检测')if(timeoutObj){clearInterval(timeoutObj);}timeoutObj = setInterval(function () {uni.sendSocketMessage({data: 'H', // 需要发送的内容success: (res) => {console.log('心跳O(∩_∩)O')},});}, 55000)
}
ws.initWs = (pid,sn,openid) => {uni.onSocketOpen(function() {// uni.showToast({title: 'WebSocket 连接已打开！'})console.log('WebSocket 连接已打开！');connectStatus = 1;heartCheck()});uni.onSocketError(function(res){// uni.showToast({title: 'WebSocket 连接打开失败，请检查！'})console.log('WebSocket 连接打开失败，请检查！');ws.reconnect()});uni.onSocketClose((res) => {uni.showToast({title: '连接已关闭'})ws.reconnect()console.log('连接已关闭')});uni.offSocketClose((res)=>{uni.showToast({title: '取消监听 WebSocket 关闭事件'})console.log('取消监听 WebSocket 关闭事件')connectStatus = 0;});uni.offSocketError((res) =>{uni.showToast({title: '取消监听 WebSocket 错误事件'})console.log('取消监听 WebSocket 错误事件')connectStatus =0;});uni.offSocketOpen((res)=>{uni.showToast({title: '取消监听 WebSocket 连接打开事件'})console.log('取消监听 WebSocket 连接打开事件')connectStatus = 0;});uni.offSocketMessage((res)=>{uni.showToast({title: '取消监听 WebSocket 接收到服务器的消息事件'})console.log('取消监听 WebSocket 接收到服务器的消息事件')});uni.connectSocket({url: wsUrl+ pid+ '/' +sn+ '/'+ openid,success: (res) => {console.log('连接成功')uni.showToast({title: '设备连接成功'})},fail:(res)=>{console.log('connect fail：'+JSON.stringify(res))}})
}
ws.disconnect = ()=> {console.log('关闭ws连接')uni.closeSocket()// 链接关闭后切断所有监听// 支付宝小程序的ws连接问题，关闭连接时需关闭对于接受，防止关闭失败uni.offSocketMessage();uni.offSocketError();uni.offSocketOpen();uni.offSocketClose();
}
ws.reconnect = ()=> {console.log('正在准备重新连接')if (lockReconnect) return;console.log('重新连接')lockReconnect = true;let self = this;setTimeout(function () { //没连接上会一直重连，设置延迟避免请求过多self.connect();lockReconnect = false;}, 2000);
}ws.sendMsg = function(msg) {console.log('准备发送消息')uni.sendSocketMessage({data: msg, // 需要发送的内容success: (res) => {console.log('消息发送成功==='+msg)},});
}export default ws;

2. 页面使用

<script>import ws from "../../common/utils/ws";export default {onUnload(){ws.disconnect()},onLoad(){ws.initWs(this.curProId,this.curSn,userInfo.wxid)let self = this;uni.onSocketMessage(function(res) {self.deviceReceiveMsgWs(res.data)}) },methods: {//接收消息deviceReceiveMsgWs(msgStr){console.log('ws收到了消息'+msgStr)},//发送消息sendMsg(){ws.sendMsg('{"CMD":"STATE"}')}}}
</script>

5. 下一篇

springboot集成websocket

springboot集成mqtt

支付宝小程序集成MQTT相关推荐

支付宝小程序使用MQTT over WebSocket连接阿里云IoT物联网平台
前言之前写了一篇微信小程序使用MQTT over WebSocket连接阿里云IoT物联网平台,介绍了如何使用mqtt.js在微信小程序上连接mqtt服务器,文中顺带提了mqtt.js是支持支付宝小 ...
【支付宝小程序控制硬件①】申请个人支付宝小程序开发的个人账户，说说那些睬坑日志，集成mqtt协议在支付宝小程序，实现基本通讯！
[支付宝小程序控制硬件①] 申请个人支付宝下程序开发的个人账户,认识支付宝小程序框架结构,做好智能控制第一步! 文章目录一.前言: 二.回忆支付宝小程序移植的过程: 三.注册账号了解支付宝开发者工具 ...
【小程序案例】支付宝小程序-MQTT模器，IoT设备通过WSS接入阿里云IoT物联网平台...
支付宝小程序-MQTT模拟器通过WSS接入阿里云IoT物联网平台准备工作 1.1 注册阿里云账号开通阿里云账号,并通过支付宝实名认证 https://www.aliyun.com 1.2 免费开通 ...
微信小程序使用MQTT.js连接阿里云IoT物联网平台
官方已经开源了一个SDK版本,也是基于mqtt.js,进行了各种封装: https://github.com/aliyun/alibabacloud-iot-device-sdk · 阅读以下内容需要 ...
用户超5亿，三年投10亿，开发者如何抢滩支付宝小程序蓝海？
2018 年,被称为小程序正式搭建互联网生态圈的一年. 各大互联网巨头纷纷围猎小程序,意图用小程序丰富自己的服务形态. 而随着入局者越来越多,竞争愈发激烈.虽有"小程序红利期将持续 5 年& ...
SAP成都研究院大卫哥：SAP C4C中国本地化之微信小程序集成
今天的文章来自Wu David,SAP成都研究院C4C开发团队的架构师,在加入团队之前曾经在SAP上海研究院工作,组内同事习惯亲切地称呼他为大卫哥. 大卫哥身高据Jerry目测有1米8以上,是成都C4 ...
独家！支付宝小程序技术架构全解析
在轻应用混战的当下,小程序已经成为巨头们角逐的焦点,阿里自然也不甘落后.据阿里官方的数据,截止到今年1月28日为止,支付宝小程序应用数已经达到12万,总用户数突破5亿,日活跃用户数突破2.3亿,用户通 ...
十分钟上线 - 函数计算构建支付宝小程序的后端
阿里云函数计算服务(FunctionCompute,FC)是一个事件驱动的全托管计算服务.通过函数计算与云端各个服务的广泛集成,开发者只需要编写函数代码,就能够快速地开发出弹性高可用的后端系统.接下来 ...
支付宝jsapi_使用小程序Serverless开发支付宝小程序
简介: 小程序Serverless产品,提供包括云函数.数据存储.文件存储等一整套后端服务. [作者简介] 奥沙,蚂蚁金服智能科技高级开发工程师,曾就职于飞猪,长期从事java后端开发工作,熟悉小程序 ...

支付宝小程序集成MQTT

支付宝小程序集成MQTT

1. 前言

2. 处理流程

3. 接口详情

4. 代码详解

1. 新建ws.js文件

2. 页面使用

5. 下一篇

支付宝小程序集成MQTT相关推荐

最新文章

热门文章