发表更新6 分钟读完 (大约945个字)

ESP8266开发板NodeMcu开发-DHT11温湿度Web服务器

本文介绍使用Arduino IDE开发一个显示温湿度的Web服务器DHT11温湿传感器，供局域网内的任何设备访问。
效果显示
在本教程中，我将展示如何构建异步Web服务器，该服务器自动更新温度和湿度，而无需刷新网页并使用自定义CSS设置网页样式。

## DHT11

DHT11是温湿传感器，产品参数如下：

内容 参数
湿度测量范围 20%~95%测量误差：±5%
温度测量范围 0~50℃测量误差：±2%
解析度 湿度0.1%，温度0.1℃
工作电压 3V~5.5V DC
采样周期 1秒

DHT11温湿传感器

连接DHT11

VCC接3V3，GND连地，DATA接GPIO5（D1）。

接线图

安装DHT库

  1. 打开Arduino IDE，项目 -> 加载库 -> 管理库；
  2. 搜索DHT，找到DHT sensor library by Adafruit并安装；
  3. 搜索Adafruit Unified Sensor，找到Adafruit Unified Sensor by Adafruit并安装；

安装完成后重启Arduino IDE。

安装异步Web服务库

要构建异步Web服务需要安装这两个库：ESPAsyncWebServer和ESPAsync TCP。

安装ESPAsyncWebServer库

  1. 下载安装ESPAsyncWebServer压缩文件；
  2. 解压后得到文件夹ESPAsyncWebServer-master；
  3. 重命名文件夹ESPAsyncWebServer-master为ESPAsyncWebServer；
  4. 复制文件夹到你的Arduino IDE的库文件夹，笔者的Arduino IDE的库文件夹为C:\Users\junle\Documents\Arduino\libraries。

ESPAsync TCP库

  1. 下载安装ESPAsyncWebServer压缩文件；
  2. 解压后得到文件夹ESPAsyncTCP-master；
  3. 重命名文件夹ESPAsyncTCP-master为ESPAsyncTCP；
  4. 复制文件夹到你的Arduino IDE的库文件夹，笔者的Arduino IDE的库文件夹为C:\Users\junle\Documents\Arduino\libraries。
    安装完成后重启Arduino IDE。

代码

打开您的Arduino IDE并复制以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <Hash.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <Adafruit_Sensor.h>
#include <DHT.h>

#define DHTPIN 5     //DHT数据Pin连接GPIO5
#define DHTTYPE    DHT11     //DHT 11

const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

DHT dht(DHTPIN, DHTTYPE);


float temperature = 0.0;
float humidity = 0.0;

AsyncWebServer server(80);


unsigned long previousMillis = 0;    // 记录DHT上次的采样时间


const long interval = 10000;  //每10秒读取一次DHT数据

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <style>
    html {
     font-family: Arial;
     display: inline-block;
     margin: 0px auto;
     text-align: center;
    }
    h2 { font-size: 3.0rem; }
    p { font-size: 3.0rem; }
    .units { font-size: 1.2rem; }
    .dht-labels{
      font-size: 1.5rem;
      vertical-align:middle;
      padding-bottom: 15px;
    }
  </style>
</head>
<body>
  <h2>ESP8266 DHT Server</h2>
  <p>
    <i class="fas fa-thermometer-half" style="color:#059e8a;"></i> 
    <span class="dht-labels">Temperature</span> 
    <span id="temperature">%TEMPERATURE%</span>
    <sup class="units">&deg;C</sup>
  </p>
  <p>
    <i class="fas fa-tint" style="color:#00add6;"></i> 
    <span class="dht-labels">Humidity</span>
    <span id="humidity">%HUMIDITY%</span>
    <sup class="units">%</sup>
  </p>
</body>
<script>
setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("temperature").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/temperature", true);
  xhttp.send();
}, 10000 ) ;

setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("humidity").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/humidity", true);
  xhttp.send();
}, 10000 ) ;
</script>
</html>)rawliteral";

// Replaces placeholder with DHT values
String processor(const String& var){
  if(var == "TEMPERATURE"){
    return String(temperature);
  }
  else if(var == "HUMIDITY"){
    return String(humidity);
  }
  return String();
}

void setup(){
  Serial.begin(115200);
  dht.begin();
  
  //链接Wifi
  WiFi.begin(ssid, password);
  Serial.println("Connecting to WiFi");
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println(".");
  }

  //打印IP
  Serial.println(WiFi.localIP());

  
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html, processor);
  });
  server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", String(temperature).c_str());
  });
  server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", String(humidity).c_str());
  });

  //开启服务
  server.begin();
}
 
void loop(){  
  unsigned long currentMillis = millis();
  if (currentMillis - previousMillis >= interval) {
    previousMillis = currentMillis;
    //读取温度
    float newTemperature = dht.readTemperature();
    if (isnan(newTemperature)) {
      Serial.println("Failed to read from DHT sensor!");
    }
    else {
      temperature = newTemperature;
    }
    
    //读取湿度
    float newHumidity = dht.readHumidity();
    if (isnan(newHumidity)) {
      Serial.println("Failed to read from DHT sensor!");
    }
    else {
      humidity = newHumidity;
    }
  }
}

你还需要使用你所在的局域网的Wifi的ssid和密码代替以下内容：

1
2
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

编译代码并下载到ESP8266

编译你的代码并下载到ESP8266开发板，打开串口监视器，程序启动并连接你的Wifi后将IP地址打印到监视器中；在浏览器中访问该IP即可。

ESP8266开发板NodeMcu开发-DHT11温湿度Web服务器

https://www.junle.org/ESP8266开发板NodeMcu开发-DHT11温湿度Web服务器/

作者

Junle

发布于

2020-04-23

更新于

2024-03-22

许可协议

#

喜欢这篇文章？打赏一下作者吧

评论

关注我

最新文章

归档

标签

Arduino2
Chart.js1
ERP54
ESP82664
Java2
Linux10
Metabase1
MySQL3
Odoo4
Odoo开发者指南7
OpenWRT1
PostgreSQL1
Python3
RaspberryPI5
RuoYi2
SQLServer8
STM324
SlapOS3
Superset1
Vue1
Windows1
Zope4
工具分享1
数据可视化3
笔记1
×