【MQTT】Esp32数据上传采集：最新mqtt插件（支持掉线、真机调试错误等问题）

忘是亡心i 2024-04-20 22:32 16阅读 0赞

## 前言 ##

![在这里插入图片描述][6ef396a142c746f6a19eb92379492e50.png]  
这是我在Dcloud发布的[插件-最完整Mqtt示例代码（解决掉线、真机调试错误等问题）][-_Mqtt]，经过整改优化和替换Mqtt的js文件使一些市场上出现的问题得以解决，至于跨端出问题，可能原因有很多，例如，合法域名或者是wss证书没有配置等等，若你们的还是没办法使用，找下自己的问题，因为我使用这个插件完整的测试了微信小程序、H5、APP 这三个不同的端是没有任何问题的，另外我的MQTT相关文章在这里：

?[《Esp8266-01s、51单片机实现连接MQTT踩坑：附加烧录安信可固件+宝塔搭建MQTT服务器 全套攻略》][Esp8266-01s_51_MQTT_MQTT_]  
?[《解决微信小程序MQTT通讯真机调试失败的问题附加可用代码》][MQTT]  
?[《解决微信小程序MQTT真机连接问题与合法域名配置SSL问题》][MQTT_SSL]  
?[《一篇就够:uniapp-Mqtt系列问题详细攻略(解决掉线、真机调试错误等问题)》][uniapp-Mqtt]

以上就是我对MQTT的学习记录分析，包括反向代理配置ws证书、ws和wx协议的区别等等，文章都是近期的有关联性，可以看看

最近在忙着处理毕业的事情，一直没有接项目，所以就没有更新文章，这次这个也不能算是项目，但是人家有需求，150软妹币帮忙解决了，大概意思就是通过esp32发送机器的温度数据，要能在小程序或者H5上能看到面板，并且能主动发送设定值给单片机，大概就是这个意思，另外单片机那里他都已经处理好了，我也就是写个接收而已，废话不多少，开搞！

## 接收和发送数据JSON格式化 ##

![在这里插入图片描述][b1b485e8c46f42d7aa4ea2e6efc15404.png]

客户给的两个Json格式的数据  
**单片机发送的：**

{
        
    "wd": "00" //实时温度
    "wdyj": "0" //温度预警，0正常 1预警实时温度变红
    "sd": "00" //实时湿度
    "sdyj": "0" //湿度预警，0正常 1预警实时湿度变红 
    }

**发送给单片机的：**

{
        
    "wdsx": "40.00", //温度上限
    "wdxx": "10.00", //温度下限
    "wdkg": "0", //温度预警邮件开关 0开 1关
    "sdsx": "50.00", //湿度上限
    "sdxx": "60.00", //湿度下限 
    }

## 分析 ##

可以看出根本就不难，接收到的数据处理一下，渲染即可，继续往下！

1.  将字符串转换为json  
    ![在这里插入图片描述][6d7597a4022a493d8192f9c9299e40ad.png]

let jsonObj = JSON.parse(this.receiveMessage);

1.  将数据传递到data中的receive中去

let jsonObj = JSON.parse(this.receiveMessage);
    this.receive=jsonObj;

1.  视图层逻辑判断渲染  
    因为他对温度颜色有要求这里简单的根据if语句判断，下面是代码：

<view>
    			<text v-if="receive.wdyj=='1'" style="color: red;">实时温度：{
        {
        receive.wd}}</text>
    			<text v-else>实时温度：{
        {
        receive.wd}}</text>
    			<br>
    			<text v-if="receive.wdyj=='0'">温度预警：正常</text>
    			<text v-if="receive.wdyj=='1'">温度预警：预警</text>
    			<text v-else>温度预警：</text>
    			<br>
    			<text v-if="receive.sdyj=='0'">实时湿度：{
        {
        receive.sd}}</text>
    			<text v-else>实时湿度：{
        {
        receive.sd}}</text>
    			<br>
    			<text>湿度预警：{
        {
        receive.sdyj}}</text>
    			<br>
    		</view>

## 效果 ##

由于写文章的时间有点晚了，我不打算将发送也写入，这里就对接收进行记录，现在是：20230710晚01：00

这是最后的图片，每次收到通讯数据，数据值都会改变，因为MQTT是双向通讯的  
![在这里插入图片描述][3861d01d2d554962b6fc568945c9710e.png]

?推荐我的爬虫文章  
[《记一次云之家签到抓包》][Link 1]  
[《记一次视频抓包m3u8解密过程》][m3u8]  
[《抓包部分软件时无网络+过代理检测 解决办法 安卓黄鸟httpcanary+vmos》][_ _httpcanary_vmos]  
[《Python】记录抓包分析自动领取芝麻HTTP每日免费IP（成品+教程）》][Python_HTTP_IP]  
[《某课抓包视频 安卓手机：黄鸟+某课app+VirtualXposed虚拟框架》][_app_VirtualXposed]

推荐专栏：

[《Python爬虫脚本项目实战》][Python]

该专栏往期文章：  
[《【Python爬虫项目实战一】获取Chatgpt3.5免费接口文末付代码（过Authorization认证）》][Python_Chatgpt3.5_Authorization]

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

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

[?**Python爬虫项目实战系列文章**][Python 1]！！  
⭐⭐欢迎订阅⭐⭐

[`【Python爬虫项目实战一】获取Chatgpt3.5免费接口文末付代码（过Authorization认证）`][Python_Chatgpt3.5_Authorization 1]  
[`【Python爬虫项目实战二】Chatgpt还原验证算法-解密某宝伪知网数据接口`][Python_Chatgpt_-]

⭐⭐欢迎订阅⭐⭐  
![在这里插入图片描述][818388c859c04a719ff9c282527b08e6.png]

[6ef396a142c746f6a19eb92379492e50.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/ded9d993958644a69dc0dd8d6a2327fb.png
[-_Mqtt]: https://ext.dcloud.net.cn/plugin?id=12014
[Esp8266-01s_51_MQTT_MQTT_]: https://taila.blog.csdn.net/article/details/124901610
[MQTT]: https://taila.blog.csdn.net/article/details/124911845
[MQTT_SSL]: https://taila.blog.csdn.net/article/details/124960889
[uniapp-Mqtt]: https://taila.blog.csdn.net/article/details/130383845
[b1b485e8c46f42d7aa4ea2e6efc15404.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/3c2322fdb8e54b7c961a3479a3b6f5ea.png
[6d7597a4022a493d8192f9c9299e40ad.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/abc4c21694c14ec9b6996006f1d13976.png
[3861d01d2d554962b6fc568945c9710e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/0aeb7b67443a48d781006185a53b4365.png
[Link 1]: https://blog.csdn.net/qq_35230125/article/details/113903423
[m3u8]: https://blog.csdn.net/qq_35230125/article/details/121647199
[_ _httpcanary_vmos]: https://blog.csdn.net/qq_35230125/article/details/121696563
[Python_HTTP_IP]: https://blog.csdn.net/qq_35230125/article/details/122890424
[_app_VirtualXposed]: https://blog.csdn.net/qq_35230125/article/details/121643395
[Python]: http://t.csdn.cn/gGn4P
[Python_Chatgpt3.5_Authorization]: https://blog.csdn.net/qq_35230125/article/details/130199605
[Python 1]: http://t.csdn.cn/iv7Xl
[Python_Chatgpt3.5_Authorization 1]: https://taila.blog.csdn.net/article/details/130199605
[Python_Chatgpt_-]: https://taila.blog.csdn.net/article/details/130240841
[818388c859c04a719ff9c282527b08e6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/a0e6c288044f4d1aa8f5506e00428c81.png