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

总结

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

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

相关推荐
RealPluto21 分钟前
SSH连接本地VMware内的虚拟机
linux·全栈
Mintopia1 小时前
🧠 一文吃透 Next.js 中的 JWT vs Session:底层原理+幽默拆解指南
前端·javascript·全栈
Mintopia1 天前
🚀 Next.js 16 新特性深度解析:当框架开始思考人生
前端·后端·全栈
Mintopia2 天前
🧠 AIGC + 区块链:Web内容确权与溯源的技术融合探索
前端·javascript·全栈
Mintopia2 天前
🚀 Next.js Edge Runtime 实践学习指南 —— 从零到边缘的奇幻旅行
前端·后端·全栈
Mintopia3 天前
🧠 Next.js 还是 Nuxt.js?——当 JavaScript 碰上命运的分叉路
前端·后端·全栈
Mintopia4 天前
🇨🇳 Next.js 在国内场景下的使用分析与实践指南
前端·后端·全栈
王六岁7 天前
🐍 前端开发 0 基础学 Python 入门指南:数字与字符串篇
前端·python·全栈
Mintopia7 天前
📚 Next.js 分页 & 模糊搜索:在无限数据海里优雅地翻页
前端·javascript·全栈
Mintopia8 天前
⚙️ Next.js 事务与批量操作:让异步的世界井然有序
前端·javascript·全栈