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

总结

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

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

相关推荐
明月_清风5 天前
全栈工程师必会技术栈:从入门到架构的完整成长地图 🗺️
前端·后端·全栈
狂师5 天前
AI 测试提效 | 告别手工写脚本,分享我的 Playwright + Skill 批量生成 UI 自动化脚本方案
人工智能·测试·全栈
用户938515635076 天前
从零构建《天龙八部》知识库:EPUB 加载→文本分割→向量嵌入→Milvus 存储→RAG 问答,一条链路打通
javascript·人工智能·全栈
何时梦醒6 天前
React + TypeScript 企业级开发实战:从零搭建到组件架构演进
前端·react.js·全栈
前端双越老师6 天前
Nest.js 和 Spring Boot 为何如此像?写给前端转 Java 的同学
java·spring boot·全栈
Staticy7 天前
Claude Code 接国产模型不能识图?一个 MCP 让纯文本模型也能看图
人工智能·ai编程·全栈
极简前端打杂工7 天前
从0到1搭建通用低代码平台(-)— 表单设计器
前端·全栈
swipe7 天前
11|(前端转全栈)购物车不能只存在前端:用户维度数据如何在后端落库
前端·后端·全栈
swipe7 天前
10|(前端转全栈)库存扣减为什么最容易出事故?SKU、并发与原子更新
前端·后端·全栈
_lucas7 天前
给知识库网站接入AI问答
前端·ai编程·全栈