从DHT11到MQTT：手把手教你用ESP8266搭建一个低成本温湿度监测网页（附完整Arduino代码）

万俟灵儿

从DHT11到MQTT：手把手教你用ESP8266搭建一个低成本温湿度监测网页（附完整Arduino代码）

去年夏天，我在自家地下室发现墙面出现了霉斑，这才意识到温湿度监测的重要性。作为一名物联网爱好者，我决定用最经济的方案搭建一个实时监测系统。经过多次迭代，最终形成了这套基于DHT11传感器和ESP8266的完整解决方案，成本不到50元，却能实现专业级的远程监测功能。

1. 硬件选型与连接

1.1 为什么选择DHT11

在众多温湿度传感器中，DHT11以极高的性价比脱颖而出：

价格优势：单价仅10元左右，是同类产品的1/3
集成度高：同时测量温度和湿度，减少硬件复杂度
数字输出：内置模数转换，避免模拟信号干扰
校准存储：出厂校准数据存储在OTP内存中

注意：DHT11的测量范围有限（湿度20-90%RH，温度0-50℃），精度为±5%RH和±2℃。如需更高精度，可考虑DHT22或SHT30。

1.2 ESP8266开发板选择

NodeMCU是最适合初学者的选择：

型号	价格	Flash	内置USB	引脚兼容性
NodeMCU V3	25元	4MB	有	优秀
Wemos D1 Mini	18元	4MB	需转接板	良好
ESP-01S	12元	1MB	无	较差

推荐使用NodeMCU V3，其GPIO布局与Arduino兼容，开发最便捷。

1.3 硬件连接示意图

cpp复制/*
 * DHT11与NodeMCU连接方式：
 * DHT11 VCC -> NodeMCU 3.3V
 * DHT11 GND -> NodeMCU GND  
 * DHT11 DATA -> NodeMCU D4 (GPIO2)
 * 建议在DATA与VCC间加4.7K上拉电阻
 */

实际接线时，我强烈建议使用面包板先进行测试。曾有一次我直接焊接导致接触不良，花了2小时才排查出问题。

2. 开发环境配置

2.1 Arduino IDE设置

要让Arduino支持ESP8266，需要添加开发板支持：

文件 > 首选项 > 附加开发板管理器网址填入：
http://arduino.esp8266.com/stable/package_esp8266com_index.json
工具 > 开发板 > 开发板管理器，搜索安装"esp8266"
选择NodeMCU 1.0开发板

2.2 必备库安装

这三个库缺一不可：

DHT sensor library：传感器驱动
PubSubClient：MQTT通信
ESP8266WiFi：WiFi连接

在Arduino中点击"项目 > 加载库 > 管理库"，搜索安装即可。

3. 核心代码实现

3.1 传感器数据读取

优化后的DHT11读取代码增加了错误处理和重试机制：

cpp复制#include <DHT.h>
#define DHTPIN D4     // 数据引脚
#define DHTTYPE DHT11 // 传感器类型

DHT dht(DHTPIN, DHTTYPE);

void readSensor() {
  float h = dht.readHumidity();
  float t = dht.readTemperature();
  
  if (isnan(h) || isnan(t)) {
    Serial.println("读取失败，正在重试...");
    delay(2000);
    return;
  }
  
  Serial.print("湿度: "); 
  Serial.print(h);
  Serial.print("% 温度: "); 
  Serial.print(t);
  Serial.println("℃");
}

3.2 WiFi与MQTT配置

使用SmartConfig简化WiFi配置：

cpp复制#include <ESP8266WiFi.h>
#include <PubSubClient.h>

const char* mqtt_server = "broker.emqx.io";

WiFiClient espClient;
PubSubClient client(espClient);

void setup_wifi() {
  WiFi.mode(WIFI_STA);
  WiFi.beginSmartConfig();
  
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  
  Serial.println("");
  Serial.println("WiFi连接成功");
  Serial.println("IP地址: ");
  Serial.println(WiFi.localIP());
}

void reconnect() {
  while (!client.connected()) {
    String clientId = "ESP8266Client-" + String(random(0xffff), HEX);
    if (client.connect(clientId.c_str())) {
      client.publish("home/sensor/status", "online");
    } else {
      delay(5000);
    }
  }
}

3.3 数据上传逻辑

采用JSON格式传输数据，便于网页端解析：

cpp复制void publishData(float h, float t) {
  StaticJsonDocument<200> doc;
  doc["humidity"] = h;
  doc["temperature"] = t;
  doc["device"] = "bedroom";
  
  char jsonBuffer[512];
  serializeJson(doc, jsonBuffer);
  
  client.publish("home/sensor/data", jsonBuffer);
}

4. 网页可视化实现

4.1 前端基础架构

使用HTML+CSS+JS三件套搭建：

html复制<!DOCTYPE html>
<html>
<head>
  <title>温湿度监测</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
  <style>
    #chart { width: 100%; height: 400px; }
    .container { max-width: 800px; margin: 0 auto; }
  </style>
