【嵌入式裸机开发】智能家居入门3（MQTT服务器、MQTT协议、微信小程序、STM32）

news/2024/12/22 0:00:29/

前面已经写了两篇博客关于智能家居的，服务器全都是使用ONENET中国移动，他最大的优点就是作为数据收发的中转站是免费的。本篇使用专门适配MQTT协议的MQTT服务器，有公用的，也可以自己搭建

    • 前言
    • 一、项目总览
    • 二、总体流程分析
      • 1、了解mqtt协议
      • 2、测试下位机与服务器的通信（使用mqtt.fx）
      • 3、搭建自己的MQTT服务器
    • 三、代码
    • 四、项目获取

前言

本篇博客实现的功能和之前的智能家居系列类似，把ONENET服务器换成了公用的mqtt服务器，在经过实测之后，个人觉得智能家居这种场景还是比较适合使用mqtt协议，仅仅是个人感觉。其实功能这一块我想到一个比较有意思的，就是用雨滴传感器和步进电机来模拟自动晾晒衣服的功能，大家应该能想象出来是啥意思，就是下雨了通过步进电机将晒衣服的架子给缩回来，不下雨了又给推出去，这还蛮有意思的。
前几篇博客：
①http+onenet实现数据上传给微信小程序
②mqtt+onenet

一、项目总览

由于面包板还没到，线接的很乱就不拍照了，找到了之前做类似项目的照片，用这个代替一下：
在这里插入图片描述
微信小程序：
在这里插入图片描述

基本功能首先是监测家庭内部环境信息，其次就是微信小程序控制外设动作。

上面的实物图中有一个sim900A模块，是以前用到的，可以用于拨打电话和发送短信，要是有兴趣可以评论或者私信，我单独出一期。
可以看到本次微信小程序大改动，不再是前两篇那样简陋了，但是实现的功能还是差不多的，这里就不再介绍了。

二、总体流程分析

1、了解mqtt协议

mqtt协议我单独出了一篇博客，参考：https://blog.csdn.net/m0_71523511/article/details/135905690

2、测试下位机与服务器的通信（使用mqtt.fx）

在这里插入图片描述
可以看到免费的mqtt服务器的域名是：broker.emqx.io，下位机上传数据使用TCP端口：1883。
通常当下位机上传数据逻辑写好之后不会直接用微信小程序进行测试，而是使用软件连接服务器来观察数据是否成功上传给了服务器，如果成功即可开始微信小程序的代码编写，没成功就调试，还是比较方便的。
这里使用mqtt.fx来进行测试：
在网上已经不好找到这个软件的早些版本了，这里给出网盘资源，下载后直接安装即可：
我用夸克网盘分享了「mqttfx-1.7.1-windows-x64.exe」，点击链接即可保存。打开「夸克APP」，无需下载在线播放视频，畅享原画5倍速，支持电视投屏。
链接：https://pan.quark.cn/s/8013f5c2151c
安装完成之后按照下面步骤设置：
首先点击那个蓝色的设置按钮，按下面这样设置好：
在这里插入图片描述
然后订阅单片机向服务器发送数据的topic：/smarthome/pub
在这里插入图片描述
此时只要下载在本篇文章结尾开源的代码（记得修改esp8266.c中的wifi名称和密码，其他的不用修改）并烧录，一会儿就可以在mqtt.fx软件的右边那个框看到上传上去的数据了。由于是公用的服务器，所以可能会导致数据流紊乱。如果测试没问题就可以打开微信小程序愉快的调试了。

3、搭建自己的MQTT服务器

这里我还没有尝试，但是有一个比较靠谱的视频：https://b23.tv/p8RkhU5
一般来说自己搭建多少是要钱的，如果免费的能满足尽量不要自己搭建，或者可以淘宝租一个月玩玩。

三、代码

1、下位机：

代码结构没变，还是那四个文件组成网络通信部分的代码：
在这里插入图片描述
①上传数据也没啥可以说的，直接参照上一篇博客即可（这次代码写的更漂亮，有参考价值）。
②接收数据在这里做了比较大的改动，这里使用两个键值对的逻辑进行发送和解析：
小程序下发的指令：
在这里插入图片描述
实际上对应的就是：{target:“fen”,value:“1”}
下位机解析：
在这里插入图片描述
首先解析出前面这个键值对的值，后面的逻辑就是判断这个值是多少，比如是leds的话就再进行第二个键值对的解析，此时判断第二个键值对的值是0还是1以控制对应的外设。这种逻辑相较于前几次博客的项目而言是可以减少内存占用的，因为只需要初始化一个：cJSON *json , *json_value;

