一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)

这篇具有很好参考价值的文章主要介绍了一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

😹背景

昨天搞了一天,我觉得新手可以参考我这篇文章思路,避免你和我一样踩坑,刚好去年的这几天也在搞mqtt,不过当时弄的是微信小程序,这次项目是uniapp,我想实现uniapp中的h5能够使用mqtt,转换成小程序后也能直接使用,后面成功了,但是也付出了点代价,接近弄了5个小时,一直在犹豫要不要发出来记录一下,后面还是妥协了,因为我怕下次我用到又继续像昨天那样,
本次解决了:

  • uniapp双端转换mqtt通讯问题
  • 微信小程序合法域名配置SSL问题
  • 微信wxs协议配置问题
  • mqtt重复断线连接问题

🙏如果这篇文章对你有帮助还请收藏点赞+关注🙏

一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)

推荐Mqtt相关文章(也许能帮到你)
《解决微信小程序MQTT真机连接问题与合法域名配置SSL问题》
《解决微信小程序MQTT通讯真机调试失败的问题附加可用代码》
《Esp8266-01s、51单片机实现连接MQTT踩坑:附加烧录安信可固件+宝塔搭建MQTT服务器 全套攻略》

推荐专栏
⭐⭐欢迎订阅⭐⭐
⭐⭐这是我的付费专栏,希望你可以订阅支持我🙏~⭐⭐
🚀Python爬虫项目实战系列文章!!
⭐⭐欢迎订阅⭐⭐
⭐⭐欢迎订阅⭐⭐
该专栏下的往期文章:
【Python爬虫项目实战一】获取Chatgpt3.5免费接口文末付代码(过Authorization认证)
【Python爬虫项目实战二】Chatgpt还原验证算法-解密某宝伪知网数据接口



😿Mqtt公共服务器

emqx,这个我觉得不错,搭配上工具MQTT 5.0 客户端工具就很完美,后面的私有服务器根据他开源版本,来搭建的
一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)


😿我的Mqtt服务器

这部分我考虑长期开放,测试中大家可以用我的

平台 协议 接口
uniapp等h5 ws ws://mqtt.taila.club:8083
uniapp等h5 wss(证书) wss://mqtt.taila.club:443
微信小程序 wx wx://mqtt.taila.club:8083
微信小程序 wxs(证书) wxs://mqtt.taila.club:443

💛遇到的问题

1、公共服务器的问题

emqx公共服务器除Tcp连接以外,其他端口时而能连接,有时候会收不到数据,我认为可能是协议5.0问题或者是公共服务器的问题、mqtt.js等问题,由于时间紧迫,没做排查
在进行mqtt调试的时候,我第一时间去dcloud插件市场找了mqtt相关的插件,发现uniapp小程序插件demo通过ws或wss都连接不上,公共服务器貌似只有MQTT 5.0 客户端工具能使用,像上面的这些端口:WebSocket 端口…只能在MQTT 5.0 客户端工具使用,tcp可以正常使用,可是小程序是不允许ip的必须要域名,当时我一直想用公共服务器,没有考虑到是对方的原因,认为是插件问题,几乎全网的代码我都尝试过了,都不行,后面我发现了个网站Hivemq
一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)

我用了他的端口以及域名,ws:api.easylink.io:1983/mqtt结果就连接上了,到这里我才明白,之前测试了这么多的demo原来并非代码问题,而是服务器问题,我在排查的时候没有考虑到服务器的原因,这是我耗费时间长的原因之一

2、协议问题

平台 协议 加密协议
uniapp、web ws wss
微信小程序 wx wxs(端口必须是443)

在转换小程序时记得通过条件编译去构造

// #ifdef H5
				
					hosts = 'ws://' + this.serve.host + ':' + this.serve.wsport + this.serve.path
					//hosts = 'tpc://' + this.serve.host + ':1883'
				//#endif
				// #ifdef MP-WEIXIN
				// wx仅仅可以使用体验版
				hosts = 'wxs://' + this.serve.host +':' + this.serve.wssport + this.serve.path
				//#endif

3、连接问题

我的客户端连接是Tcp连接的,emqx给的python代码是Tcp连接
uniapp小程序:需要使用ws连接、tcp测试连接失败
微信小程序:需要wx(不校验合法域名、调试上可用)或wxs

4、真机调试连接不上

Mqtt.js问题
猜测是版本原因,wx协议在小程序上勾选不校验合法域名能正常用,那在真机调试中也应该可以访问,可偏偏就是连接不上,办法:更换mqtt.js文件

