¡Controla la temperatura y humedad en tu servidor web con ESP32 DHT11/DHT22 y Arduino IDE! Aprende cómo hacerlo en este tutorial paso a paso.

En este artículo, exploraremos cómo crear un servidor web con ESP32 y los sensores de temperatura y humedad DHT11/DHT22. Utilizando el Arduino IDE, aprenderemos a recopilar datos ambientales y visualizarlos de forma remota a través de una interfaz web. ¡Acompáñanos en esta emocionante aventura de IoT!

En este proyecto, aprenderá cómo crear un servidor web ESP32 asíncrono usando DHT11 o DHT22 que muestra la temperatura y la humedad usando el IDE de Arduino.

Servidor web ESP32 DHT11/DHT22 – Temperatura y humedad con Arduino IDE

El servidor web que creamos actualiza automáticamente las métricas sin tener que actualizar la página web.

Con este proyecto aprenderás:

Cómo leer la temperatura y la humedad de los sensores DHT;
Cree un servidor web asíncrono con el Biblioteca ESPAsyncWebServer;
Actualice automáticamente las lecturas del sensor sin tener que actualizar la página web.

Para obtener una explicación más detallada de cómo usar los sensores de temperatura y humedad DHT22 y DHT11 con el ESP32, consulte nuestra guía completa: ESP32 con sensores de temperatura y humedad DHT11/DHT22 usando el IDE de Arduino

Mira el vídeotutorial

Puede ver el video tutorial o continuar leyendo esta página para obtener las instrucciones escritas.

Servidor web asíncrono

Usamos para construir el servidor web. Biblioteca ESPAsyncWebServer Esto proporciona una manera sencilla de crear un servidor web asincrónico. La creación de un servidor web asíncrono tiene varias ventajas, como se menciona en la página de GitHub de la biblioteca, como por ejemplo:

“Manejar más de una conexión a la vez”;
“Cuando envías la respuesta, inmediatamente estás listo para procesar otras conexiones mientras el servidor se encarga de enviar la respuesta en segundo plano”;
“Motor de procesamiento de plantillas simple para manejar plantillas”;
Y mucho más.

Échales un vistazo Documentación de la biblioteca en la página de GitHub.

Piezas requeridas

Para completar este tutorial necesitarás las siguientes partes:

Placa de desarrollo ESP32 (leer Comparación de placas de desarrollo ESP32)
DHT22 o DHT11 Sensor de temperatura y humedad
Resistencia de 4,7k ohmios
tablero de circuitos
Cables de puente

Puedes utilizar los enlaces anteriores o ir directamente MakerAdvisor.com/tools ¡Para encontrar todas las piezas para tus proyectos al mejor precio!

Esquema

Antes de continuar con el servidor web, debe conectar el sensor DHT11 o DHT22 al ESP32 como se muestra en el siguiente diagrama de circuito.

En este caso conectamos el pin de datos a GPIO27pero puedes conectarlo a cualquier otro pin digital. Puede utilizar este diagrama esquemático para los sensores DHT11 y DHT22.

(Este esquema utiliza la versión del módulo ESP32 DEVKIT V1 con 36 GPIO; si está utilizando un modelo diferente, verifique la distribución de pines de la placa que está utilizando).

Nota: Si utiliza un módulo con sensor DHT, normalmente sólo tiene tres pines. Los pines deben estar etiquetados para que sepas cómo conectarlos. Además, muchos de estos módulos ya tienen una resistencia pull-up interna, por lo que no es necesario agregar una al circuito.

Instalación de bibliotecas

Para este proyecto necesitas instalar algunas bibliotecas:

El DHT y eso Controlador de sensor unificado de Adafruit Bibliotecas para lectura desde sensor DHT.
ESPAsyncWebServer Y TCP asíncrono Bibliotecas para construir el servidor web asíncrono.

Siga las siguientes instrucciones para instalar estas bibliotecas:

Instalación de la biblioteca de sensores DHT

Para leer el sensor DHT con Arduino IDE, necesita Biblioteca de sensores DHTSiga los siguientes pasos para instalar la biblioteca.

