基于react+node+mysql+mqtt+Arduino的物联网设备简单实现

前言

基于对物联网的课题,实现前端与后端分离,结合mqtt服务器链接arduino设备,实现获取,存储,上传和下发命令的功能。

原理

本系统的实现原理是一套简易的软硬件通讯流程,仅供参考。前端书写前端页面,node服务器实现服务器端开发,在服务器端链接mysql数据存储,同时使用websocket长连接通讯,实现前后端数据的收发。此外,使用node服务器与mqtt服务器进行通讯,而mqtt服务器只做一个中转的作用,因为,硬件arduino使用esp8266模块mqtt服务器进行通讯,通讯收发的数据经过mqtt服务器node服务器进行传递。这样,就达成了简易的软件与硬件间的连接实时通讯。同时,数据的持久化存储是在硬件数据到达node服务器时使用mysql数据库存储。以遍后续查看数据库的操作。本系统设计与实现都在以上技术的基础上实现。

系统结构设计图

React客户端设计

使用react搭建前台项目,重写axios,实现前端与node服务器的通讯。同时使用ws协议建立webSocket长连接通讯,用于获取硬件实时数据,发送指令信息。

Node服务器设计

为了实现前后端分离的土壤检测系统,项目使用了Nodejs作为后端的语言,管理数据,使用socket.io插件建立WebSocket处理实时通讯的功能,使用Mysql用户的信息存储功能,并将获取的硬件数据信息进行存储。使用mqtt插件,使用mqtt协议,建立与mqtt服务器的长连接通讯。

MQTT服务器设计

系统使用了Mqtt服务器,用于对接硬件数据的网络上传以及Nodejs服务器向的硬件发送命令指示信息。使用前,需安装/下载mqtt服务器配置mqtt的用户和密码等配置信息,才能在node服务器上发送请求建立连接。

Arduino硬件设计

Arduino硬件设备,得到数据信息之后,使用6,7引脚,将数据传递给esp8266模块。而在esp8266模块中,按格式设置好获取的信息,再使用ESP8266WiFi模块连接wifi,使用PubSubClient模块向网络端的mqtt服务器设备发送数据信息。Mqtt服务器,是对外公开的,当前端点击打开设备时,建立socket长连接通讯,同时,在nodejs后端中,使用mqtt模块,连接mqtt服务器,获取硬件信息,并肩信息处理。

总结

在完成前端项目业务需求和服务器业务需求的同时,尽可能的完善了项目的功能模块,包括不限于设备管理,用户信息等。

该系统的设计目标是使用软硬件结合的方式,实现硬件的数据采集,硬件部分功能的控制,以及对前台的页面渲染等功能。虽然在校每学期都会开设这样的创新实验课,但在软硬件的交互的具体应用上,仍然碰到过几个小问题,但在持续的学习与实践中,都一一解决了。当完成设计时实现了软硬件的通讯,实时监听硬件设备采集的数据信息,用户信息和用户的设备管理,控制硬件设备等功能。但是,同样存在着部分的问题,无法控制前台与后台传输数据的效率,传输的数据流较大,需要优化,同时数据库的插入的数据内容庞大,传输的距离有限制,它们需要优化。

相关推荐
不会敲代码115 小时前
JavaScript 响应式布局的诞生历程:从后端渲染到前端响应式
全栈
全栈前端老曹15 小时前
【MongoDB】Node.js 集成 —— Mongoose ORM、Schema 设计、Model 操作
前端·javascript·数据库·mongodb·node.js·nosql·全栈
沈二到不行1 天前
【22-26】蜉蝣一日、入樊笼尔
程序员·ai编程·全栈
chao_7896 天前
双设备全栈开发最佳实践[mac系统]
git·python·macos·docker·vue·全栈
一心赚狗粮的宇叔7 天前
mongosDb 安装及Mongosshell常见命令
数据库·mongodb·oracle·nosql·web·全栈
暴富的Tdy11 天前
【前端开发-循序渐进转向全栈开发】
vue2·web·全栈
重铸码农荣光25 天前
🤖 用 AI 写 Git Commit Message?我让新手秒变 Git 高手!
langchain·aigc·全栈
社恐的下水道蟑螂1 个月前
深入掌握 AI 全栈项目中的路由功能:从基础到进阶的全面解析
前端·react.js·全栈
JOEH601 个月前
🛡️ 微服务雪崩救星:Sentinel 限流熔断实战,3行代码搞定高可用!
后端·全栈
前端付豪1 个月前
必知 Express和 MVC
前端·node.js·全栈