5、问题总结

  1. 不使用mqtt公共服务器来做项目测试
  2. 需要知道协议转换,以及微信小程序的策略
  3. 真机调试不上,更换js文件

💛问题解决流程

🎄搭建私有免费Mqtt服务器(emqx)

宝塔搭建MQTT服务器

1.下载

首先,先将宝塔上安装Docker管理器(1、软件商店👉2、Docker管理器)一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)拉取emqx/emqx镜像(1、镜像管理👉2、镜像搜索)一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)
选择拉取
一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)
成功后在终端运行命令,或者加入定时计划运行即可:

docker run -dit --name emqx -p 18083:18083 -p 1883:1883 -p 8083:8083 -p 8084:8084 emqx/emqx:latest

docker exec -it  emqx /bin/sh

【我是因为忘记密码了,登陆不上去,可以用我的方法,也可以在终端】

1.终端
一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)

2.定时计划(配置后若服务器关机了,可以快速开启docker服务)
一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)
上述都要执行,一次即可!

2.开放端口

1883:MQTT 协议端口\TCP
8883:MQTT/SSL 端口
8083:MQTT/WebSocket 端口
8080:HTTP API 端口
18083:Dashboard 管理控制台端口

先到服务器运营商开放,再去宝塔开放,不然没用
【我这里就不放运营商的开放截图了】
一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)

3.测试使用

http://云服务器公网IP:18083
账号: admin
密码: public

【我的是这样的】
一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)
通过MQTT手机端软件测试,可以用:
【软件怎么用自己去摸索哈】
一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)
【加入到同一个房间的设备可以在房间内互相发消息,读者可以自己测试】

4.配置反向代理

因为小程序需要域名,如果在其他平台ip足够了,接下来通过反向代理解决证书和域名问题(emqx的面板支持SSL大家根据自己的需要自己做选择,反向代理,只需要在自己的网站套上ssl即可,我认为比较方便)
解决思路:反向代理,通过添加域名设置反向代理,在小程序开发者配置添加合法域名即可

第一步:
一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)
第二步:(点击宝塔网站)
一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)
第三步:
一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)
第四步:(点击反向代理)
一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)
粘贴的代码:

    #持久化连接配置
    proxy_connect_timeout 30s;
    proxy_read_timeout 86400s;
    proxy_send_timeout  30s;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";

出错的话注释掉相同的代码,重新保存
一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)

第五步:配置网站ssl(先将反向代理关闭,否则宝塔不允许配置)

1、关闭反向代理后
2、点击ssl(配置证书)
一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)

一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)
3、配置好以后,打开反向代理,让其运行
一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)
4、所以我的域名现在支持

这部分我考虑长期开放,测试中大家可以用我的

平台 协议 接口
uniapp等h5 ws ws://mqtt.taila.club:8083
uniapp等h5 wss(证书) wss://mqtt.taila.club:443
微信小程序 wx wx://mqtt.taila.club:8083
微信小程序 wxs(证书) wxs://mqtt.taila.club:443

🎄编写uniapp-mqtt-demo完成连接收发测试

建议下载完整代码,下面的代码不完整,插件市场下载

<template>
	<view>
		<button type="primary" @click="connect">mqtt 连接</button>
		<button type="primary" @click="subscribe">mqtt 订阅</button>
		<button type="primary" @click="publish">mqtt 发布</button>
		<button type="primary" @click="unsubscribe">取消订阅</button>
		<button type="primary" @click="unconnect">断开连接</button>
		<view>message:{{ receiveMessage.toString() }}</view>
	</view>
</template>