Haga clic aquí para descargar la biblioteca de sensores DHT. Deberías tener una carpeta .zip en tu Descargas Carpeta
Descomprima la carpeta .zip y debería obtener Maestro de biblioteca de sensores DHT Carpeta
Cambie el nombre de su carpeta de ~~Maestro de biblioteca de sensores DHT~~ A sensor_DHT
mueve eso sensor_DHT Carpeta a la carpeta de bibliotecas de instalación de Arduino IDE
Finalmente, vuelva a abrir su IDE de Arduino

Instalación del controlador del sensor unificado de Adafruit

Usted también debe Biblioteca de controladores de sensores unificados de Adafruit para trabajar con el sensor DHT. Siga los siguientes pasos para instalar la biblioteca.

Haga clic aquí para descargar la biblioteca de sensores unificados de Adafruit. Deberías tener una carpeta .zip en tu Descargas Carpeta
Descomprima la carpeta .zip y debería obtener Adafruit_sensor-master Carpeta
Cambie el nombre de su carpeta de ~~Adafruit_sensor-master~~ A adafruit_sensor
mueve eso adafruit_sensor Carpeta a la carpeta de bibliotecas de instalación de Arduino IDE
Finalmente, vuelva a abrir su IDE de Arduino

Instalación de la biblioteca ESPAsyncWebServer

Siga los siguientes pasos para instalar el ESPAsyncWebServer Biblioteca:

Haga clic aquí para descargar la biblioteca ESPAsyncWebServer. Deberías tener una carpeta .zip en tu carpeta de Descargas.
Descomprima la carpeta .zip y debería obtener Maestro ESPAsyncWebServer Carpeta
Cambie el nombre de su carpeta de ~~Maestro ESPAsyncWebServer~~ A ESPAsyncWebServer
mueve eso ESPAsyncWebServer Carpeta a la carpeta de bibliotecas de instalación de Arduino IDE

Instalación de la biblioteca Async TCP para ESP32

El ESPAsyncWebServer La biblioteca requiere la AsíncronoTCP Obras de biblioteca. Siga los siguientes pasos para instalar esta biblioteca:

Haga clic aquí para descargar la biblioteca AsyncTCP. Deberías tener una carpeta .zip en tu carpeta de Descargas.
Descomprima la carpeta .zip y debería obtener Maestro asíncrono TCP Carpeta
Cambie el nombre de su carpeta de ~~Maestro asíncrono TCP~~ A AsíncronoTCP
mueve eso AsíncronoTCP Carpeta a la carpeta de bibliotecas de instalación de Arduino IDE
Finalmente, vuelva a abrir su IDE de Arduino

código

Programaremos el ESP32 usando Arduino IDE. Por lo tanto, asegúrese de tener instalado el complemento ESP32 antes de continuar:

Instale la placa ESP32 en Arduino IDE (Instrucciones para Windows, Mac y Linux)

Abra su IDE de Arduino y copie el siguiente código.

/*********
  Rui Santos
  Complete project details at https://randomnerdtutorials.com  
*********/

// Import required libraries
#include "WiFi.h"
#include "ESPAsyncWebServer.h"
#include <Adafruit_Sensor.h>
#include <DHT.h>

// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

#define DHTPIN 27     // Digital pin connected to the DHT sensor

// Uncomment the type of sensor in use:
//#define DHTTYPE    DHT11     // DHT 11
#define DHTTYPE    DHT22     // DHT 22 (AM2302)
//#define DHTTYPE    DHT21     // DHT 21 (AM2301)

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
    Serial.println("Failed to read from DHT sensor!");
    return "--";
  }
  else {
    Serial.println
    return String
  }
}

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">&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">&percnt;</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(){
  
}

Ver código sin formato

Ingrese sus credenciales de red en las siguientes variables y el código funcionará inmediatamente.

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

Cómo funciona el código

En las siguientes secciones explicamos cómo funciona el código. Continúe leyendo si desea obtener más información o pase a la sección de demostración para ver el resultado final.

Importando bibliotecas