</head>
<body>
  <div class="container">
    <h1>卧室环境监测</h1>
    <div id="chart"></div>
    <div id="current">正在连接...</div>
  </div>
</body>
</html>

4.2 ECharts实时图表

配置双Y轴折线图展示数据：

javascript复制var chart = echarts.init(document.getElementById('chart'));
var option = {
  tooltip: { trigger: 'axis' },
  legend: { data: ['温度', '湿度'] },
  xAxis: { type: 'category', data: [] },
  yAxis: [
    { name: '温度(℃)', type: 'value' },
    { name: '湿度(%)', type: 'value' }
  ],
  series: [
    { name: '温度', type: 'line', data: [] },
    { name: '湿度', type: 'line', yAxisIndex: 1, data: [] }
  ]
};

4.3 MQTT数据订阅

使用MQTT.js实现实时数据更新：

javascript复制var client = mqtt.connect('wss://broker.emqx.io:8084/mqtt')

client.on('connect', function() {
  client.subscribe('home/sensor/data')
})

client.on('message', function(topic, payload) {
  var data = JSON.parse(payload.toString())
  updateChart(data.temperature, data.humidity)
})

function updateChart(temp, humi) {
  var now = new Date().toLocaleTimeString()
  option.xAxis.data.push(now)
  option.series[0].data.push(temp)
  option.series[1].data.push(humi)
  
  // 保持最近20条数据
  if (option.xAxis.data.length > 20) {
    option.xAxis.data.shift()
    option.series[0].data.shift()
    option.series[1].data.shift()
  }
  
  chart.setOption(option)
  document.getElementById('current').innerHTML = 
    `当前温度: ${temp}℃ | 当前湿度: ${humi}%`
}

5. 系统优化与部署

5.1 低功耗改进

通过深度睡眠降低能耗：

cpp复制#define uS_TO_S_FACTOR 1000000
#define TIME_TO_SLEEP 300 // 5分钟

void setup() {
  esp_sleep_enable_timer_wakeup(TIME_TO_SLEEP * uS_TO_S_FACTOR);
}

void loop() {
  // 采集和发送数据后
  esp_deep_sleep_start();
}

5.2 数据持久化方案

三种可选的数据存储方式对比：

方案	实现难度	成本	查询便利性	适用场景
本地SD卡	中等	低	差	无网络环境
MySQL数据库	高	中	优	自有服务器
InfluxDB	中	免费	优	时序数据专业分析

5.3 异常处理机制

完善的错误恢复策略：

WiFi断开时自动重连
MQTT消息确认机制
传感器数据校验
看门狗定时器防死机

cpp复制void setup() {
  ESP.wdtEnable(8000); // 8秒看门狗
}

void loop() {
  ESP.wdtFeed();
  // 业务逻辑...
}

6. 扩展应用场景

这套系统经过简单修改即可应用于：

智能农业：大棚环境监控
仓储管理：药品仓库温湿度监测
智能家居：联动空调/加湿器
实验室：精密仪器环境记录

我曾帮朋友将其改造为鱼缸监测系统，增加了pH值传感器，通过企业微信接收报警通知。关键在于理解MQTT的发布/订阅机制，任何传感器数据都能用相同模式传输。

已经到底了哦

精选内容

1 别再被版本坑了！手把手教你用VS2019和UE4.24在Win10上搞定AirSim 1.3.1编译 2 从RAID0到RAID50：一张图看懂磁盘阵列的选型逻辑 3 从电商AB测试到药物疗效评估：如何用do-calculus的‘后门准则’搞定混杂变量？4 从入门到精通：MS COCO数据集在目标检测实战中的核心应用与避坑指南 5 SAP BOM实战：别再傻傻分不清标准、销售、订单BOM，5分钟搞懂区别与使用场景 6 如何优化DeepSeek训练数据的存储与处理？高效压缩与分布式分片技巧 7 从‘靠谱分’到‘专家会诊’：图解GAT注意力机制与多头协作的实战演进 8 从ProcessBuilder源码看Java进程通信：为什么你的Shell命令总是卡住？9 【特征工程实战】从诊断到优化：共线性处理、降维策略与特征构建 10 如何在Adobe Premiere Pro中高效处理WebM格式视频

从DHT11到MQTT：手把手教你用ESP8266搭建一个低成本温湿度监测网页（附完整Arduino代码）

从DHT11到MQTT：手把手教你用ESP8266搭建一个低成本温湿度监测网页（附完整Arduino代码）

1. 硬件选型与连接

1.1 为什么选择DHT11

1.2 ESP8266开发板选择

1.3 硬件连接示意图

2. 开发环境配置

2.1 Arduino IDE设置

2.2 必备库安装

3. 核心代码实现

3.1 传感器数据读取

3.2 WiFi与MQTT配置

3.3 数据上传逻辑

4. 网页可视化实现

4.1 前端基础架构

4.2 ECharts实时图表

4.3 MQTT数据订阅

5. 系统优化与部署

5.1 低功耗改进

5.2 数据持久化方案

5.3 异常处理机制

6. 扩展应用场景

内容推荐