# esp8266dht11

**Repository Path**: imzack/esp8266dht11

## Basic Information

- **Project Name**: esp8266dht11
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-04
- **Last Updated**: 2025-06-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# DHT11 IoT 全栈数据监控系统

![License](https://img.shields.io/badge/license-MIT-blue.svg)
![Node.js](https://img.shields.io/badge/node.js-16%2B-green.svg)
![React](https://img.shields.io/badge/react-18-blue.svg)
![TypeScript](https://img.shields.io/badge/typescript-5-blue.svg)

一个基于 Node.js + TypeScript + React + Ant Design 的现代化物联网数据收集和可视化系统，专为 ESP8266 DHT11 温湿度传感器设计。

## 🚀 快速启动

```bash
# 1. 安装依赖
npm run install:all

# 2. 启动 MQTT 服务器（一键启动）
npm run start:mqtt
```

启动后访问：
- **MQTT 服务器**: `mqtt://localhost:1883`
- **HTTP API**: `http://localhost:3000`

## ✨ 特性亮点

- 🌡️ **实时监控** - 温湿度数据实时收集和展示
- 📊 **数据可视化** - 交互式图表和统计面板
- 🔄 **自动刷新** - 数据自动更新，无需手动刷新
- 📱 **响应式设计** - 支持桌面和移动设备
- 🛡️ **类型安全** - 全栈 TypeScript 支持
- 🚀 **现代化架构** - 基于最新的前后端技术栈

## 项目结构

```
server/
├── backend/                 # 后端 API 服务
│   ├── src/                # TypeScript 源码
│   │   ├── controllers/    # 控制器
│   │   ├── routes/         # 路由
│   │   ├── services/       # 服务层
│   │   ├── types/          # 类型定义
│   │   └── index.ts        # 入口文件
│   ├── data/               # 数据存储目录
│   ├── dist/               # 编译输出
│   ├── package.json        # 后端依赖
│   └── tsconfig.json       # TS配置
├── frontend/               # 前端 React 应用
│   ├── src/                # React 源码
│   │   ├── components/     # React 组件
│   │   ├── services/       # API 服务
│   │   ├── types/          # 类型定义
│   │   ├── utils/          # 工具函数
│   │   ├── App.tsx         # 主应用组件
│   │   └── main.tsx        # 入口文件
│   ├── public/             # 静态资源
│   ├── dist/               # 构建输出
│   ├── package.json        # 前端依赖
│   ├── vite.config.ts      # Vite 配置
│   └── tsconfig.json       # TS配置
├── package.json            # 根项目配置（工作区）
└── README.md               # 项目说明
```

## 技术栈

### 后端
- **Node.js** + **TypeScript** - 运行时和开发语言
- **Express.js** - Web 框架
- **Helmet** - 安全中间件
- **CORS** - 跨域支持
- **Morgan** - 请求日志

### 前端
- **React 18** - UI 框架
- **TypeScript** - 开发语言
- **Ant Design** - UI 组件库
- **Recharts** - 图表库
- **Axios** - HTTP 客户端
- **Day.js** - 日期处理
- **Vite** - 构建工具

## 🚀 快速开始

### 环境要求

- **Node.js** >= 16.0.0
- **npm** >= 8.0.0
- **操作系统**: Windows / macOS / Linux

### 1. 克隆项目

```bash
git clone <repository-url>
cd dht11server/server
```

### 2. 安装依赖

```bash
# 安装所有依赖（根目录、后端、前端）
npm run install:all

# 或者手动安装
npm install
cd backend && npm install
cd ../frontend && npm install
```

### 3. 启动服务器

#### 🚀 一键启动 MQTT 服务器（推荐）

```bash
# 启动 MQTT 服务器（包含 HTTP API 和 MQTT 功能）
npm run start:mqtt
```

服务器启动后：
- **MQTT 服务器**: `mqtt://localhost:1883` 或 `mqtt://0.0.0.0:1883`
- **HTTP API**: `http://localhost:3000`
- **前端界面**: 需要单独启动前端服务

#### 其他启动方式

```bash
# 同时启动后端和前端开发服务器
npm run dev

# 或者分别启动
npm run dev:backend   # 后端 MQTT 服务器: http://localhost:3000
npm run dev:frontend  # 前端: http://localhost:3001
npm run dev:http      # 仅启动 HTTP API 服务器（不含 MQTT）
```

### 4. 生产构建

```bash
# 构建后端和前端
npm run build

# 启动生产 MQTT 服务器
npm start
```

### 5. 访问应用

- **前端界面**: http://localhost:3001
- **后端API**: http://localhost:3000
- **MQTT服务器**: mqtt://localhost:1883 或 mqtt://0.0.0.0:1883
- **API文档**: http://localhost:3000 (根路径显示可用接口)

## 📡 API 接口

### 后端 API (http://localhost:3000)

| 方法 | 路径 | 描述 | 参数 |
|------|------|------|------|
| GET | `/` | 服务器信息和API列表 | - |
| POST | `/api/sensor/data` | 接收传感器数据 | JSON Body |
| GET | `/api/sensor/devices` | 获取所有设备列表 | - |
| GET | `/api/sensor/devices/:deviceId` | 获取特定设备数据 | `date` (可选) |
| GET | `/api/sensor/health` | 系统健康检查 | - |

#### 接口详细说明

**POST /api/sensor/data** - 接收传感器数据
```json
{
  "deviceId": "ESP8266_001",
  "temperature": 25.6,
  "humidity": 60.2,
  "rssi": -65,
  "status": "normal"
}
```

**GET /api/sensor/devices/:deviceId** - 获取设备数据
```bash
# 获取所有数据
GET /api/sensor/devices/ESP8266_001

# 获取特定日期数据
GET /api/sensor/devices/ESP8266_001?date=2025-06-03
```

### 🖥️ 前端应用 (http://localhost:3001)

- **📊 实时监控面板** - 显示当前温湿度状态
- **🔍 设备管理** - 多设备选择和切换
- **⏰ 时间过滤** - 支持1小时、6小时、24小时等时间范围
- **📈 趋势图表** - 基于 Recharts 的交互式图表
- **📋 数据表格** - 历史数据查看，支持排序和分页
- **🔄 自动刷新** - 可配置的数据自动更新

## 🔌 ESP8266 客户端集成

### 硬件要求

- **ESP8266** 开发板 (NodeMCU、Wemos D1 Mini 等)
- **DHT11** 温湿度传感器
- **连接线** 若干

### 接线图

```
ESP8266    DHT11
  3V3  ->  VCC
  GND  ->  GND
  D4   ->  DATA (GPIO2)
```

### Arduino 库依赖

在 Arduino IDE 中安装以下库：

```
- ESP8266WiFi (ESP8266 核心库)
- ESP8266HTTPClient (ESP8266 核心库)
- ArduinoJson (by Benoit Blanchon)
- DHT sensor library (by Adafruit)
- Adafruit Unified Sensor (依赖库)
```

### 完整代码示例

```cpp
#include <ESP8266WiFi.h>
#include <ESP8266HTTPClient.h>
#include <ArduinoJson.h>
#include <DHT.h>

// 硬件配置
#define DHT_PIN 2        // DHT11 数据引脚 (GPIO2/D4)
#define DHT_TYPE DHT11   // 传感器类型
#define LED_PIN 2        // 内置LED (可选)

// 网络配置
const char* ssid = "your_wifi_ssid";           // 替换为你的WiFi名称
const char* password = "your_wifi_password";   // 替换为你的WiFi密码
const char* serverURL = "http://192.168.1.100:3000/api/sensor/data"; // 替换为服务器IP

// 设备配置
const char* deviceId = "ESP8266_001";  // 设备唯一标识
const unsigned long sendInterval = 30000; // 发送间隔 (毫秒)

DHT dht(DHT_PIN, DHT_TYPE);
WiFiClient wifiClient;
unsigned long lastSendTime = 0;

void setup() {
  Serial.begin(115200);
  Serial.println("\n=== DHT11 IoT 传感器启动 ===");
  
  // 初始化DHT传感器
  dht.begin();
  
  // 连接WiFi
  connectToWiFi();
  
  Serial.println("系统初始化完成!");
}

void loop() {
  // 检查WiFi连接
  if (WiFi.status() != WL_CONNECTED) {
    Serial.println("WiFi连接断开，尝试重连...");
    connectToWiFi();
  }
  
  // 定时发送数据
  if (millis() - lastSendTime >= sendInterval) {
    sendSensorData();
    lastSendTime = millis();
  }
  
  delay(1000); // 主循环延时
}

void connectToWiFi() {
  WiFi.begin(ssid, password);
  Serial.print("连接WiFi");
  
  int attempts = 0;
  while (WiFi.status() != WL_CONNECTED && attempts < 20) {
    delay(500);
    Serial.print(".");
    attempts++;
  }
  
  if (WiFi.status() == WL_CONNECTED) {
    Serial.println();
    Serial.println("WiFi连接成功!");
    Serial.print("IP地址: ");
    Serial.println(WiFi.localIP());
    Serial.print("信号强度: ");
    Serial.print(WiFi.RSSI());
    Serial.println(" dBm");
  } else {
    Serial.println();
    Serial.println("WiFi连接失败!");
  }
}

void sendSensorData() {
  // 读取传感器数据
  float temperature = dht.readTemperature();
  float humidity = dht.readHumidity();
  
  // 检查数据有效性
  if (isnan(temperature) || isnan(humidity)) {
    Serial.println("传感器读取失败!");
    return;
  }
  
  // 创建JSON数据
  StaticJsonDocument<200> doc;
  doc["deviceId"] = deviceId;
  doc["temperature"] = round(temperature * 10) / 10.0; // 保留1位小数
  doc["humidity"] = round(humidity * 10) / 10.0;
  doc["rssi"] = WiFi.RSSI();
  doc["status"] = "normal";
  
  String jsonString;
  serializeJson(doc, jsonString);
  
  // 发送HTTP请求
  HTTPClient http;
  http.begin(wifiClient, serverURL);
  http.addHeader("Content-Type", "application/json");
  http.setTimeout(5000); // 5秒超时
  
  int httpResponseCode = http.POST(jsonString);
  
  // 处理响应
  if (httpResponseCode > 0) {
    String response = http.getString();
    Serial.printf("[%lu] 数据发送成功 - 温度: %.1f°C, 湿度: %.1f%%, 响应: %d\n", 
                  millis()/1000, temperature, humidity, httpResponseCode);
  } else {
    Serial.printf("[%lu] 数据发送失败 - 错误代码: %d\n", 
                  millis()/1000, httpResponseCode);
  }
  
  http.end();
}
```

### 配置说明

1. **修改网络配置**：
   ```cpp
   const char* ssid = "你的WiFi名称";
   const char* password = "你的WiFi密码";
   const char* serverURL = "http://服务器IP:3000/api/sensor/data";
   ```

2. **设备标识**：
   ```cpp
   const char* deviceId = "ESP8266_001";  // 每个设备使用不同的ID
   ```

3. **发送频率**：
   ```cpp
   const unsigned long sendInterval = 30000; // 30秒发送一次
   ```

## 数据格式

### 传感器数据
```json
{
  "deviceId": "ESP8266_001",
  "temperature": 25.6,
  "humidity": 60.2,
  "rssi": -65,
  "status": "normal",
  "timestamp": "2025-06-03T10:30:00.000Z"
}
```

## 🎯 功能特性

### 🔧 后端功能

- **🌐 RESTful API** - 标准化的API接口设计
- **🛡️ 数据验证** - 完整的输入验证和错误处理
- **💾 智能存储** - 按设备ID和日期自动组织数据
- **📁 自动管理** - 数据目录自动创建和维护
- **📝 请求日志** - 详细的API访问日志记录
- **🔒 安全防护** - Helmet安全中间件保护
- **🌍 跨域支持** - CORS配置支持前后端分离
- **⚡ 高性能** - 基于Express.js的高效处理
- **🔍 健康检查** - 系统状态监控接口

### 🎨 前端功能

- **💻 现代化界面** - 基于Ant Design的美观UI
- **📊 实时监控** - 温湿度数据实时更新显示
- **📈 图表可视化** - Recharts交互式趋势图表
- **🔄 设备管理** - 多设备选择和快速切换
- **⏰ 时间过滤** - 灵活的时间范围筛选
- **📋 统计面板** - 数据统计卡片展示
- **📱 响应式设计** - 完美适配各种屏幕尺寸
- **🔄 自动刷新** - 可配置的数据自动更新
- **⚠️ 错误提示** - 友好的错误信息和状态提示
- **🎯 TypeScript** - 完整的类型安全支持

### 🔌 硬件集成

- **📡 ESP8266支持** - 完整的ESP8266集成方案
- **🌡️ DHT11传感器** - 温湿度数据采集
- **📶 WiFi连接** - 无线数据传输
- **🔋 低功耗** - 优化的数据发送策略
- **🛠️ 易于配置** - 简单的硬件连接和代码配置

## 🛠️ 开发说明

### 📦 工作区配置

项目使用 **npm workspaces** 管理多包依赖：
- 所有依赖安装在根目录的 `node_modules`
- 子项目共享依赖，避免重复安装
- 统一的版本管理和构建流程

### 🔄 代理配置

前端开发服务器配置了 API 代理：
```javascript
// vite.config.ts
proxy: {
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true,
    secure: false
  }
}
```

### 📁 项目脚本

```bash
# 根目录可用脚本
npm run install:all    # 安装所有依赖
npm run dev           # 同时启动前后端
npm run dev:backend   # 仅启动后端
npm run dev:frontend  # 仅启动前端
npm run build         # 构建所有项目
npm start             # 启动生产服务器

# 后端脚本
cd backend
npm run dev           # 开发模式
npm run build         # 构建
npm run start         # 生产模式
npm run watch         # 监听模式

# 前端脚本
cd frontend
npm run dev           # 开发服务器
npm run build         # 构建
npm run preview       # 预览构建结果
npm run lint          # 代码检查
```

### 🚀 部署指南

#### 开发环境部署
1. 克隆项目并安装依赖
2. 配置环境变量（如需要）
3. 运行 `npm run dev` 启动开发服务器

#### 生产环境部署
1. **构建项目**：
   ```bash
   npm run build
   ```

2. **部署方式一：单服务器部署**
   ```bash
   # 启动生产服务器
   npm start
   # 或使用 PM2
   pm2 start backend/dist/index.js --name "dht11-server"
   ```

3. **部署方式二：分离部署**
   - 后端：部署 `backend/dist` 目录
   - 前端：部署 `frontend/dist` 目录到静态服务器

#### Docker 部署（可选）

创建 `Dockerfile`：
```dockerfile
FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY backend/dist ./backend/dist
COPY frontend/dist ./frontend/dist
EXPOSE 3000
CMD ["npm", "start"]
```

### 🔧 开发工具推荐

- **IDE**: VS Code
- **扩展**:
  - TypeScript Importer
  - ES7+ React/Redux/React-Native snippets
  - Prettier - Code formatter
  - ESLint
- **调试**: Chrome DevTools, VS Code Debugger
- **API测试**: Postman, REST Client

### 📊 数据存储

数据按以下规则存储在 `backend/data/` 目录：
- 文件命名：`{deviceId}_{YYYY-MM-DD}.json`
- 示例：`ESP8266_001_2025-06-03.json`
- 每个文件包含当天该设备的所有数据记录

### 🐛 常见问题

**Q: 前端无法连接后端？**
A: 检查后端是否启动，端口是否正确（3000）

**Q: ESP8266 无法发送数据？**
A: 检查WiFi连接、服务器IP地址、防火墙设置

**Q: 图表不显示数据？**
A: 检查设备是否有数据、时间范围是否正确

**Q: 构建失败？**
A: 检查 Node.js 版本（需要 16+）、清除 node_modules 重新安装

## 🤝 贡献指南

1. Fork 项目
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开 Pull Request

## 📄 许可证

本项目基于 MIT 许可证开源 - 查看 [LICENSE](LICENSE) 文件了解详情

## 📞 支持

如果你觉得这个项目有用，请给它一个 ⭐️！

有问题或建议？欢迎提交 [Issue](../../issues) 或 [Pull Request](../../pulls)。