基于ESP32的掌上网关智能家居控制设备：集成MQTT、后端Node.js、MongoDB、React（代码示例）

一、项目概述

本项目旨在设计并实现一个基于ESP32的掌上网关智能家居控制设备。该设备可以作为智能家居系统的核心控制单元,实现对家庭中各种智能设备的集中管理和控制。用户可以通过手机APP或Web界面远程操控家中的智能灯、空调、窗帘等设备,还可以设置自动化场景和定时任务,打造一个智能、便捷、舒适的家居环境。

二、系统架构

基于项目需求,我们设计了如下系统架构:

主要组件说明:

核心控制器:ESP32单片机,集成WiFi和蓝牙功能
通信协议:WiFi、蓝牙、ZigBee用于与各种智能设备通信
消息队列:MQTT协议用于设备与服务器之间的通信
后端服务:Node.js实现业务逻辑和数据处理
数据库:MongoDB存储设备信息和用户数据
前端界面:React Native开发跨平台手机APP,React开发Web管理界面

三、环境搭建

ESP32开发环境:

安装Arduino IDE
添加ESP32开发板支持
安装必要的库文件(WiFi、BLE、ZigBee等)

MQTT服务器:

安装Mosquitto MQTT Broker

sudo apt-get install mosquitto mosquitto-clients

Node.js后端环境:

npm init
npm install express mongoose mqtt

安装Node.js和npm
创建项目并安装依赖

MongoDB数据库:

安装MongoDB
创建数据库和集合

前端开发环境:

安装React Native CLI
安装React开发工具

四、代码实现

4.1 ESP32固件

#include <WiFi.h>
#include <PubSubClient.h>
#include <ArduinoJson.h>const char* ssid = "YourWiFiSSID";
const char* password = "YourWiFiPassword";
const char* mqtt_server = "YourMQTTServerIP";WiFiClient espClient;
PubSubClient client(espClient);void setup_wifi() {delay(10);Serial.println("Connecting to WiFi..");WiFi.begin(ssid, password);while (WiFi.status() != WL_CONNECTED) {delay(500);Serial.print(".");}Serial.println("WiFi connected");
}void callback(char* topic, byte* payload, unsigned int length) {StaticJsonDocument<200> doc;deserializeJson(doc, payload, length);String device = doc["device"];String action = doc["action"];if (device == "light") {if (action == "on") {digitalWrite(LED_PIN, HIGH);} else if (action == "off") {digitalWrite(LED_PIN, LOW);}}// 处理其他设备...
}void reconnect() {while (!client.connected()) {Serial.print("Attempting MQTT connection...");if (client.connect("ESP32Client")) {Serial.println("connected");client.subscribe("home/devices/#");} else {Serial.print("failed, rc=");Serial.print(client.state());Serial.println(" try again in 5 seconds");delay(5000);}}
}void setup() {Serial.begin(115200);setup_wifi();client.setServer(mqtt_server, 1883);client.setCallback(callback);
}void loop() {if (!client.connected()) {reconnect();}client.loop();float temperature = readTemperature();float humidity = readHumidity();StaticJsonDocument<200> doc;doc["temperature"] = temperature;doc["humidity"] = humidity;char buffer[256];serializeJson(doc, buffer);client.publish("home/sensors", buffer);delay(5000);
}

代码说明：

首先引入必要的库：WiFi、PubSubClient（MQTT客户端）和ArduinoJson。
定义WiFi和MQTT服务器的连接信息。
setup_wifi()函数用于连接WiFi网络。
callback()函数处理接收到的MQTT消息，解析JSON数据并执行相应的操作。
reconnect()函数用于重新连接MQTT服务器。
setup()函数初始化串口、WiFi连接和MQTT客户端。
loop()函数中持续检查MQTT连接，读取传感器数据并发布到MQTT主题。

4.2 Node.js后端服务

const express = require('express');
const mongoose = require('mongoose');
const mqtt = require('mqtt');const app = express();
const port = 3000;mongoose.connect('mongodb://localhost/smart_home', { useNewUrlParser: true, useUnifiedTopology: true });const Device = mongoose.model('Device', {name: String,type: String,status: String
});const client = mqtt.connect('mqtt://localhost');client.on('connect', () => {console.log('Connected to MQTT server');client.subscribe('home/sensors');
});client.on('message', (topic, message) => {console.log(`Received message on topic ${topic}: ${message.toString()}`);if (topic.startsWith('home/devices/')) {const deviceName = topic.split('/')[2];const status = JSON.parse(message.toString()).status;updateDeviceStatus(deviceName, status);} else if (topic === 'home/sensors') {const data = JSON.parse(message.toString());saveSensorData(data);}
});async function updateDeviceStatus(name, status) {try {await Device.findOneAndUpdate({ name }, { status }, { upsert: true });console.log(`Updated status for device ${name}`);} catch (error) {console.error('Error updating device status:', error);}
}function saveSensorData(data) {// 实现数据保存逻辑，例如存入数据库console.log('Sensor data received:', data);
}app.use(express.json());app.get('/devices', async (req, res) => {try {const devices = await Device.find();res.json(devices);} catch (error) {res.status(500).json({ error: 'Error fetching devices' });}
});app.post('/control', (req, res) => {const { device, action } = req.body;const message = JSON.stringify({ device, action });client.publish(`home/devices/${device}`, message);res.json({ success: true, message: 'Command sent' });
});app.listen(port, () => {console.log(`Server running on port ${port}`);
});