<script>
	import mqtt from '../../utils/mqtt.min.js';
	export default {
		data() {
			return {
				serve: {
					host: '****',
					wsport: '**',
					wssport:'443',
					path: '/mqtt',
				},
				onTopic: 'fasong',
				onSub: 'jieshou',
				Qos: 2,
				sendMassage: 'demo',
				time:0,
				receiveMessage: '',
				client: null,
				//MQTT连接的配置
				
			};
		},
		methods: {
			
			connect: function() {
				var hosts = '',
				// #ifdef H5
				
					hosts = 'ws://' + this.serve.host + ':' + this.serve.wsport + this.serve.path
					//hosts = 'tpc://' + this.serve.host + ':1883'
				//#endif
				// #ifdef MP-WEIXIN
				// wx仅仅可以使用体验版
				hosts = 'wxs://' + this.serve.host +':' + this.serve.wssport + this.serve.path
				//#endif
				console.log(hosts);
				if (this.client == null || this.client.connented == false) {
					
				}

			...

			},
			subscribe: function() {
				// 判断是否已成功连接
				if (!this.client || !this.client.connected) {
					this.showToast('客户端未连接', 1000)
					return;
				}

				

			...	
			},
			publish: function() {
				// 判断是否已成功连接
				if (!this.client || !this.client.connected) {
					this.showToast('客户端未连接', 1000)
					return;
				}
				if (this.sendMassage != '') {
					// var send = '{"code": 200, "msg": "发送打1111指令", "data": "2.doc"}';
					
					 // 定义JSON对象
					...
			},
			unconnect: function() {
				if (!this.client || !this.client.connected) {
					this.showToast('客户端未连接', 1000)
					return;
				}
				this.client.end();
				this.client = null
				this.showToast('成功断开连接', 1000, 'success')
				console.log('断开连接');
			},
			showToast: function(title, time, icon = 'none') {
				uni.showToast({
					title: title,
					icon: icon,
				});
				setTimeout(function() {
					uni.hideToast();
				}, time);
			},
		},
	}
</script>
<style>
	button {
		margin-top: 30upx;
		margin-bottom: 30upx;
	}
</style>

🎄更换mqtt.js文件,再做测试

由于找不到报错前的js文件,这里就不做错误演示了,如果你的项目也有了这个问题直接替换就可以了

模拟器上测试可以,选中了不校验合法域名,真机调试没能连接服务器,解决思路换了个mqtt.js
可参考下面的js

https://unpkg.com/mqtt@2.18.8/dist/mqtt.min.js

更换路径:
一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)

🎄重复断线练级问题

这里出现此情况可能是反复调试的过程中,clientId都是同一个导致占线的问题
解决方法:

			let that=this;
			console.log(that.options.clientId)
			let clientId = "mqtt_" + Math.random().toString(16).substr(2, 8);
			
			console.log("生成的随机clientId为:" + clientId);
			that.options.clientId=clientId;

🎄运行演示、真机演示

不同的环境,自动适应不同的域名

uniapp演示,这里连接成功是做了判断的,数据也测试通过了,并不是只是弹窗哈
一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)

编译后,微信小程序演示:
一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)
模拟器效果图(手机上测试也通过了)
一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)
如果需要上线,请将wxs域名通过小程序后台合法域名白名单中
真机演示:
一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)

💛总结

以上就是今天分享的经验,对于还在摸索mqtt的你一定有帮助,这是我花了5个小时踩坑的经历,希望对你有用!

💥推荐我的爬虫文章(收费专栏-用心提高质量)💥
🤟《记一次云之家签到抓包》
🤟《记一次视频抓包m3u8解密过程》
🤟《抓包部分软件时无网络+过代理检测 解决办法 安卓黄鸟httpcanary+vmos》
🤟《Python】记录抓包分析自动领取芝麻HTTP每日免费IP(成品+教程)》
🤟《某课抓包视频 安卓手机:黄鸟+某课app+VirtualXposed虚拟框架》

推荐专栏:

🤟《Python爬虫脚本项目实战》

该专栏往期文章:
🤟《【Python爬虫项目实战一】获取Chatgpt3.5免费接口文末付代码(过Authorization认证)》

🥦如果感觉看完文章还不过瘾,欢迎查看我的其它专栏
🥦作者对python有很大的兴趣,完成过很多独立的项目:例如滇医通等等脚本,但是由于版权的原因下架了,爬虫这一类审核比较严谨,稍有不慎就侵权违规了,所以在保证质量的同时会对文章进行筛选

如果您对爬虫感兴趣请收藏或者订阅该专栏哦《Python爬虫脚本项目实战》,如果你有项目欢迎联系我,我会同步教程到本专栏!

⭐⭐欢迎订阅⭐⭐
一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)

🚀Python爬虫项目实战系列文章!!
⭐⭐欢迎订阅⭐⭐

【Python爬虫项目实战一】获取Chatgpt3.5免费接口文末付代码(过Authorization认证)
【Python爬虫项目实战二】Chatgpt还原验证算法-解密某宝伪知网数据接口文章来源地址https://www.toymoban.com/news/detail-454181.html