2、微信小程序：

代码风格跟之前的完全不一样，如果想详细了解的话可以简单看看javascript。本设计用微信开发者工具原生框架进行小程序设计，用到了多个不同的文件来设计小程序，其中app.json文件是对小程序进行全局配置的，可以配置顶部文字和底部tabBar栏；以.wxml为后缀的文件用来设置小程序的整个页面及页面各部分内部的文字、数据、图片等；以wxss为后缀的文件用来在.wxml文件构建好的部分中设置规则，比如字体大小、颜色等；以.js为后缀的文件使用JavaScript语言处理小程序和用户的交互（与单片机的数据接收和发送）
①index.js

const app = getApp()const{ connect } = require('../../utils/mqtt')const mqttHost = 'broker.emqx.io'
const mqttPort = 8084const deviceSub = '/mysmarthome/sub' //小程序发布指令的Topic
const devicePub = '/smarthome/pub' //小程序接收数据的Topicconst mpSubTopic = devicePub //mp指小程序（这样更直观）
const mpPubTopic = deviceSub //小程序发布指令的TopicPage({data: {client: null,Humi:0,Temp:0,huoyan:1,gas:0,leds:false,ranqi:0,fen:false,water:false},//下发指令：ledonledsChange(event){const that = thisconsole.log(event.detail.value);const sw = event.detail.valuethat.setData({leds:sw})if(sw){that.data.client.publish(mpPubTopic,JSON.stringify({target:"leds",value:1}),function (err) {if(!err){console.log('成功下发指令打开led')console.log('{target:"leds"，value:1}')}})}else{that.data.client.publish(mpPubTopic,JSON.stringify({target:"leds",value:0}),function (err) {if(!err){console.log('成功下发指令关闭led')console.log('{target:"leds"，value:0}')}})}},//下发指令：风扇onfenChange(event){const that = thisconsole.log(event.detail.value);const sw = event.detail.valuethat.setData({fen:sw})if(sw){that.data.client.publish(mpPubTopic,JSON.stringify({target:"fen",value:1}),function (err) {if(!err){console.log('成功下发指令打开排气扇')}})}else{that.data.client.publish(mpPubTopic,JSON.stringify({target:"fen",value:0}),function (err) {if(!err){console.log('成功下发指令关闭排气扇')}})}},//下发指令：水泵onwaterChange(event){const that = thisconsole.log(event.detail.value);const sw = event.detail.valuethat.setData({water:sw})if(sw){that.data.client.publish(mpPubTopic,JSON.stringify({target:"water",value:1}),function (err) {if(!err){console.log('成功下发指令打开水泵')}})}else{that.data.client.publish(mpPubTopic,JSON.stringify({target:"water",value:0}),function (err) {if(!err){console.log('成功下发指令关闭水泵')}})}},//显示接受到的数据onShow(){const that = thisthat.setData({client:connect(`wxs://${mqttHost}:${mqttPort}/mqtt`)})that.data.client.on('connect',function (params) {console.log('成功连接到mqtt服务器')wx.showToast({title: '连接成功',icon:'success',mask:true})that.data.client.subscribe(mpSubTopic,function (err) {if(!err){console.log('成功订阅设备上行数据Topic')}})})that.data.client.on('message',function (topic,message) {console.log(topic);let dataFromDev = {}try {dataFromDev = JSON.parse(message)console.log(dataFromDev);that.setData({Temp:dataFromDev.Temp,Humi:dataFromDev.Humi,huoyan:dataFromDev.huoyan,gas:dataFromDev.gas,ranqi:dataFromDev.ranqi,})} catch (error) {console.log('JSON解析失败',error)}})},
})

②index.wxml