代码说明：

使用Express框架创建Web服务器。
通过Mongoose连接MongoDB数据库，并定义Device模型。
连接MQTT服务器并订阅相关主题。
实现MQTT消息处理逻辑，包括更新设备状态和保存传感器数据。
定义API路由：

GET /devices：获取所有设备信息
POST /control：发送控制命令到指定设备

启动服务器监听指定端口。

4.3 React Native移动应用

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native';
import axios from 'axios';const API_URL = 'http://your-backend-url:3000';const App = () => {const [devices, setDevices] = useState([]);useEffect(() => {fetchDevices();}, []);const fetchDevices = async () => {try {const response = await axios.get(`${API_URL}/devices`);setDevices(response.data);} catch (error) {console.error('Error fetching devices:', error);}};const controlDevice = async (device, action) => {try {await axios.post(`${API_URL}/control`, { device, action });fetchDevices(); // 刷新设备列表} catch (error) {console.error('Error controlling device:', error);}};const renderDevice = ({ item }) => (<View style={styles.deviceItem}><Text>{item.name} - {item.status}</Text><View style={styles.buttonContainer}><TouchableOpacitystyle={styles.button}onPress={() => controlDevice(item.name, 'on')}><Text>开启</Text></TouchableOpacity><TouchableOpacitystyle={styles.button}onPress={() => controlDevice(item.name, 'off')}><Text>关闭</Text></TouchableOpacity></View></View>);return (<View style={styles.container}><Text style={styles.title}>智能家居控制</Text><FlatListdata={devices}renderItem={renderDevice}keyExtractor={item => item.name}refreshing={false}onRefresh={fetchDevices}/></View>);
};const styles = StyleSheet.create({container: {flex: 1,padding: 20,backgroundColor: '#f5f5f5',},title: {fontSize: 24,fontWeight: 'bold',marginBottom: 20,textAlign: 'center',},deviceItem: {backgroundColor: 'white',padding: 15,borderRadius: 10,marginBottom: 10,elevation: 3,},buttonContainer: {flexDirection: 'row',justifyContent: 'space-around',marginTop: 10,},button: {backgroundColor: '#007AFF',padding: 10,borderRadius: 5,width: 80,alignItems: 'center',},
});export default App;

代码说明：

使用React Hooks（useState和useEffect）管理组件状态和副作用。
fetchDevices函数从后端API获取设备列表。
controlDevice函数发送控制命令到后端。
renderDevice函数渲染每个设备项，包括设备名称、状态和控制按钮。
使用FlatList组件高效渲染设备列表，支持下拉刷新功能。
使用StyleSheet创建样式，使界面美观易用。

4.4 React Web管理界面

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './App.css';const API_URL = 'http://your-backend-url:3000';function App() {const [devices, setDevices] = useState([]);const [sensorData, setSensorData] = useState(null);useEffect(() => {fetchDevices();fetchSensorData();const interval = setInterval(fetchSensorData, 5000);return () => clearInterval(interval);}, []);const fetchDevices = async () => {try {const response = await axios.get(`${API_URL}/devices`);setDevices(response.data);} catch (error) {console.error('Error fetching devices:', error);}};const fetchSensorData = async () => {try {const response = await axios.get(`${API_URL}/sensors`);setSensorData(response.data);} catch (error) {console.error('Error fetching sensor data:', error);}};const controlDevice = async (device, action) => {try {await axios.post(`${API_URL}/control`, { device, action });fetchDevices();} catch (error) {console.error('Error controlling device:', error);}};return (<div className="App"><h1>智能家居管理系统</h1><div className="device-list"><h2>设备列表</h2>{devices.map(device => (<div key={device.name} className="device-item"><span>{device.name} - {device.status}</span><div className="device-controls"><button onClick={() => controlDevice(device.name, 'on')}>开启</button><button onClick={() => controlDevice(device.name, 'off')}>关闭</button></div></div>))}</div>{sensorData && (<div className="sensor-data"><h2>传感器数据</h2><p>温度: {sensorData.temperature}°C</p><p>湿度: {sensorData.humidity}%</p></div>)}</div>);
}export default App;

CSS样式（App.css）:

.App {max-width: 800px;margin: 0 auto;padding: 20px;font-family: Arial, sans-serif;
}h1, h2 {text-align: center;
}.device-list {margin-bottom: 30px;
}.device-item {display: flex;justify-content: space-between;align-items: center;background-color: #f0f0f0;padding: 10px;margin-bottom: 10px;border-radius: 5px;
}.device-controls button {margin-left: 10px;padding: 5px 10px;background-color: #007bff;color: white;border: none;border-radius: 3px;cursor: pointer;
}.sensor-data {background-color: #e9ecef;padding: 15px;border-radius: 5px;
}