Primero importe las bibliotecas necesarias. Acceso inalámbrico a Internet, ESPAsyncWebServer y eso ESPAsyncTCP son necesarios para configurar el servidor web. Adafruit_Sensor y eso DHTSe requieren bibliotecas para leer los sensores DHT11 o DHT22.

#include "WiFi.h"
#include "ESPAsyncWebServer.h"
#include <ESPAsyncTCP.h>
#include <Adafruit_Sensor.h>
#include <DHT.h>

Configuración de sus credenciales de red

Ingrese sus credenciales de red en las siguientes variables para que el ESP32 pueda conectarse a su red local.

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

Definición de variable

Defina el GPIO al que está conectado el pin de datos DHT. En este caso está conectado a GPIO27.

#define DHTPIN 27  // Digital pin connected to the DHT sensor

Luego seleccione el tipo de sensor DHT que está utilizando. En nuestro ejemplo utilizamos el DHT22. Si usa otro tipo, solo necesita descomentar su sensor y descomentar todos los demás.

#define DHTTYPE DHT22   // DHT 22 (AM2302)

Crear una instancia DHTObjeto con el tipo y pin que definimos anteriormente.

DHT dht(DHTPIN, DHTTYPE);

Crea uno Servidor web asíncronoObjeto en el puerto 80.

AsyncWebServer server(80);

Leer funciones de temperatura y humedad.

Creamos dos funciones: una para leer la temperatura (leerDHTTemperatura()) y el otro para leer la humedad (leerDHTHhumedad()).

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
    Serial.println("Failed to read from DHT sensor!");
    return "--";
  }
  else {
    Serial.println
    return String
  }
}

Recuperar los valores de los sensores es muy sencillo: leer temperatura() Y leerhumedad() métodos en el dht Objeto.

float t = dht.readTemperature();

float h = dht.readHumidity();

También tenemos una condición que devuelve dos guiones (-) si el sensor no puede tomar lecturas.

if (isnan
  Serial.println("Failed to read from DHT sensor!");
  return "--";
}

Las medidas se devuelven como un tipo de cadena. Para convertir un flotante en una cadena, use el cadena() Función.

return String





Por defecto, la temperatura se da en grados Celsius.  Para obtener la temperatura en grados Fahrenheit, comente la temperatura en Celsius y descomente la temperatura en Fahrenheit para obtener: 





//float t = dht.readTemperature();
// Read temperature as Fahrenheit (isFahrenheit = true)
float t = dht.readTemperature(true);
Creando el sitio web
Continúe a la página del servidor web.



Como puede ver en la imagen de arriba, la página web muestra un encabezado y dos párrafos.  Hay un párrafo para mostrar la temperatura y otro para mostrar la humedad.  También hay dos iconos para diseñar nuestra página. 
Veamos cómo se crea este sitio web. 
Todo el texto HTML con los estilos incluidos se guarda en índice_html Variable.  Ahora repasemos el texto HTML y veamos qué hace cada parte.
La siguiente     La etiqueta hace que su sitio web responda en cualquier navegador.
<meta name="viewport" content="width=device-width, initial-scale=1">
El     Se necesita una etiqueta para cargar los íconos del sitio web de Fontawesome.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
estilo
Entre     A las etiquetas agregamos algo de CSS para darle estilo a la página web.
<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>
Básicamente, configuramos la página HTML para que el texto se muestre en fuente Arial en bloques sin borde y centrado.
html {
  font-family: Arial;
  display: inline-block;
  margin: 0px auto;
  text-align: center;
}
Establecemos el tamaño de fuente para el encabezado (h2), párrafo (PAG) y las unidades (.Unidades) de los valores medidos.
h2 { font-size: 3.0rem; }
p { font-size: 3.0rem; }
.units { font-size: 1.2rem; }
Las etiquetas para los valores medidos están diseñadas de la siguiente manera:
dht-labels{
  font-size: 1.5rem;
  vertical-align:middle;
  padding-bottom: 15px;
}
Todas las etiquetas anteriores deben estar entre     Y     etiquetas.  Estas etiquetas se utilizan para incluir contenido que no es directamente visible para el usuario, como por ejemplo:  b.     El     Etiquetas y estilos.
texto HTML
Dentro de     En etiquetas añadimos el contenido de la página web.
El 

    Las etiquetas agregan un encabezado a la página web.  En este caso el texto “ESP32 DHT Server”, pero puedes agregar cualquier otro texto.