<!--index.wxml-->
<view class="page-container">
<!--头部部分--><view class="header-container"><view class="header-one"><view>战损版</view></view><view class="header-two"><view>智能家居</view></view></view>
<!--数据部分-->
<view class="data-container"><!--温度--><view class="data-card"><image class="data-card__icon" src="/static/wendu.png" /><view class="data-card__text"><view class="data-card__title">温度</view><view class="data-card__value">{{ Temp }} ℃</view></view></view><!--湿度--><view class="data-card"><image class="data-card__icon" src="/static/shidu.png" /><view class="data-card__text"><view class="data-card__title">湿度</view><view class="data-card__value">{{ Humi }}%rh</view></view></view><!--可燃气体浓度--><view class="data-card"><image class="data-card__icon" src="/static/gas.png" /><view class="data-card__text"><view class="data-card__title">可燃气浓度</view><view class="data-card__value">{{ ranqi }} ppm</view></view></view><!--烟雾浓度--><view class="data-card"><image class="data-card__icon" src="/static/yanwu.png" /><view class="data-card__text"><view class="data-card__title">天然气浓度</view><view class="data-card__value">{{ gas }} ppm</view></view></view><view class="data-card"><image class="data-card__icon" src="/static/huoyan.png" /><view class="data-card__text"><view class="data-card__title">火焰</view><view class="data-card__value"><view wx:if="{{huoyan == 1}}">无</view><view wx:elif="{{huoyan == 0}}">有</view></view></view></view><!--雨水--><view class="data-card"><image class="data-card__icon" src="/static/yudi.png" /><view class="data-card__text"><view class="data-card__title">雨</view><view class="data-card__value"><view wx:if="{{xiayu==1}}">下雨</view><view wx:elif="{{xiayu==0}}">未下雨</view></view></view></view><!--开启or关闭排气扇--><view class="data-card"><image class="data-card__icon" src="/static/fen.png"/><view class="data-card__text"><view class="data-card__title">排气扇</view><view class="data-card__value"><switch checked="{{fen}}" bindchange="onfenChange" color="#3d7ef9"/></view></view></view><!--开启or关闭水泵--><view class="data-card"><image class="data-card__icon" src="/static/water.png"/><view class="data-card__text"><view class="data-card__title">水泵</view><view class="data-card__value"><switch checked="{{water}}" bindchange="onwaterChange" color="#3d7ef9"/></view></view></view><!--开启or关闭卧室灯--><view class="data-card"><image class="data-card__icon" src="/static/leds.png" /><view class="data-card__text"><view class="data-card__title">卧室灯</view><view class="data-card__value"><switch checked="{{ leds }}" bindchange="onledsChange" color="#3d7ef9"/></view></view></view></view></view>

③index.wxss

/**小程序整个页面的设置**/
.page-container{padding: 36rpx;
}
/**设置顶部大筐筐**/
.header-container{background-color: #fff;color: black;box-shadow: #d6d6d6 0 0 20rpx;border-radius: 36rpx;padding: 3rpx 3rpx;
}
/**设置顶部大筐筐内的第一行字**/
.header-container .header-one{display: flex;justify-content: center;padding: 10rpx;font-size: 50rpx;font: bold;
}
/**设置顶部大筐筐内的第二行字**/
.header-container .header-two{  display: flex;justify-content: center;padding: 10rpx;font-size: 40rpx;font: bold;
}.choice {display: flex;flex-direction: row;font-size: 20px;justify-content: center;color: rgb(38, 38, 39);margin-top: 30rpx;margin-bottom: 20rpx;top: 3rpx;box-shadow:0px 0px 10px #bfbfc0 inset;
}.btn1 {/* float:left;background-color: rgb(112, 107, 107);color: rgb(66, 63, 63); */float:left;top: 3rpx;box-shadow:0px 0px 8px #999 inset; 
}.btn-class{float:left;top: 3rpx;box-shadow:0px 0px 10px #b8b9bd inset;
}.btn2 {float:right; top: 3rpx;box-shadow:0px 0px 8px #999 inset; 
}
.btn-class2{float:right;top: 3rpx;box-shadow:0px 0px 10px #b8b9bd inset;
}.btn3 {float:left;top: 3rpx;box-shadow:0px 0px 8px #999 inset; 
}
.btn-class3{float:left;top: 3rpx;box-shadow:0px 0px 10px #b8b9bd inset;
}.btn4 {float:right;top: 3rpx;box-shadow:0px 0px 8px #999 inset; 
}
.btn-class4{float:right;top: 3rpx;box-shadow:0px 0px 10px #b8b9bd inset;
}.s_view{bottom: 0rpx; width: 100%;
}/**设置数据部分总体布局**/
.data-container{margin-top: 30rpx;display: grid;justify-content: center;grid-template-columns: repeat(auto-fill,300rpx);grid-gap: 30rpx;
}
/**设置数据部分小卡片内的格式**/
.data-container .data-card{position: relative;background-color: #fff;height: 140rpx;box-shadow: #d6d6d6 0 0 8rpx;border-radius: 36rpx;display: flex;justify-content: space-between;padding: 16rpx;
}
/**以下是小卡片内的文本、图片、标题、数值设置**/
.data-container .data-card .data-card__text{position: absolute;top: 20rpx;right: 24rpx;text-align: right;white-space: nowrap;
}.data-container .data-card .data-card__icon{position: absolute;height: 72rpx;width: 72rpx;left: 32rpx;top: 16rpx;
}.data-container .data-card .data-card__value{font-size: 40rpx;margin-top: 20rpx;
}.data-container .data-card .data-card__title{font-size: 34rpx;
}

