晋江免费网站建设,做网站怎么看效果,商业空间设计图片,运营商推广5g技术一、项目概述
在物联网#xff08;IoT#xff09;时代#xff0c;智能设备的远程控制变得越来越重要。本文介绍了一个构建智能设备控制面板的项目#xff0c;允许用户通过 Web 应用来控制多个 ESP32 设备。用户可以通过该面板查看设备列表#xff0c;实时了解设备状态IoT时代智能设备的远程控制变得越来越重要。本文介绍了一个构建智能设备控制面板的项目允许用户通过 Web 应用来控制多个 ESP32 设备。用户可以通过该面板查看设备列表实时了解设备状态并对设备进行操作例如开关、调节亮度等。
二、系统架构
为了满足项目需求我们设计了一套系统架构包括前端、后端、数据库和通信协议如下图所示 #mermaid-svg-Qb9JUxYc3zG1NAFx {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Qb9JUxYc3zG1NAFx .error-icon{fill:#552222;}#mermaid-svg-Qb9JUxYc3zG1NAFx .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Qb9JUxYc3zG1NAFx .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-Qb9JUxYc3zG1NAFx .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Qb9JUxYc3zG1NAFx .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Qb9JUxYc3zG1NAFx .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Qb9JUxYc3zG1NAFx .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Qb9JUxYc3zG1NAFx .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Qb9JUxYc3zG1NAFx .marker.cross{stroke:#333333;}#mermaid-svg-Qb9JUxYc3zG1NAFx svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Qb9JUxYc3zG1NAFx .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-Qb9JUxYc3zG1NAFx .cluster-label text{fill:#333;}#mermaid-svg-Qb9JUxYc3zG1NAFx .cluster-label span{color:#333;}#mermaid-svg-Qb9JUxYc3zG1NAFx .label text,#mermaid-svg-Qb9JUxYc3zG1NAFx span{fill:#333;color:#333;}#mermaid-svg-Qb9JUxYc3zG1NAFx .node rect,#mermaid-svg-Qb9JUxYc3zG1NAFx .node circle,#mermaid-svg-Qb9JUxYc3zG1NAFx .node ellipse,#mermaid-svg-Qb9JUxYc3zG1NAFx .node polygon,#mermaid-svg-Qb9JUxYc3zG1NAFx .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Qb9JUxYc3zG1NAFx .node .label{text-align:center;}#mermaid-svg-Qb9JUxYc3zG1NAFx .node.clickable{cursor:pointer;}#mermaid-svg-Qb9JUxYc3zG1NAFx .arrowheadPath{fill:#333333;}#mermaid-svg-Qb9JUxYc3zG1NAFx .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-Qb9JUxYc3zG1NAFx .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-Qb9JUxYc3zG1NAFx .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-Qb9JUxYc3zG1NAFx .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-Qb9JUxYc3zG1NAFx .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-Qb9JUxYc3zG1NAFx .cluster text{fill:#333;}#mermaid-svg-Qb9JUxYc3zG1NAFx .cluster span{color:#333;}#mermaid-svg-Qb9JUxYc3zG1NAFx div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-Qb9JUxYc3zG1NAFx :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 用户 前端 后端 数据库 ESP32 设备 1. 单片机和设备 单片机ESP32 设备智能灯光、智能插座等
2. 通信协议 WebSocket用于实时通信保证设备状态的实时更新 RESTful API用于设备的管理操作
3. 技术栈 前端React、Vue.js 或 Angular本文选择 React 后端Node.js、Flask 或 Django本文选择 Node.js 数据库MongoDB 或 Firebase本文选择 MongoDB
三、环境搭建
1. 前端环境
安装 React 开发环境
npx create-react-app smart-device-control-panel
cd smart-device-control-panel
npm start2. 后端环境
安装 Node.js 和 Express
mkdir backend
cd backend
npm init -y
npm install express mongoose body-parser ws3. 数据库环境
安装 MongoDB
# 对于 macOS 用户
brew tap mongodb/brew
brew install mongodb-community5.0# 启动 MongoDB
brew services start mongodb/brew/mongodb-community四、代码实现
1. 前端代码
在 src 目录下创建组件和服务主要包括设备列表管理、设备控制和实时状态更新。
设备列表组件
DeviceList 组件用于显示所有设备的列表。
// src/components/DeviceList.js
import React from react;function DeviceList({ devices }) {return (divh2设备列表/h2ul{devices.map((device) (li key{device.id}{device.name} - {device.status}/li))}/ul/div);
}export default DeviceList;设备控制组件
DeviceControl 组件用于控制设备的状态。
// src/components/DeviceControl.js
import React, { useState } from react;function DeviceControl({ onControl }) {const [deviceId, setDeviceId] useState();const [command, setCommand] useState();const handleSubmit (e) {e.preventDefault();if (deviceId command) {onControl(deviceId, command);}};return (divh2设备控制/h2form onSubmit{handleSubmit}divlabel htmlFordeviceId设备 ID:/labelinputtypetextiddeviceIdvalue{deviceId}onChange{(e) setDeviceId(e.target.value)}//divdivlabel htmlForcommand指令:/labelinputtypetextidcommandvalue{command}onChange{(e) setCommand(e.target.value)}//divbutton typesubmit发送/button/form/div);
}export default DeviceControl;服务模块
deviceService 模块用于与后端进行通信。
// src/services/deviceService.js
const API_URL http://localhost:3000;export async function getDevices() {const response await fetch(${API_URL}/devices);return response.json();
}export async function controlDevice(id, command) {await fetch(${API_URL}/control/${id}, {method: POST,headers: {Content-Type: application/json,},body: JSON.stringify({ command }),});
}export function subscribeToDeviceUpdates(callback) {const ws new WebSocket(ws://localhost:8080);ws.onmessage (event) {const device JSON.parse(event.data);callback(device);};
}主应用组件
App 组件是主应用组件负责管理设备列表和控制操作。
// src/App.js
import React, { useState, useEffect } from react;
import DeviceList from ./components/DeviceList;
import DeviceControl from ./components/DeviceControl;
import { getDevices, controlDevice, subscribeToDeviceUpdates } from ./services/deviceService;function App() {const [devices, setDevices] useState([]);useEffect(() {getDevices().then(setDevices);subscribeToDeviceUpdates((updatedDevice) {setDevices((prevDevices) prevDevices.map((device) (device.id updatedDevice.id ? updatedDevice : device)));});}, []);const handleControl (id, command) {controlDevice(id, command);};return (div classNameAppDeviceList devices{devices} /DeviceControl onControl{handleControl} //div);
}export default App;2. 后端代码
在 backend 目录下创建服务器和路由处理设备管理和控制请求。
设备模型
Device 模型定义设备的结构。
// backend/models/Device.js
const mongoose require(mongoose);const deviceSchema new mongoose.Schema({name: String,status: String,
});module.exports mongoose.model(Device, deviceSchema);服务器和路由
server.js 文件设置服务器处理设备列表和控制请求并通过 WebSocket 实现实时状态更新。
// backend/server.js
const express require(express);
const mongoose require(mongoose);
const bodyParser require(body-parser);
const WebSocket require(ws);
const Device require(./models/Device);const app express();
const wss new WebSocket.Server({ port: 8080 });
app.use(bodyParser.json());// RESTful API
app.get(/devices, async (req, res) {const devices await Device.find();res.json(devices);
});app.post(/control/:id, async (req, res) {const { id } req.params;const { command } req.body;// 发送控制命令给设备// 这里可以通过与 ESP32 设备通信的特定实现来发送命令const device await Device.findById(id);if (device) {// 更新设备状态逻辑device.status command.status; // 假设 command 包含 status 属性await device.save();// 通知所有 WebSocket 客户端wss.clients.forEach((client) {if (client.readyState WebSocket.OPEN) {client.send(JSON.stringify(device));}});res.sendStatus(200);} else {res.sendStatus(404);}
});// WebSocket
wss.on(connection, (ws) {ws.on(message, (message) {const { id, status } JSON.parse(message);Device.findByIdAndUpdate(id, { status }, { new: true }, (err, device) {if (err) return;wss.clients.forEach((client) {if (client.readyState WebSocket.OPEN) {client.send(JSON.stringify(device));}});});});
});app.listen(3000, () {console.log(后端服务器在 http://localhost:3000 运行);
});代码说明
前端代码说明
DeviceList 组件 (DeviceList.js) 用于显示设备列表。 从 props 获取设备数据并生成设备列表的 HTML 元素。
DeviceControl 组件 (DeviceControl.js) 用于控制设备。 包含设备 ID 和控制指令的输入框并在表单提交时调用 onControl 函数。
deviceService 模块 (deviceService.js) getDevices 函数从后端获取设备列表。 controlDevice 函数向后端发送控制设备的指令。 subscribeToDeviceUpdates 函数通过 WebSocket 订阅设备状态更新。
App 组件 (App.js) 主应用组件管理设备列表和控制操作。 使用 useEffect 钩子在组件挂载时获取设备列表并订阅设备状态更新。 handleControl 函数调用 controlDevice 发送控制指令。
后端代码说明
设备模型 (Device.js)
定义设备的 Mongoose 模型包含 name 和 status 属性。
服务器和路由 (server.js) 监听客户端连接和消息更新设备状态并通知所有客户端。 GET /devices获取所有设备。 POST /control/:id控制指定 ID 的设备并通过 WebSocket 通知所有客户端。 使用 Express 创建服务器并连接到 MongoDB 数据库。
五、项目总结
在本项目中我们构建了一个智能设备控制面板用户可以通过 Web 应用控制多个 ESP32 设备。项目使用 React 构建前端用 Node.js 和 Express 搭建后端使用 MongoDB 存储设备数据并通过 WebSocket 实现设备状态的实时更新。项目架构清晰功能完备为用户提供了良好的体验。
