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

🕗 发布于 2024-04-09 01:33 智能家居 服务器 微信小程序

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

前言

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

const deviceSub = '/mysmarthome/sub' //小程序发布指令的Topic
const devicePub = '/smarthome/pub' //小程序接收数据的Topic

const mpSubTopic = devicePub //mp指小程序（这样更直观）
const mpPubTopic = deviceSub //小程序发布指令的Topic

Page({
  data: {
    client: null,
    Humi:0,
    Temp:0,
    huoyan:1,
    gas:0,
    leds:false,
    ranqi:0,
    fen:false,
    water:false
  },

 //下发指令：led
  onledsChange(event){
    const that = this
    console.log(event.detail.value);
    const sw = event.detail.value
    that.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 = this
    console.log(event.detail.value);
    const sw = event.detail.value
    that.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 = this
    console.log(event.detail.value);
    const sw = event.detail.value
    that.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 = this
    that.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来进行编程，使得整个系统的实时性再一次提高。

四、项目获取

关注私聊

原文地址：https://blog.csdn.net/m0_71523511/article/details/137525486

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：shell脚本:关闭指定某个进程
下一篇：外包干了3个多月，技术退步明显。。。。

学生公寓管理系统
由于某些特殊原因，需要对学生当前入住的床位进行修改时，使用此功能。新生开学后，宿管管理可以先根据学生所在系查询该专业预定的宿舍和具体的床位入住状态信息，为该学生分配一个空闲状态的床位，并修改当前床位状
阅读更多2024-11-15
Windows上安装RabbitMQ 4.0.3教程
通过上述步骤，你应该已经成功在Windows上安装了RabbitMQ 4.0.3，并启用了管理插件。现在，你可以开始使用RabbitMQ来构建你的分布式系统了。希望这篇教程对你有所帮助，如果有任何问题
阅读更多2024-11-15
【蓝桥等考C++真题】蓝桥杯等级考试C++组第13级L13真题原题(含答案)-成绩排序
C++L13 成绩排序(50 分)
阅读更多2024-11-15
Web入门
HTTP（HyperText Transfer Protocol，超文本传输协议）是一种应用层协议。主要用于在Web浏览器和服务器之间传输数据。基于TCP协议：面向连接，确保了数据传输的可靠性和顺序。
阅读更多2024-11-15
Android 最新的AndroidStudio引入依赖失败如何解决？如:Failed to resolve:xxxx
在引入依赖时报错：Failed to resolve: xxx.xxxx:1.1.0。
阅读更多2024-11-15
力扣113：路径总和II
力扣113：路径总和II。C语言
阅读更多2024-11-15
【springboot使用sqlite数据库】Java后台同时使用mysql、sqlite
根据业务的需要，老版程序使用的数据库是sqlite，版本升级成前后台分离模式，因此需要兼容mysql与sqlite数据库同时使用。
阅读更多2024-11-15
力扣.15 三数之和 three-sum
这道题作为 leetcode 的第 15 道题，看起来似曾相识。大概思路可以有下面几种：暴力解法数组排序+二分Hash 优化双指针。
阅读更多2024-11-15
力扣第 53 题：最大子数组和
题目给定一个整数数组nums，目标是找到和最大的连续子数组（最少包含一个元素），并返回其和。例如，在数组中，和最大的子数组为，其和为6。
阅读更多2024-11-15
linux-缓冲区
调用系统调用接口是需要时间成本的，如果使用缓冲区，存储的字符串到一定长度再调用系统调用，能够有效减少调用系统调用的次数。这个缓冲区是语言设置的，缓冲区满足条件就用系统调用接口write将缓冲区的内容刷
阅读更多2024-11-15