物联网仿真系统基于MQTT实现微信小程序开发

面对物联网相关课程缺少设备或者设备难管理的问题,我们设计了一套物联网虚拟仿真系统,系统集成了多种虚拟传感器和网关设备,无需实体硬件即可模拟真实物联网环境。系统支持HTTP、modbusRTU、modbusTCP、MQTT、websocket等通信协议对接,因此支持app开发、微信小程序、web前端开发、云平台开发等。用户可开展各类物联网场景实验,不仅节约成本,还提供安全保障,实验效率和教学质量。

img

虚拟仿真系统实验准备

接线组成系统

拉入温湿度传感器,光照度传感器,PM2.5传感器,风扇,灯泡,LED屏,窗帘和网关,并接好线。

image-20240722141717910

序号设备供电电压数量
1网关DC24V1
2温湿度传感器DC24V1
3光照度传感器DC24V1
4PM2.5传感器DC24V1
5LED屏DC24V1
6风扇DC12V1
7灯泡DC12V1
8窗帘DC12V1

学员们在仿真软件中搭建系统,通过虚拟教学熟练监测系统的连线,为后续硬件组装奠定基础。

系统的主要设备及连线图介绍物联网仿真系统可以帮助我们模拟和测试智能家居系统,以便在实际部署之前进行验证和优化。

网关:在物联网仿真系统中,网关是核心,负责模拟连接和管理所有智能设备。网关通过仿真网络模块模拟与其他设备的通信。

传感器设备:传感器设备如门窗传感器、烟雾传感器等通过仿真网络模块连接到网关,可以模拟环境变化的检测和触发智能家居场景的功能。

执行器:智能家居系统中的设备,通过仿真网络模块与中控设备连接,可以模拟远程控制和添加策略(传感器触发,自动开启)的功能。

在物联网仿真系统中,连线图可以通过虚拟线路清晰展示各个智能设备之间的连接方式,以及设备与设备之间的连接关系。可以帮助用户理解智能家居系统的仿真架构和设备之间的通信流程

虚拟仿真系统MQTT测试

登录物联网虚拟仿真客户端

image-20240722141647679

开启MQTT模式

image-20240722171454622

打开模拟实验后,连接虚拟仿真系统的服务器和用户名密码,主题自拟。

image-20240722171508123

打开MQTTX进行测试,新建连接

image-20240722171518156

添加订阅,推送主题和订阅主题

image-20240722171615189

查看订阅消息

image-20240722171626727

上发消息至虚拟仿真系统实现控制(此时控制灯泡亮起)

image-20240722171646160

微信小程序开发

打开微信小程序开发工具,创建项目并导入MQTT库。

  • 创建好项目后,找到创建项目的目录,进入utils文件将MQTT库导入。

image-20240722171748447

导入成功MQTT库后,即可开始做虚拟仿真系统基于MQTT实现的微信小程序对接

三件套

  • 前端三件套(JS,WXSS或CSS,WXML或HTML)文件

image-20240722171816228

image-20240722171831471

  • 代码介绍,设计页面布局

    wxml创建组件组件,以及设计组件结构

image-20240722171852703

wxss进行布局调整外观文本和按钮可以自由调整

image-20240722171952252

wxss进行布局调整外观文本框和滑杆都为容器,设定为居中

image-20240722172032053

js进行MQTT通信,订阅和发送主题

第一步:调用MQTT库

image-20240722172248295

第二步:初始化页面的值

image-20240722172302409

第三步:连接MQTT

image-20240722172318108

第四步:订阅虚拟仿真推送主题,并打印出来

image-20240722172330229

第五步:解析JSON数值,并打印出来

image-20240722172403645

image-20240722172409809

第六步:编译后,数值从调试器中打印出来

image-20240722172426735

第七步:风扇,灯泡实现控制

image-20240722172442965

第八步:实现LED屏文本输出

image-20240722172501588

窗帘控制(滑动条)

image-20240722172510777

最终展示

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值