到了这里,关于一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Hexo搭建教程?看这一篇就够了- How to系列

    目录 读者先看这里​​​​​ Bayi使用的软件版本: 更新记录 2023年7月30日 Hexo是什么 在此之前 Node.js 许可协议 选择安装地址 选择安装组件 安装 检查安装 更改全局模块所在路径和缓存路径地址 Git 下载并打开Git安装包 选择安装路径 选择安装组件 选择开始菜单文件夹名称

    2024年02月14日
    浏览(38)
  • JavaSE基础篇——超详细,Java入门,这一篇就够了

    一、java背景知识 1、 Java是 美国sun公司(Stanford University Network)在1995年推出的一门计算机 高级编程语言 。 2、Java早期被称为Oak(橡树),后期改名为Java。 3、Java之父:詹姆斯·高斯林(James Gosling) 4、2009年sun公司被Oracle(甲骨文)公司收购 二、为什么用Java 1、世界上最流

    2024年02月03日
    浏览(45)
  • 背包问题(动态规划看这一篇就够了)

    题目描述     一个旅行者有一个最多能装M公斤的背包,现在有n件物品,他们的重量分别是W1,W2,......,Wn,他们的价值分别是C1,C2,......,Cn,求旅行者能获得的最大总价值。 输入     第一行:两个整数,M(M=200)和N(N=30);     第2至N+1行:每行两个整数Wi,Ci,表示每

    2024年04月15日
    浏览(51)
  • 史上最详细的KMP算法教程,看这一篇就够了

    🧑‍💻 文章作者:Iareges 🔗 博客主页:https://blog.csdn.net/raelum ⚠️ 转载请注明出处 ⚠️ 本文讨论的下标均从 0 0 0 开始。 字符串匹配又称模式匹配(pattern matching)。该问题可以概括为「给定字符串 s s s 和 t t t ,在主串 s s s 中寻找子串 t t t 」。字符串 t t t 称为 模式串

    2024年03月27日
    浏览(54)
  • wireshark抓包的使用,超级详细,收藏这一篇就够了

    抓包过滤器类型Type(host、net、port)、方向Dir(src、dst)、协议Proto(ether、ip、tcp、udp、http、icmp、ftp等)、逻辑运算符(且、||或、!非) 1.1 协议过滤 直接输入协议名即可, TCP,只显示TCP协议 HTTP,只显示HTTP协议 ICMP,只显示ICMP协议 1.2 IP过滤 host 192.168.23.1 抓取主机地址为192.168.23.1的数据包

    2024年02月10日
    浏览(33)
  • Python入门到高手进阶|这一篇就够了(3万字|超详细)

    🙈作者简介:练习时长两年半的Java up主 🙉个人主页:程序员老茶 🙊 ps:点赞👍是免费的,却可以让写博客的作者开兴好久好久😎 📚系列专栏:Java全栈,计算机系列(火速更新中) 💭 格言:种一棵树最好的时间是十年前,其次是现在 🏡动动小手,点个关注不迷路,感

    2024年02月01日
    浏览(43)
  • Vue3超详细的ref()用法,看这一篇就够了

    ref( ) 接受一个内部值,返回一个 ref 对象 ,这个对象是 响应式 的 、 可更改 的,且只有一个指向其内部值的属性 .value 。 ref() 将传入参数的值包装为一个带 .value 属性的 ref 对象。 举例: 查看打印结果: ref()方法允许创建可以使用 任何值类型的响应式 ref ref 的 .value 属性也

    2024年02月17日
    浏览(42)
  • JavaWeb搭建| Tomcat配置| Maven依赖|这一篇就够了(超详细)

    🙈作者简介:练习时长两年半的Java up主 🙉个人主页:老茶icon 🙊 ps:点赞👍是免费的,却可以让写博客的作者开兴好久好久😎 📚系列专栏:Java全栈,计算机系列(火速更新中) 💭 格言:种一棵树最好的时间是十年前,其次是现在 🏡动动小手,点个关注不迷路,感谢宝

    2024年02月01日
    浏览(59)
  • 【Linux】shell编程基础(超详细,入门看这一篇就够了)

    🥇🥇【Liunx学习记录篇】🥇🥇 篇一:【Linux】VMware安装unbuntu18.04虚拟机-超详细步骤(附镜像文件) 篇二:【Linux】ubuntu18.04系统基础配置及操作 篇三:【Linux】用户与组的操作详细介绍 篇四:【Linux】管理Linux文件权限属性介绍 篇五:【Linux】使用数字表示法和文件表示法修

    2024年02月04日
    浏览(44)
  • 【Java面向对象】多态的详细介绍,简单易懂,看这一篇就够了

    A: 方法或对象具有多种形态,是面向对象的第三大特征,多态是建立在封装和继承的基础之上的。简单来说,多态是具有表现多种形态的能力的特征。 消除类型之间的耦合关系 可替代性 可扩充性 接口性 灵活性 简化性 重载式多态在编译时已经确定好了。方法名相同而参数

    2024年01月20日
    浏览(66)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包