<h2>ESP32 DHT Server</h2>
Luego hay dos párrafos.  Uno muestra la temperatura y el otro muestra la humedad.  Los párrafos están a través del 
    Y 
    etiquetas.  El párrafo de temperatura es el siguiente:
<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>
Y el párrafo sobre la humedad está en el siguiente fragmento:
<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>
El     Las etiquetas muestran los íconos de Fontawesome. 

Cómo mostrar iconos
Para seleccionar los iconos, vaya a Sitio web de Font Awesome Icons.



Busque el icono que desee.  Por ejemplo “termómetro”.



Haga clic en el símbolo deseado.  Luego todo lo que tienes que hacer es copiar el texto HTML proporcionado.
<i class="fas fa-thermometer-half">



Para seleccionar el color, sólo necesitas pasar el parámetro de estilo con el color en valor hexadecimal así:
<i class="fas fa-tint" style="color:#00add6;"></i> 
Continúe con el texto HTML…
La siguiente línea escribe la palabra "temperatura" en la página web. 
<span class="dht-labels">Temperature</span>
El texto TEMPERATURA entre los caracteres % es un marcador de posición para el valor de temperatura. 
<span id="temperature">%TEMPERATURE%</span>
Eso significa que estos %TEMPERATURA% El texto es como una variable que se reemplaza con el valor de temperatura real del sensor DHT.  Los marcadores de posición en el texto HTML deben tener entre % caracteres. 
Finalmente, agregamos el símbolo de grado.
<sup class="units">°C</sup>
El ^</sup> Las etiquetas hacen que el texto sea superíndice. 
Usamos el mismo enfoque para la sección de humedad, pero usamos un símbolo diferente y el %HUMEDAD% Marcador de posición.
<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>
Actualizaciones automáticas
Finalmente, hay un código JavaScript en nuestro sitio web que actualiza automáticamente la temperatura y la humedad cada 10 segundos. 
Los scripts en textos HTML deben estar entre     Palabras clave.
<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>
Para actualizar la temperatura en segundo plano tenemos uno establecerintervalo() Función que se ejecuta cada 10 segundos. 
Básicamente hace una petición en el /Temperatura URL para obtener los últimos valores de temperatura. 
  xhttp.open("GET", "/temperature", true);
  xhttp.send();
}, 10000 ) ;
Cuando se recibe este valor, actualiza el elemento HTML con el ID. temperatura. 
if (this.readyState == 4 && this.status == 200) {
  document.getElementById("temperature").innerHTML = this.responseText;
}
En resumen, esta sección anterior se encarga de actualizar la temperatura de forma asincrónica.  Se repite el mismo proceso para los valores de humedad.
Importante:  Dado que el sensor DHT tarda bastante en obtener lecturas, recomendamos aumentar el intervalo de solicitud o eliminar las actualizaciones automáticas si desea conectar varios clientes a un ESP32 al mismo tiempo.
procesador
Ahora tenemos que Procesador() Función que reemplaza los marcadores de posición de nuestro texto HTML por los valores reales de temperatura y humedad.
String processor(const String& var){
  //Serial.println(var);
  if(var == "TEMPERATURE"){
    return readDHTTemperature();
  }
  else if(var == "HUMIDITY"){
    return readDHTHumidity();
  }
  return String();
}
Al acceder al sitio web, comprobamos si el HTML contiene marcadores de posición.  Si es el %TEMPERATURA% Comodín, devolvemos la temperatura usando el leerDHTTemperatura() función creada previamente.
if(var == "TEMPERATURE"){
  return readDHTTemperature();
}
Si el marcador de posición %HUMEDAD%devolvemos el valor de humedad.
else if(var == "HUMIDITY"){
  return readDHTHumidity();
}
configuración()
En el configuración(), Inicialice el monitor serie para fines de depuración.
Serial.begin(115200);
Inicialice el sensor DHT.
dht.begin();
Conéctese a su red local e imprima la dirección IP de ESP32.
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.println("Connecting to WiFi..");
}
Finalmente, agregue las siguientes líneas de código para manejar el servidor web.
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());
});
Cuando realizamos una solicitud a la URL raíz, enviamos el texto HTML que se encuentra en la índice_html Variable.  Tenemos que hacer eso también procesadorFunción que reemplaza todos los marcadores de posición con los valores correctos.
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/html", index_html, processor);
});
Necesitamos agregar dos controladores adicionales para actualizar los valores de temperatura y humedad.  Cuando recibimos una solicitud en el /Temperatura URL simplemente necesitamos enviar el valor de temperatura actualizado.  Es texto sin formato y debe enviarse como un carácter, por eso lo usamos cadena_c() Método.
server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/plain", readDHTTemperature().c_str());
});
Se repite el mismo proceso para la humedad.
server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/plain", readDHTHumidity().c_str());
});
Finalmente podemos iniciar el servidor.
server.begin();
Dado que es un servidor web asíncrono, no tenemos que ponerle nada. Cinta().
void loop(){

}
En términos generales, así es como funciona el código.
Sube el código
Ahora sube el código a tu ESP32.  Asegúrese de haber seleccionado la placa y el puerto COM correctos. 
Después de la carga, abra el monitor en serie con una velocidad de baudios de 115200. Presione el botón de reinicio ESP32.  La dirección IP de ESP32 debería aparecer en el monitor serie.



