DHT11 Temperature & Humidity Web Server

By the end of this project, you will:

• Read a real environmental sensor and get physical units out of it, not raw counts.
• Use a sensor library and understand what it does for you underneath.
• Handle a failed reading with isnan() instead of publishing a nonsense number.
• Fill placeholders in a page with live values using a template processor.
• Update parts of a page in the background, so figures refresh without a reload.
• Compare this with Project 2's ADC: a digital sensor speaks numbers, an analog one gives a voltage you must interpret.

The DHT11 is a small, slow, cheap sensor that reports temperature (°C) and relative humidity (%) over one data wire. Read it every couple of seconds: no faster.

To refresh without reloading, the browser polls (like Project 8): two timers fetch /temperature and /humidity every 10 s and drop the numbers into the page:

setInterval(function () {
  xhttp.open("GET", "/temperature", true);   // fetch just the number
  ...
}, 10000);                                     // every 10 seconds

• DHT sensor library (Adafruit)
• Adafruit Unified Sensor (dependency)
• ESPAsyncWebServer
• AsyncTCP (ESP32)

The first two are in the Library Manager; the async pair install as ZIPs (as in Projects 7–8).

Set your Wi‑Fi credentials, upload, open Serial Monitor at 115200, press EN/RESET:

==============================================
 Project 9: ESP32 DHT11 Web Server
==============================================
DHT11 data -> GPIO 4
Connecting to Wi-Fi: MyNetwork
....
Wi-Fi connected!
Open this address in your browser:  http://192.168.1.42
----------------------------------------------
[DHT] Temperature: 21.4 C
[DHT] Humidity: 63.9 %

The improved logging prints labeled readings with units (the original printed a bare number), so you can confirm the sensor works before opening the page.

The async server again, with a sensor behind it. Here is what is new.

Step 1: Telling the library which sensor, on which pin

#include <Adafruit_Sensor.h>
#include <DHT.h>

#define DHTPIN 4          // data pin
#define DHTTYPE DHT11     // the family member we have

DHT dht(DHTPIN, DHTTYPE);

DHT dht(DHTPIN, DHTTYPE) creates an object: a bundle of the pin number, the sensor type, and the code that talks to it. From here on you ask dht for readings rather than handling the pin yourself.

Step 2: Reading safely, with a fallback

String readDHTTemperature() {
  float t = dht.readTemperature();       // Celsius by default
  if (isnan(t)) {
    Serial.println("[DHT] Failed to read temperature!");
    return "--";                         // show a dash, not a wrong number
  }
  return String(t);
}

isnan() asks "is this Not a Number?" A DHT11 read fails now and then, from a loose wire or from being asked too often, and the library reports that by returning NaN. Checking for it is what keeps -- on the page instead of a meaningless value.

Both readers return String rather than float, because their output goes straight into a web page. dht.readTemperature(true) returns Fahrenheit.

Step 3: Placeholders in the page, filled at send time

<span id="temperature">%TEMPERATURE%</span>
<span id="humidity">%HUMIDITY%</span>

String processor(const String& var){
  if (var == "TEMPERATURE") return readDHTTemperature();
  else if (var == "HUMIDITY")  return readDHTHumidity();
  return String();
}

Same mechanism as Project 7, used for data instead of controls. The first page you load therefore already shows real values, with no wait.

Step 4: Two endpoints, and a page that refreshes itself

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

setInterval(function () {
  ...
  document.getElementById("temperature").innerHTML = this.responseText;
  xhttp.open("GET", "/temperature", true);
}, 10000);

Exactly Project 8's polling pattern, with two differences: each value has its own endpoint returning plain text, and the interval is 10 seconds rather than 1. The DHT11 produces a fresh sample only about once a second and is not a fast-moving quantity, so polling harder would gain nothing. innerHTML replaces just the contents of one <span>, which is why the figures change while the rest of the page sits still.

Step 5: an empty loop() again

Readings are taken on demand, when a browser asks. If you wanted logging every minute regardless of visitors, that is where a millis() timer from Project 4 would go.

Key concepts: what each line really does

This is the first project that measures the world and publishes it, which is what most IoT devices spend their lives doing.

• A digital sensor hands you finished numbers over a protocol. Contrast Project 2, where the ADC gave a voltage and you did the interpreting.
• Libraries exist because that protocol is fiddly: dht.readTemperature() replaces microsecond-accurate pulse timing.
• Sensors fail sometimes. Always check (isnan()) and show something honest: a dash beats a wrong number.
• Sensors have a sampling rate. The DHT11 manages roughly one reading per second, accurate to about ±2 °C and ±5 % RH, so a 10-second refresh is generous.
• Template placeholders put live values into the first page load; polling keeps them fresh afterwards.
• The page is now a dashboard. Project 11 sends the same readings to a cloud service so you can watch them from outside the building.