打造智能家居：用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 实现设备状态的实时更新。项目架构清晰，功能完备，为用户提供了良好的体验。

相关推荐
zwjapple4 小时前
docker-compose一键部署全栈项目。springboot后端，react前端
前端·spring boot·docker
诗句藏于尽头5 小时前
完成ssl不安全警告
网络协议·安全·ssl
竹照煜_ysn5 小时前
蓝桥杯51单片机设计
单片机·嵌入式硬件·51单片机
Electron-er6 小时前
汽车LIN总线通讯：从物理层到协议栈的深度解析
单片机·汽车电子·lin总线·lin总线通讯
像风一样自由20206 小时前
HTML与JavaScript：构建动态交互式Web页面的基石
前端·javascript·html
Do vis8247 小时前
STM32第十六天蓝牙模块
stm32·单片机·嵌入式硬件
学不动CV了7 小时前
ARM单片机启动流程（二）(详细解析)
c语言·arm开发·stm32·单片机·51单片机
伍哥的传说7 小时前
React 各颜色转换方法、颜色值换算工具HEX、RGB/RGBA、HSL/HSLA、HSV、CMYK
深度学习·神经网络·react.js
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊7 小时前
React Hooks全面解析：从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
热门推荐
01Java学习第十五部分——MyBatis02集群聊天服务器---MySQL数据库的建立03Coze扣子平台完整体验和实践（附国内和国际版对比）04基于odoo17的设计模式详解---装饰模式05使用Ruby接入实时行情API教程06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07Everything文件检索工具 几秒检索几百G的文件08基于odoo17的设计模式详解---单例模式09DeepSeek各版本说明与优缺点分析10【无标题】