基于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服务器,获取硬件信息,并肩信息处理。

总结

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

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

相关推荐
Codebee3 天前
打破偏见!企业级AI不是玩具!Ooder全栈框架+程序员=专业业务系统神器
前端·全栈
realze4 天前
关于我80%的代码都用AI生成这件事
人工智能·代码规范·全栈
ssshooter5 天前
彻底搞懂 SSH 与 Git 的“幕后交易”
git·github·全栈
ZsTs1195 天前
《2025 AI 自动化新高度:一套代码搞定 iOS、Android 双端,全平台 AutoGLM 部署实战》
前端·人工智能·全栈
jun_不见5 天前
nest初体验-用nest实现一个简单的CRUD功能
前端·node.js·全栈
前端双越老师6 天前
自由职业者 2025 年终总结:转型 AI 全栈
面试·ai编程·全栈
小皮虾6 天前
搞全栈还在纠结 POST、GET、RESTful?试试这个,像调用本地函数一样写接口
前端·node.js·全栈
小皮虾9 天前
别再封装 Axios 了!用 RPC 像调用本地函数一样写接口(支持 Vue/React/Node)
前端·rpc·全栈
Mintopia9 天前
🧭 Next.js 服务器部署摘要
react.js·全栈·next.js