Demostración del servidor web
Abra un navegador e ingrese la dirección IP ESP32.  Su servidor web debería mostrar las últimas lecturas del sensor. 
Tenga en cuenta que los valores de temperatura y humedad se actualizan automáticamente sin necesidad de actualizar la página web.



Solución de problemas
Si su sensor DHT no proporciona lecturas, consulte nuestra Guía de solución de problemas de DHT para ayudarle a resolver el problema.
Envolver
En este tutorial le mostramos cómo crear un servidor web asíncrono usando el ESP32 para mostrar los valores de un sensor DHT11 o DHT22 y cómo actualizar los valores automáticamente. 
Si te gustó este proyecto, también te puede gustar:

Aprende ESP32 con Arduino IDE (Curso)
Cree un servidor web ESP32 con archivos del sistema de archivos (SPIFFS).
Servidor web ESP32 – salidas de control
ESP32 Deep Sleep con Arduino IDE y fuentes de activación

Este tutorial es una vista previa del curso Aprenda ESP32 con Arduino IDE.  Si le gusta este proyecto, asegúrese de consultar la página del curso ESP32 donde cubrimos este y muchos otros temas de ESP32.
Error 403 The request cannot be completed because you have exceeded your quota. : quotaExceeded
Servidor web ESP32 DHT11/DHT22 – Temperatura y humedad con Arduino IDE
En este proyecto, aprenderás a construir un servidor web asíncrono ESP32 con DHT11 o DHT22 que muestra la temperatura y la humedad utilizando Arduino IDE.
¿Qué aprenderás?

Cómo leer la temperatura y la humedad de los sensores DHT11 y DHT22;
Construir un servidor web asíncrono utilizando la biblioteca ESPAsyncWebServer;
Actualizar automáticamente las lecturas del sensor sin necesidad de actualizar la página web.

Para obtener una explicación más detallada sobre cómo utilizar los sensores de temperatura y humedad DHT22 y DHT11 con el ESP32, lee nuestra guía completa: ESP32 con sensor de temperatura y humedad DHT11/DHT22 utilizando Arduino IDE.
¿Qué necesitas?
Para completar este tutorial, necesitas las siguientes piezas:

Placa de desarrollo ESP32;
Sensor de temperatura y humedad DHT22 o DHT11;
Resistor de 4.7k Ohm;
Protoboard;
Cables puente.

