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

总结

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

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

相关推荐
掰头战士2 天前
你本地的LLM有时会胡乱使用tools?不妨用MCP规范LLM工具调用!
node.js·llm·全栈
前端双越老师2 天前
AI 编程普及,初学者还要不要学习基础语法?
agent·ai编程·全栈
万敏6 天前
TypeScript 入门第一周完整记录:知识点总结 + 踩坑实录
node.js·全栈
月光刺眼6 天前
用LangChain 打造第一个 Agent:LLM 大脑与 Tool 手脚的完整闭环
javascript·人工智能·全栈
甜味弥漫6 天前
后端开发入门:业务能力、数据库与程序员的核心竞争力
javascript·node.js·全栈
不想说话的麋鹿7 天前
「项目实战」我用 Codex + GPT-5.5 + Trellis "氛围编程",独立做了一个情侣厨房小程序
前端·agent·全栈
用户938515635077 天前
从“问答机器”到“智能体”:AI Agent 是如何自主工作的?
javascript·人工智能·全栈
程序员老猫9 天前
vide coding 个人产品,那就从博客开始吧
人工智能·程序员·全栈
前端缘梦13 天前
LangGraph 实战:从 0 到 1 构建 AI 代码生成工作流
前端·程序员·全栈