打造智能家居：用React、Node.js和WebSocket构建ESP32设备控制面板（代码说明）

极客小张2024-08-06 12:30

一、项目概述

在物联网（IoT）时代，智能设备的远程控制变得越来越重要。本文介绍了一个构建智能设备控制面板的项目，允许用户通过 Web 应用来控制多个 ESP32 设备。用户可以通过该面板查看设备列表，实时了解设备状态，并对设备进行操作（例如开关、调节亮度等）。

二、系统架构

为了满足项目需求，我们设计了一套系统架构，包括前端、后端、数据库和通信协议，如下图所示：
用户 前端 后端 数据库 ESP32 设备

1. 单片机和设备

  • 单片机：ESP32

  • 设备：智能灯光、智能插座等

2. 通信协议

  • WebSocket：用于实时通信，保证设备状态的实时更新

  • RESTful API：用于设备的管理操作

3. 技术栈

  • 前端：React、Vue.js 或 Angular（本文选择 React）

  • 后端：Node.js、Flask 或 Django（本文选择 Node.js）

  • 数据库：MongoDB 或 Firebase（本文选择 MongoDB）

三、环境搭建

1. 前端环境

安装 React 开发环境：

bash 复制代码 
npx create-react-app smart-device-control-panel
cd smart-device-control-panel
npm start

2. 后端环境

安装 Node.js 和 Express：

bash 复制代码 
mkdir backend
cd backend
npm init -y
npm install express mongoose body-parser ws

3. 数据库环境

安装 MongoDB：

bash 复制代码 
# 对于 macOS 用户
brew tap mongodb/brew
brew install mongodb-community@5.0

# 启动 MongoDB
brew services start mongodb/brew/mongodb-community

四、代码实现

1. 前端代码

在 src 目录下创建组件和服务，主要包括设备列表管理、设备控制和实时状态更新。

设备列表组件

DeviceList 组件用于显示所有设备的列表。

js 复制代码 
// src/components/DeviceList.js
import React from 'react';

function DeviceList({ devices }) {
  return (
    <div>
      <h2>设备列表</h2>
      <ul>
        {devices.map((device) => (
          <li key={device.id}>
            {device.name} - {device.status}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default DeviceList;
设备控制组件

DeviceControl 组件用于控制设备的状态。

js 复制代码 
// 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 (
    <div>
      <h2>设备控制</h2>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="deviceId">设备 ID:</label>
          <input
            type="text"
            id="deviceId"
            value={deviceId}
            onChange={(e) => setDeviceId(e.target.value)}
          />
        </div>
        <div>
          <label htmlFor="command">指令:</label>
          <input
            type="text"
            id="command"
            value={command}
            onChange={(e) => setCommand(e.target.value)}
          />
        </div>
        <button type="submit">发送</button>
      </form>
    </div>
  );
}

export default DeviceControl;
服务模块

deviceService 模块用于与后端进行通信。

js 复制代码 
// 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 组件是主应用组件，负责管理设备列表和控制操作。

js 复制代码 
// 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 className="App">
      <DeviceList devices={devices} />
      <DeviceControl onControl={handleControl} />
    </div>
  );
}

export default App;

2. 后端代码

在 backend 目录下创建服务器和路由，处理设备管理和控制请求。

设备模型

Device 模型定义设备的结构。

js 复制代码 
// 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 实现实时状态更新。

js 复制代码 
// 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 运行');
});

代码说明

前端代码说明
  1. DeviceList 组件 (DeviceList.js)

  • 用于显示设备列表。

  • 从 props 获取设备数据，并生成设备列表的 HTML 元素。

  1. DeviceControl 组件 (DeviceControl.js)

  • 用于控制设备。

  • 包含设备 ID 和控制指令的输入框，并在表单提交时调用 onControl 函数。

  1. deviceService 模块 (deviceService.js)

  • getDevices 函数：从后端获取设备列表。

  • controlDevice 函数：向后端发送控制设备的指令。

  • subscribeToDeviceUpdates 函数：通过 WebSocket 订阅设备状态更新。

  1. App 组件 (App.js)

  • 主应用组件，管理设备列表和控制操作。

  • 使用 useEffect 钩子在组件挂载时获取设备列表，并订阅设备状态更新。

  • handleControl 函数调用 controlDevice 发送控制指令。

后端代码说明
  1. 设备模型 (Device.js)
  • 定义设备的 Mongoose 模型，包含 name 和 status 属性。
  1. 服务器和路由 (server.js)

  • 监听客户端连接和消息，更新设备状态并通知所有客户端。

  • GET /devices：获取所有设备。

  • POST /control/:id：控制指定 ID 的设备，并通过 WebSocket 通知所有客户端。

  • 使用 Express 创建服务器，并连接到 MongoDB 数据库。

五、项目总结

在本项目中，我们构建了一个智能设备控制面板，用户可以通过 Web 应用控制多个 ESP32 设备。项目使用 React 构建前端，用 Node.js 和 Express 搭建后端，使用 MongoDB 存储设备数据，并通过 WebSocket 实现设备状态的实时更新。项目架构清晰，功能完备，为用户提供了良好的体验。

相关推荐
汪子熙6 分钟前
深入探析 header facets：定位与应用
前端·javascript
你听得到117 分钟前
从需求到封装：手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
前端双越老师11 分钟前
30 行代码 langChain.js 开发你的第一个 Agent
人工智能·node.js·agent
江城开朗的豌豆11 分钟前
Vue Router vs location.href：导航跳转的正确姿势，你选对了吗？
前端·javascript·vue.js
小磊哥er16 分钟前
【前端工程化】如何制定前端项目中的页面模版？
前端
Liudef0619 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444021 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆22 分钟前
玩转Vue Router：这些实用组件让你的SPA如虎添翼！
前端·javascript·vue.js
前端小巷子25 分钟前
Web开发中的文件下载
前端·javascript·面试
peakmain932 分钟前
Gradle 8.11.1的升级之旅
前端
热门推荐
01Java学习第十五部分——MyBatis02集群聊天服务器---MySQL数据库的建立03Coze扣子平台完整体验和实践（附国内和国际版对比）04基于odoo17的设计模式详解---装饰模式05使用Ruby接入实时行情API教程06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07Everything文件检索工具 几秒检索几百G的文件08基于odoo17的设计模式详解---单例模式09DeepSeek各版本说明与优缺点分析10身弱武修法：玄之又玄，奇妙之门