Puedes encontrar todas las piezas para tus proyectos al mejor precio en MakerAdvisor.com/tools.
Esquemático
Antes de proceder al servidor web, debes conectar el sensor DHT11 o DHT22 al ESP32 como se muestra en el siguiente diagrama esquemático.
En este caso, estamos conectando el pin de datos al GPIO 27, pero puedes conectarlo a cualquier otro pin digital. Puedes utilizar este diagrama esquemático tanto para los sensores DHT11 como para los DHT22.
Instalación de bibliotecas
Debes instalar un par de bibliotecas para este proyecto:

La biblioteca DHT y la biblioteca del controlador de sensor unificado de Adafruit para leer del sensor DHT.
Las bibliotecas ESPAsyncWebServer y Async TCP para construir el servidor web asíncrono.

Sigue las instrucciones del siguiente enlace para instalar esas bibliotecas:
Instrucciones para instalar bibliotecas
Código
Programaremos el ESP32 utilizando Arduino IDE. Asegúrate de tener el complemento ESP32 instalado antes de proceder.
Abre tu Arduino IDE y copia el siguiente código:
Copia aquí el código HTML...
Inserta las credenciales de tu red en las variables correspondientes y el código funcionará de inmediato.
¿Cómo funciona el código?
En los siguientes párrafos te explicaremos cómo funciona el código. Sigue leyendo si quieres aprender más o salta a la sección de demostración para ver el resultado final.
...
Una vez que hayas cargado el código en tu ESP32, abre el Monitor Serie a una velocidad de baudios de 115200. Presiona el botón de reinicio del ESP32. La dirección IP del ESP32 debería aparecer en el monitor serie.
Demostración del servidor web
Abre un navegador y escribe la dirección IP del ESP32. Tu servidor web debería mostrar las últimas lecturas del sensor. Observa que las lecturas de temperatura y humedad se actualizan automáticamente sin necesidad de refrescar la página.
Resolución de problemas
Si tu sensor DHT falla al obtener las lecturas, lee nuestra Guía de resolución de problemas de DHT para ayudarte a solucionar el problema.
Conclusión
En este tutorial, te hemos mostrado cómo construir un servidor web asíncrono con el ESP32 para mostrar las lecturas del sensor DHT11 o DHT22 y cómo actualizar las lecturas automáticamente. Si te gustó este proyecto, también te pueden interesar:

Aprender ESP32 con Arduino IDE (curso);
Construir un servidor web ESP32 utilizando archivos del sistema de archivos (SPIFFS);
ESP32 Web Server – control de salidas;
ESP32 Deep Sleep con Arduino IDE y fuentes de despertar.

Este tutorial es una vista previa del curso "Aprender ESP32 con Arduino IDE". Si te gusta este proyecto, asegúrate de echar un vistazo a la página del curso ESP32 donde cubrimos este y muchos otros temas con el ESP32.
Related Posts:
ESP8266 DHT11/DHT22 Servidor Web de Temperatura y…
ESP32 con sensor de temperatura y humedad…
MicroPython: ESP32/ESP8266 con sensor de temperatura…
MicroPython: ESP32/ESP8266 con sensor de temperatura…
Tutorial de sensores de temperatura y humedad DHT11…
Instrucciones completas para el sensor de humedad y…

3 comentarios en «Servidor web ESP32 DHT11/DHT22 – Temperatura y humedad con Arduino IDE»

itsasoao

31 de enero de 2023 a las 22:20

¡Qué genial que se pueda hacer algo así con el ESP32 y el DHT11/DHT22! Definitivamente voy a probarlo, gracias por las instrucciones detalladas. ¡Sigue así!
Accede para responder
legupps

31 de octubre de 2023 a las 18:14

¡Me parece increíble lo que se puede lograr con el ESP32 y los sensores DHT11/DHT22! Definitivamente voy a intentarlo, gracias por el tutorial paso a paso. ¡Estoy emocionado por probarlo!
Accede para responder
surgimosT

6 de diciembre de 2023 a las 02:53

¡Interesante proyecto! Me encanta la combinación de tecnología y la monitorización de temperatura y humedad. ¡Gracias por compartir!
Accede para responder

Deja un comentario Cancelar la respuesta

Lo siento, debes estar conectado para publicar un comentario.