济南网站建设开发公司哪家好,青岛网站公司,连锁销售公司网站的建设方案,网站开发使用框架原因前面已经写了三篇博客关于智能家居的#xff0c;服务器全都是使用ONENET中国移动#xff0c;他最大的优点就是作为数据收发的中转站是免费的。本篇使用专门适配MQTT协议的MQTT服务器#xff0c;有公用的#xff0c;也可以自己搭建#xff08;应该要钱#xff09;#xf… 前面已经写了三篇博客关于智能家居的服务器全都是使用ONENET中国移动他最大的优点就是作为数据收发的中转站是免费的。本篇使用专门适配MQTT协议的MQTT服务器有公用的也可以自己搭建应该要钱项目源码在最后 前言一、项目总览二、总体流程分析1、了解mqtt协议2、测试下位机与服务器的通信mqtt.fx3、搭建自己的MQTT服务器 三、代码1、下位机2、微信小程序 四、项目获取 前言
本篇博客实现的功能和之前的智能家居系列类似仅仅是把服务器换成了公用的mqtt服务器在经过实测之后个人觉得智能家居这种场景还是比较适合使用mqtt协议仅仅是个人感觉。其实功能这一块我想到一个比较有意思的就是用雨滴传感器和步进电机来模拟自动晾晒衣服的功能大家应该能想象出来是啥意思就是下雨了通过步进电机将晒衣服的架子给缩回来不下雨了又给推出去这还蛮有意思的。 前几篇博客 ①httponenet实现数据上传给微信小程序 ②httponenet实现小程序下发指令控制开发板 ③mqttonenet
一、项目总览
由于面包板还没到线接的很乱就不拍照了找到了之前做类似项目的照片用这个代替一下 微信小程序
基本功能首先是检测家庭内部环境信息其次就是微信小程序控制外设动作。
上面的实物图中有一个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或者直接gpt问各行代码的意思。本设计用微信开发者工具原生框架进行小程序设计用到了多个不同的文件来设计小程序其中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:ledsvalue:1})}})}else{that.data.client.publish(mpPubTopic,JSON.stringify({target:leds,value:0}),function (err) {if(!err){console.log(成功下发指令关闭led)console.log({target:ledsvalue: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 classpage-container
!--头部部分--view classheader-containerview classheader-oneview战损版/view/viewview classheader-twoview智能家居/view/view/view
!--数据部分--
view classdata-container!--温度--view classdata-cardimage classdata-card__icon src/static/wendu.png /view classdata-card__textview classdata-card__title温度/viewview classdata-card__value{{ Temp }} ℃/view/view/view!--湿度--view classdata-cardimage classdata-card__icon src/static/shidu.png /view classdata-card__textview classdata-card__title湿度/viewview classdata-card__value{{ Humi }}%rh/view/view/view!--可燃气体浓度--view classdata-cardimage classdata-card__icon src/static/gas.png /view classdata-card__textview classdata-card__title可燃气浓度/viewview classdata-card__value{{ ranqi }} ppm/view/view/view!--烟雾浓度--view classdata-cardimage classdata-card__icon src/static/yanwu.png /view classdata-card__textview classdata-card__title天然气浓度/viewview classdata-card__value{{ gas }} ppm/view/view/viewview classdata-cardimage classdata-card__icon src/static/huoyan.png /view classdata-card__textview classdata-card__title火焰/viewview classdata-card__valueview wx:if{{huoyan 1}}无/viewview wx:elif{{huoyan 0}}有/view/view/view/view!--雨水--view classdata-cardimage classdata-card__icon src/static/yudi.png /view classdata-card__textview classdata-card__title雨/viewview classdata-card__valueview wx:if{{xiayu1}}下雨/viewview wx:elif{{xiayu0}}未下雨/view/view/view/view!--开启or关闭排气扇--view classdata-cardimage classdata-card__icon src/static/fen.png/view classdata-card__textview classdata-card__title排气扇/viewview classdata-card__valueswitch checked{{fen}} bindchangeonfenChange color#3d7ef9//view/view/view!--开启or关闭水泵--view classdata-cardimage classdata-card__icon src/static/water.png/view classdata-card__textview classdata-card__title水泵/viewview classdata-card__valueswitch checked{{water}} bindchangeonwaterChange color#3d7ef9//view/view/view!--开启or关闭卧室灯--view classdata-cardimage classdata-card__icon src/static/leds.png /view classdata-card__textview classdata-card__title卧室灯/viewview classdata-card__valueswitch checked{{ leds }} bindchangeonledsChange 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来进行编程使得整个系统的实时性再一次提高。
四、项目获取
我用夸克网盘分享了「智能家居mqtt服务器mqtt协议.rar」点击链接即可保存。打开「夸克APP」无需下载在线播放视频畅享原画5倍速支持电视投屏。 链接https://pan.quark.cn/s/42127dfa3d3a 提取码2Nmg
