异步Web服务器：测温湿度

使用零知ESP32构建一个异步网络服务器，该服务器将显示DHT11传感器测出的温度和湿度数据。

我们将构建的网络服务器能够自动更新读数，而无需刷新网页。

一、软件和硬件

硬件我们本次使用零知-ESP32和DHT11温湿度模块;

软件：零知开发工具

需要安装的库文件:

Adafruit_Sensor.zip(点击下载)
AsyncTCP.zip(点击下载)
DHT_Sensor.zip(点击下载)
ESPAsyncWebServer.zip(点击下载)

说明：

1、DHT_Sensor 和 Adafruit_Sensor 解压放到这个工程的目录下面即可，这两个库用来读取DHT11的数据。

2、AsyncTCP 和 ESPAsyncWebServer 需要安装到零知开发工具的ESP32本地库里面，这两个库用来创建异步服务器。

二、方法步骤

连线：将DHT11的OUT针脚连接到ESP32的GPIO27

代码：在ssid 和 password处替换成自己的WiFi名称和密码。


							
	// Import required libraries
	#include "WiFi.h"
	#include <ESPAsyncWebServer.h>
	#include "Adafruit_Sensor.h"
	#include "DHT.h"
	 
	// Replace with your network credentials
	const char* ssid = "";
	const char* password = "";
	 
	#define DHTPIN 27     // Digital pin connected to the DHT sensor
	 
	 
	#define DHTTYPE    DHT11     // DHT 11
	 
	DHT dht(DHTPIN, DHTTYPE);
	 
	// Create AsyncWebServer object on port 80
	AsyncWebServer server(80);
	 
	String readDHTTemperature() {
	  // Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)
	  // Read temperature as Celsius (the default)
	  float t = dht.readTemperature();
	  // Read temperature as Fahrenheit (isFahrenheit = true)
	  //float t = dht.readTemperature(true);
	  // Check if any reads failed and exit early (to try again).
	  if (isnan(t)) {    
	    Serial.println("Failed to read from DHT sensor!");
	    return "--";
	  }
	  else {
	    Serial.println(t);
	    return String(t);
	  }
	}
	 
	String readDHTHumidity() {
	  // Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)
	  float h = dht.readHumidity();
	  if (isnan(h)) {
	    Serial.println("Failed to read from DHT sensor!");
	    return "--";
	  }
	  else {
	    Serial.println(h);
	    return String(h);
	  }
	}
	 
	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>ESP32 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">°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){
	  //Serial.println(var);
	  if(var == "TEMPERATURE"){
	    return readDHTTemperature();
	  }
	  else if(var == "HUMIDITY"){
	    return readDHTHumidity();
	  }
	  return String();
	}
	 
	void setup(){
	  // Serial port for debugging purposes
	  Serial.begin(115200);
	 
	  dht.begin();
	   
	  // Connect to Wi-Fi
	  WiFi.begin(ssid, password);
	  while (WiFi.status() != WL_CONNECTED) {
	    delay(1000);
	    Serial.println("Connecting to WiFi..");
	  }
	 
	  // Print ESP32 Local IP Address
	  Serial.println(WiFi.localIP());
	 
	  // Route for root / web page
	  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", readDHTTemperature().c_str());
	  });
	  server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
	    request->send_P(200, "text/plain", readDHTHumidity().c_str());
	  });
	 
	  // Start server
	  server.begin();
	}
	  
	void loop(){
	   
	}

新建工程，导入程序代码，在右侧选择ESP32开发板，然后验证程序并上传到开发板，打开调试窗口，如下图：

然后用手机或者电脑浏览器打开服务器地址，就能看到温度和湿度的读数了。如下图：

1、电脑端读数：

2、手机端读数

由于是异步服务器，无需刷新网页，即可实时更新数据，更加方便观测。