至此整个项目的关键点介绍完毕，可以想象出裸机还是可能会漏消息的，下一篇就是使用freertos来进行编程，使得整个系统的实时性再一次提高。

四、项目获取

关注私聊


http://www.ppmy.cn/news/1533980.html

相关文章

python 实现md5算法

python 实现md5算法

md5算法介绍 MD5&#xff08;Message-Digest Algorithm 5&#xff09;是一种广泛使用的加密散列函数&#xff0c;由Ronald Rivest于1991年设计&#xff0c;并在1992年正式发布。MD5可以将任意长度的“消息”&#xff08;也可以是文件&#xff09;计算出一个固定长度的“摘要”…
阅读更多...
RabbitMQ 延迟消息

RabbitMQ 延迟消息

基本概念&#xff1a; 生产者发送消息时指定一个时间&#xff0c;消费者不会立刻收到消息&#xff0c;而是在指定时间之后才收到消息。 死信&#xff1a; 指那些无法被正常路由到队列的消息&#xff0c;或者在队列中无法被消费者正常消费的消息。当消息满足某些特定条件时&am…
阅读更多...
音视频入门基础：FLV专题（7）——Tag header简介

音视频入门基础：FLV专题（7）——Tag header简介

一、引言 从《音视频入门基础&#xff1a;FLV专题&#xff08;3&#xff09;——FLV header简介》中可以知道&#xff0c; 在FLV header之后&#xff0c;FLV文件剩下的部分应由PreviousTagSize和Tag组成。FLV文件 FLV header PreviousTagSize0 Tag1 PreviousTagSize1 Ta…
阅读更多...
SAP_FI_主数据和业务数据

SAP_FI_主数据和业务数据

在SAP的FI&#xff08;Financial Accounting&#xff09;模块中&#xff0c;主数据和业务数据是两个关键的组成部分。它们各自有着不同的定义和用途&#xff1a; 主数据 (Master Data) 主数据是指系统中较为静态且相对长期使用的数据&#xff0c;通常能够跨多个财务周期使用。…
阅读更多...
相机、镜头参数详解以及相关计算公式

相机、镜头参数详解以及相关计算公式

一、工业相机参数 1、分辨率 相机每次采集图像的像素点数&#xff0c;也是指这个相机总共有多少个感光晶片。在采集图像时&#xff0c;相机的分辨率对检测精度有很大的影响&#xff0c;在对同样打的视场成像时&#xff0c;分辨率越高&#xff0c;对细节的展示越明显。 相机像素…
阅读更多...
Linux常用语法

Linux常用语法

Linux常用语法 0.引言特殊路径符Linux 命令基础格式重要命令mkdir命令echo-tail命令 vi\vim编辑器的三种工作模式vi/vim简单介绍基础命令 运行模式命令模式下的快捷键 进程管理进程的命令 Linux解压缩tar格式zip命令unzip命令 ping,wget,curl等命令的使用Linux端口端口端口的划…
阅读更多...
C语言+单片机

C语言+单片机

今天内容有点水哈哈&#xff08;忙着练焊铁技术了嘻嘻&#xff09; C语言 简单学习了while语言以及其与for语言的区别和适用方法 .循环结构&#xff1a; 初始化语句条件判断句条件控制句 for语句 for(int1;i<100;i){执行条件} for (int i 1; i < 100; i) {printf(&quo…
阅读更多...
Replit Agent：AI驱动的全自动化软件开发革命

Replit Agent：AI驱动的全自动化软件开发革命

目录 引言Replit Agent核心功能使用场景与优势最新版本更新处理复杂项目的能力常见问题解决方案支持的编程语言和技术栈与其他AI编程工具的比较结语 引言 在人工智能快速发展的今天&#xff0c;软件开发领域正经历着前所未有的变革。Replit Agent作为AI初创公司Replit推出的…
阅读更多...
最新文章

Copyright @ 2022~2023