{"id":39319,"date":"2019-08-07T14:59:54","date_gmt":"2019-08-07T14:59:54","guid":{"rendered":"http:\/\/randomnerdtutorials.com\/?p=39319"},"modified":"2025-03-15T11:47:33","modified_gmt":"2025-03-15T11:47:33","slug":"esp32-dht11-dht22-temperature-humidity-web-server-arduino-ide","status":"publish","type":"post","link":"https:\/\/randomnerdtutorials.com\/esp32-dht11-dht22-temperature-humidity-web-server-arduino-ide\/","title":{"rendered":"ESP32 DHT11\/DHT22 Web Server &#8211; Temperature and Humidity using Arduino IDE"},"content":{"rendered":"\n<p>In this project, you&#8217;ll learn how to build an asynchronous ESP32 web server with the DHT11 or DHT22 that displays temperature and humidity using Arduino IDE.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" width=\"1200\" height=\"675\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/ESP32-DHT11-DHT22-Web-Server-Arduino-IDE-featured-image-1.jpg?resize=1200%2C675&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 DHT11\/DHT22 Web Server - Temperature and Humidity using Arduino IDE\" class=\"wp-image-83537\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/ESP32-DHT11-DHT22-Web-Server-Arduino-IDE-featured-image-1.jpg?w=1280&amp;quality=100&amp;strip=all&amp;ssl=1 1280w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/ESP32-DHT11-DHT22-Web-Server-Arduino-IDE-featured-image-1.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/ESP32-DHT11-DHT22-Web-Server-Arduino-IDE-featured-image-1.jpg?resize=768%2C432&amp;quality=100&amp;strip=all&amp;ssl=1 768w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/ESP32-DHT11-DHT22-Web-Server-Arduino-IDE-featured-image-1.jpg?resize=1024%2C576&amp;quality=100&amp;strip=all&amp;ssl=1 1024w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure><\/div>\n\n\n<p>The web server we\u2019ll build updates the readings automatically without the need to refresh the web page. <\/p>\n\n\n\n<p>With this project you\u2019ll learn:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>How to read temperature and humidity from DHT sensors;<\/li>\n\n\n\n<li>Build an asynchronous web server using the <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/github.com\/me-no-dev\/ESPAsyncWebServer\" target=\"_blank\">ESPAsyncWebServer library<\/a>;<\/li>\n\n\n\n<li>Update the sensor readings automatically without the need to refresh the web page.<\/li>\n<\/ul>\n\n\n\n<p>For a more in-depth explanation on how to use the DHT22 and DHT11 temperature and humidity sensors with the ESP32, read our complete guide: <a href=\"https:\/\/randomnerdtutorials.com\/esp32-with-dht11-dht22-temperature-and-humidity-sensor-using-arduino-ide\/\">ESP32 with DHT11\/DHT22 Temperature and Humidity Sensor using Arduino IDE<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Watch the Video Tutorial<\/h2>\n\n\n\n<p>You can watch the video tutorial or keep reading this page for the written instructions. <\/p>\n\n\n<p style=\"text-align:center\"><iframe width=\"720\" height=\"405\" src=\"https:\/\/www.youtube.com\/embed\/tDdL5urWvH4?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Asynchronous Web Server<\/h2>\n\n\n\n<p>To build the web server we\u2019ll use the <a href=\"https:\/\/github.com\/ESP32Async\/ESPAsyncWebServer\" target=\"_blank\" rel=\"noopener\" title=\"\">ESPAsyncWebServer library<\/a> that provides an easy way to build an asynchronous web server. Building an asynchronous web server has several advantages as mentioned in the library GitHub page, such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8220;Handle more than one connection at the same time&#8221;;<\/li>\n\n\n\n<li>&#8220;When you send the response, you are immediately ready to handle other connections while the server is taking care of sending the response in the background&#8221;;<\/li>\n\n\n\n<li>&#8220;Simple template processing engine to handle templates&#8221;;<\/li>\n\n\n\n<li>And much more. <\/li>\n<\/ul>\n\n\n\n<p>Take a look at the <a href=\"https:\/\/github.com\/ESP32Async\/ESPAsyncWebServer\/wiki\" target=\"_blank\" rel=\"noopener\" title=\"\">library documentation on its GitHub page<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Parts Required<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"750\" height=\"421\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/04\/dht-web-server-esp32-circuit.jpg?resize=750%2C421&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 DHT11 DHT22 Temperature and Humidity Arduino IDE Circuit Schematic\" class=\"wp-image-83844\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/04\/dht-web-server-esp32-circuit.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/04\/dht-web-server-esp32-circuit.jpg?resize=300%2C168&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>To complete this tutorial you need the following parts:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/makeradvisor.com\/tools\/esp32-dev-board-wi-fi-bluetooth\/\" target=\"_blank\">ESP32 development board<\/a>&nbsp;(read&nbsp;<a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/makeradvisor.com\/esp32-development-boards-review-comparison\/\" target=\"_blank\">ESP32 development boards comparison<\/a>)<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/makeradvisor.com\/tools\/dht22-temperature-humidity-sensor\/\" target=\"_blank\">DHT22<\/a>&nbsp;or&nbsp;<a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/makeradvisor.com\/tools\/dht11-temperature-humidity-sensor\/\" target=\"_blank\">DHT11<\/a>&nbsp;Temperature and Humidity Sensor<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/makeradvisor.com\/tools\/resistors-kits\/\" target=\"_blank\">4.7k Ohm Resistor<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/makeradvisor.com\/tools\/mb-102-solderless-breadboard-830-points\/\" target=\"_blank\">Breadboard<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/jumper-wires-kit-120-pieces\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Jumper wires<\/a><\/li>\n<\/ul>\n\n\n<p>You can use the preceding links or go directly to <a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\">MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/p><p style=\"text-align:center;\"><a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&#038;quality=100&#038;strip=all&#038;ssl=1\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Schematic<\/h2>\n\n\n\n<p>Before proceeding to the web server, you need to wire the DHT11 or DHT22 sensor to the ESP32 as shown in the following schematic diagram.<\/p>\n\n\n\n<p>In this case, we\u2019re connecting the data pin to <span class=\"rnthl rntcblue\">GPIO 27<\/span>, but you can connect it to any other digital pin. You can use this schematic diagram for both DHT11 and DHT22 sensors.<\/p>\n\n\n<div class=\"wp-block-image is-resized\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/ESP32-DHT-wiring_bb.png?quality=100&#038;strip=all&#038;ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"834\" height=\"924\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/ESP32-DHT-wiring_bb.png?resize=834%2C924&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 DHT11 DHT22 Temperature and Humidity Arduino IDE Circuit Schematic Diagram\" class=\"wp-image-83528\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/ESP32-DHT-wiring_bb.png?w=834&amp;quality=100&amp;strip=all&amp;ssl=1 834w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/ESP32-DHT-wiring_bb.png?resize=271%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 271w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/ESP32-DHT-wiring_bb.png?resize=768%2C851&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 834px) 100vw, 834px\" \/><\/a><\/figure><\/div>\n\n\n<p><em>(This schematic uses the ESP32 DEVKIT V1 module version with 36 GPIOs \u2013 if you\u2019re using another model, please check the pinout for the board you\u2019re using.)<\/em><\/p>\n\n\n\n<p class=\"rntbox rntclgreen\"><strong>Note: <\/strong> if you\u2019re using a module with a DHT sensor, it normally comes with only three pins. The pins should be labeled so that you know how to wire them. Additionally, many of these modules already come with an internal pull up resistor, so you don\u2019t need to add one to the circuit.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Installing Libraries<\/h2>\n\n\n\n<p>You need to install a couple of libraries for this project:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/github.com\/adafruit\/DHT-sensor-library\" target=\"_blank\">DHT<\/a> and the <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/github.com\/adafruit\/Adafruit_Sensor\" target=\"_blank\">Adafruit Unified Sensor Driver<\/a> libraries to read from the DHT sensor. <\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/ESP32Async\/ESPAsyncWebServer\" target=\"_blank\" rel=\"noopener\" title=\"\">ESPAsyncWebServer <\/a>and <a href=\"https:\/\/github.com\/ESP32Async\/AsyncTCP\" target=\"_blank\" rel=\"noopener\" title=\"\">Async TCP<\/a> libraries to build the asynchronous web server.<\/li>\n<\/ul>\n\n\n\n<p>You can install those libraries in the Arduino IDE Library Manager. Go to\u00a0<strong>Sketch\u00a0<\/strong>>\u00a0<strong>Include Library<\/strong>\u00a0>\u00a0<strong>Manage Libraries<\/strong>\u00a0and search for the libraries\u2019 names.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Code<\/h2>\n\n\n\n<p>We&#8217;ll program the ESP32 using Arduino IDE, so make sure you have the ESP32 add-on installed before proceeding: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/installing-esp32-arduino-ide-2-0\/\" title=\"\">Install ESP32 Board in Arduino IDE (Windows, Mac, and Linux Instructions)<\/a><\/li>\n<\/ul>\n\n\n\n<p>Open your Arduino IDE and copy the following code.<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*********\n  Rui Santos\n  Complete project details at https:\/\/randomnerdtutorials.com  \n*********\/\n\n\/\/ Import required libraries\n#include &quot;WiFi.h&quot;\n#include &quot;ESPAsyncWebServer.h&quot;\n#include &lt;Adafruit_Sensor.h&gt;\n#include &lt;DHT.h&gt;\n\n\/\/ Replace with your network credentials\nconst char* ssid = &quot;REPLACE_WITH_YOUR_SSID&quot;;\nconst char* password = &quot;REPLACE_WITH_YOUR_PASSWORD&quot;;\n\n#define DHTPIN 27     \/\/ Digital pin connected to the DHT sensor\n\n\/\/ Uncomment the type of sensor in use:\n\/\/#define DHTTYPE    DHT11     \/\/ DHT 11\n#define DHTTYPE    DHT22     \/\/ DHT 22 (AM2302)\n\/\/#define DHTTYPE    DHT21     \/\/ DHT 21 (AM2301)\n\nDHT dht(DHTPIN, DHTTYPE);\n\n\/\/ Create AsyncWebServer object on port 80\nAsyncWebServer server(80);\n\nString readDHTTemperature() {\n  \/\/ Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)\n  \/\/ Read temperature as Celsius (the default)\n  float t = dht.readTemperature();\n  \/\/ Read temperature as Fahrenheit (isFahrenheit = true)\n  \/\/float t = dht.readTemperature(true);\n  \/\/ Check if any reads failed and exit early (to try again).\n  if (isnan(t)) {    \n    Serial.println(&quot;Failed to read from DHT sensor!&quot;);\n    return &quot;--&quot;;\n  }\n  else {\n    Serial.println(t);\n    return String(t);\n  }\n}\n\nString readDHTHumidity() {\n  \/\/ Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)\n  float h = dht.readHumidity();\n  if (isnan(h)) {\n    Serial.println(&quot;Failed to read from DHT sensor!&quot;);\n    return &quot;--&quot;;\n  }\n  else {\n    Serial.println(h);\n    return String(h);\n  }\n}\n\nconst char index_html[] PROGMEM = R&quot;rawliteral(\n&lt;!DOCTYPE HTML&gt;&lt;html&gt;\n&lt;head&gt;\n  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;\n  &lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/use.fontawesome.com\/releases\/v5.7.2\/css\/all.css&quot; integrity=&quot;sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr&quot; crossorigin=&quot;anonymous&quot;&gt;\n  &lt;style&gt;\n    html {\n     font-family: Arial;\n     display: inline-block;\n     margin: 0px auto;\n     text-align: center;\n    }\n    h2 { font-size: 3.0rem; }\n    p { font-size: 3.0rem; }\n    .units { font-size: 1.2rem; }\n    .dht-labels{\n      font-size: 1.5rem;\n      vertical-align:middle;\n      padding-bottom: 15px;\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;h2&gt;ESP32 DHT Server&lt;\/h2&gt;\n  &lt;p&gt;\n    &lt;i class=&quot;fas fa-thermometer-half&quot; style=&quot;color:#059e8a;&quot;&gt;&lt;\/i&gt; \n    &lt;span class=&quot;dht-labels&quot;&gt;Temperature&lt;\/span&gt; \n    &lt;span id=&quot;temperature&quot;&gt;%TEMPERATURE%&lt;\/span&gt;\n    &lt;sup class=&quot;units&quot;&gt;&amp;deg;C&lt;\/sup&gt;\n  &lt;\/p&gt;\n  &lt;p&gt;\n    &lt;i class=&quot;fas fa-tint&quot; style=&quot;color:#00add6;&quot;&gt;&lt;\/i&gt; \n    &lt;span class=&quot;dht-labels&quot;&gt;Humidity&lt;\/span&gt;\n    &lt;span id=&quot;humidity&quot;&gt;%HUMIDITY%&lt;\/span&gt;\n    &lt;sup class=&quot;units&quot;&gt;&amp;percnt;&lt;\/sup&gt;\n  &lt;\/p&gt;\n&lt;\/body&gt;\n&lt;script&gt;\nsetInterval(function ( ) {\n  var xhttp = new XMLHttpRequest();\n  xhttp.onreadystatechange = function() {\n    if (this.readyState == 4 &amp;&amp; this.status == 200) {\n      document.getElementById(&quot;temperature&quot;).innerHTML = this.responseText;\n    }\n  };\n  xhttp.open(&quot;GET&quot;, &quot;\/temperature&quot;, true);\n  xhttp.send();\n}, 10000 ) ;\n\nsetInterval(function ( ) {\n  var xhttp = new XMLHttpRequest();\n  xhttp.onreadystatechange = function() {\n    if (this.readyState == 4 &amp;&amp; this.status == 200) {\n      document.getElementById(&quot;humidity&quot;).innerHTML = this.responseText;\n    }\n  };\n  xhttp.open(&quot;GET&quot;, &quot;\/humidity&quot;, true);\n  xhttp.send();\n}, 10000 ) ;\n&lt;\/script&gt;\n&lt;\/html&gt;)rawliteral&quot;;\n\n\/\/ Replaces placeholder with DHT values\nString processor(const String&amp; var){\n  \/\/Serial.println(var);\n  if(var == &quot;TEMPERATURE&quot;){\n    return readDHTTemperature();\n  }\n  else if(var == &quot;HUMIDITY&quot;){\n    return readDHTHumidity();\n  }\n  return String();\n}\n\nvoid setup(){\n  \/\/ Serial port for debugging purposes\n  Serial.begin(115200);\n\n  dht.begin();\n  \n  \/\/ Connect to Wi-Fi\n  WiFi.begin(ssid, password);\n  while (WiFi.status() != WL_CONNECTED) {\n    delay(1000);\n    Serial.println(&quot;Connecting to WiFi..&quot;);\n  }\n\n  \/\/ Print ESP32 Local IP Address\n  Serial.println(WiFi.localIP());\n\n  \/\/ Route for root \/ web page\n  server.on(&quot;\/&quot;, HTTP_GET, [](AsyncWebServerRequest *request){\n    request-&gt;send_P(200, &quot;text\/html&quot;, index_html, processor);\n  });\n  server.on(&quot;\/temperature&quot;, HTTP_GET, [](AsyncWebServerRequest *request){\n    request-&gt;send_P(200, &quot;text\/plain&quot;, readDHTTemperature().c_str());\n  });\n  server.on(&quot;\/humidity&quot;, HTTP_GET, [](AsyncWebServerRequest *request){\n    request-&gt;send_P(200, &quot;text\/plain&quot;, readDHTHumidity().c_str());\n  });\n\n  \/\/ Start server\n  server.begin();\n}\n \nvoid loop(){\n  \n}\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/ESP32-Course\/raw\/master\/code\/WiFi_Web_Server_DHT\/WiFi_Web_Server_DHT.ino\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<p>Insert your network credentials in the following variables and the code will work straight away.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>const char* ssid = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">How the Code Works<\/h2>\n\n\n\n<p>In the following paragraphs, we&#8217;ll explain how the code works. Keep reading if you want to learn more or jump to the Demonstration section to see the final result.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Importing libraries<\/h3>\n\n\n\n<p>First, import the required libraries. The <span class=\"rnthl rntliteral\">WiFi<\/span>, <span class=\"rnthl rntliteral\">ESPAsyncWebServe,r <\/span>and the <span class=\"rnthl rntliteral\">ESPAsyncTCP<\/span> are needed to build the web server. The <span class=\"rnthl rntliteral\">Adafruit_Sensor<\/span> and the <span class=\"rnthl rntliteral\">DHT<\/span>libraries are needed to read from the DHT11 or DHT22 sensors.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>#include \"WiFi.h\"\n#include \"ESPAsyncWebServer.h\"\n#include &lt;ESPAsyncTCP.h&gt;\n#include &lt;Adafruit_Sensor.h&gt;\n#include &lt;DHT.h&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Setting your network credentials<\/h3>\n\n\n\n<p>Insert your network credentials in the following variables, so that the ESP32 can connect to your local network.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>const char* ssid = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Variables definition<\/h3>\n\n\n\n<p>Define the GPIO that the DHT data pin is connected to. In this case, it\u2019s connected to <span class=\"rnthl rntcblue\">GPIO 27<\/span>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>#define DHTPIN 27  \/\/ Digital pin connected to the DHT sensor<\/code><\/pre>\n\n\n\n<p>Then, select the DHT sensor type you\u2019re using. In our example, we\u2019re using the DHT22. If you\u2019re using another type, you just need to uncomment your sensor and comment all the others.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>#define DHTTYPE DHT22   \/\/ DHT 22 (AM2302)<\/code><\/pre>\n\n\n\n<p>Instantiate a <span class=\"rnthl rntliteral\">DHT<\/span>object with the type and pin we\u2019ve defined earlier.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>DHT dht(DHTPIN, DHTTYPE);<\/code><\/pre>\n\n\n\n<p>Create an <span class=\"rnthl rntliteral\">AsyncWebServer<\/span>object on port 80.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>AsyncWebServer server(80);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Read Temperature and Humidity Functions <\/h3>\n\n\n\n<p>We\u2019ve created two functions: one to read the temperature (<span class=\"rnthl rntliteral\">readDHTTemperature()<\/span>) and the other to read humidity (<span class=\"rnthl rntliteral\">readDHTHumidity()<\/span>). <\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>String readDHTTemperature() {\n  \/\/ Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)\n  \/\/ Read temperature as Celsius (the default)\n  float t = dht.readTemperature();\n  \/\/ Read temperature as Fahrenheit (isFahrenheit = true)\n  \/\/float t = dht.readTemperature(true);\n  \/\/ Check if any reads failed and exit early (to try again).\n  if (isnan(t)) { \n    Serial.println(\"Failed to read from DHT sensor!\");\n    return \"--\";\n  }\n  else {\n    Serial.println(t);\n    return String(t);\n  }\n}<\/code><\/pre>\n\n\n\n<p>Getting sensor readings is as simple as using the <span class=\"rnthl rntliteral\">readTemperature()<\/span> and <span class=\"rnthl rntliteral\">readHumidity() <\/span>methods on the <span class=\"rnthl rntliteral\">dht<\/span> object. <\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>float t = dht.readTemperature();<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>float h = dht.readHumidity();<\/code><\/pre>\n\n\n\n<p>We also have a condition that returns two dashes (&#8211;) in case the sensor fails to get the readings.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>if (isnan(t)) {\n  Serial.println(\"Failed to read from DHT sensor!\");\n  return \"--\";\n}<\/code><\/pre>\n\n\n\n<p>The readings are returned as string type. To convert a float to a string, use the <span class=\"rnthl rntliteral\">String()<\/span> function. <\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>return String(t);<\/code><\/pre>\n\n\n\n<p>By default, we\u2019re reading the temperature in Celsius degrees. To get the temperature in Fahrenheit degrees, comment the temperature in Celsius and uncomment the temperature in Fahrenheit, so that you have the following: <\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/float t = dht.readTemperature();\n\/\/ Read temperature as Fahrenheit (isFahrenheit = true)\nfloat t = dht.readTemperature(true);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Building the Web Page<\/h3>\n\n\n\n<p>Proceeding to the web server page.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"534\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/web-server-labeled.png?resize=600%2C534&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 DHT11 DHT22 Temperature and Humidity web page\" class=\"wp-image-83529\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/web-server-labeled.png?w=600&amp;quality=100&amp;strip=all&amp;ssl=1 600w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/web-server-labeled.png?resize=300%2C267&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n<p>As you can see in the above figure, the web page shows one heading and two paragraphs. There is a paragraph to display the temperature and another to display the humidity. There are also two icons to style our page. <\/p>\n\n\n\n<p>Let\u2019s see how this web page is created. <\/p>\n\n\n\n<p>All the HTML text with styles included is stored in the <span class=\"rnthl rntliteral\">index_html<\/span> variable. Now we\u2019ll go through the HTML text and see what each part does.<\/p>\n\n\n\n<p>The following <span style=\"color: #333399;\">&lt;meta&gt;<\/span> tag makes your web page responsive in any browser.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;<\/code><\/pre>\n\n\n\n<p>The <span style=\"color: #333399;\">&lt;link&gt;<\/span> tag is needed to load the icons from the fontawesome website.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\"&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Styles<\/h4>\n\n\n\n<p>Between the <span style=\"color: #333399;\">&lt;style&gt;&lt;\/style&gt;<\/span> tags, we add some CSS to style the web page.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;style&gt;\n  html {\n    font-family: Arial;\n    display: inline-block;\n    margin: 0px auto;\n    text-align: center;\n  }\n  h2 { font-size: 3.0rem; }\n  p { font-size: 3.0rem; }\n  .units { font-size: 1.2rem; }\n  .dht-labels{\n    font-size: 1.5rem;\n    vertical-align:middle;\n    padding-bottom: 15px;\n  }\n&lt;\/style&gt;<\/code><\/pre>\n\n\n\n<p>Basically, we&#8217;re setting the HTML page to display the text with Arial font in block without margin, and aligned at the center.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>html {\n  font-family: Arial;\n  display: inline-block;\n  margin: 0px auto;\n  text-align: center;\n}<\/code><\/pre>\n\n\n\n<p>We set the font size for the heading (<span class=\"rnthl rntliteral\">h2<\/span>), paragraph (<span class=\"rnthl rntliteral\">p<\/span>) and the units(<span class=\"rnthl rntliteral\">.units<\/span>) of the readings.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>h2 { font-size: 3.0rem; }\np { font-size: 3.0rem; }\n.units { font-size: 1.2rem; }<\/code><\/pre>\n\n\n\n<p>The labels for the readings are styled as shown below:<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>dht-labels{\n  font-size: 1.5rem;\n  vertical-align:middle;\n  padding-bottom: 15px;\n}<\/code><\/pre>\n\n\n\n<p>All of the previous tags should go between the <span style=\"color: #333399;\">&lt;head&gt;<\/span> and <span style=\"color: #333399;\">&lt;\/head&gt;<\/span> tags. These tags are used to include content that is not directly visible to the user, like the <span style=\"color: #333399;\">&lt;meta&gt;<\/span> , the <span style=\"color: #333399;\">&lt;link&gt;<\/span> tags, and the styles.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">HTML Body<\/h4>\n\n\n\n<p>Inside the <span style=\"color: #333399;\">&lt;body&gt;&lt;\/body&gt;<\/span> tags is where we add the web page content.<\/p>\n\n\n\n<p>The <span style=\"color: #333399;\">&lt;h2&gt;&lt;\/h2&gt;<\/span> tags add a heading to the web page. In this case, the \u201cESP32 DHT server\u201d text, but you can add any other text.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;h2&gt;ESP32 DHT Server&lt;\/h2&gt;<\/code><\/pre>\n\n\n\n<p>Then, there are two paragraphs. One to display the temperature and the other to display the humidity. The paragraphs are delimited by the <span style=\"color: #333399;\">&lt;p&gt;<\/span> and <span style=\"color: #333399;\">&lt;\/p&gt;<\/span> tags. The paragraph for the temperature is the following:<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;p&gt;\n  &lt;i class=\"fas fa-thermometer-half\" style=\"color:#059e8a;\"&lt;\/i&gt; \n  &lt;span class=\"dht-labels\"&gt;Temperature&lt;\/span&gt; \n  &lt;span id=\"temperature\"&gt;%TEMPERATURE%&lt;\/span&gt;\n  &lt;sup class=\"units\"&gt;\u00b0C&lt;\/sup&gt;\n&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>And the paragraph for the humidity is on the following snipet:<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;p&gt;\n  &lt;i class=\"fas fa-tint\" style=\"color:#00add6;\"&gt;&lt;\/i&gt; \n  &lt;span class=\"dht-labels\"&gt;Humidity&lt;\/span&gt;\n  &lt;span id=\"humidity\"&gt;%HUMIDITY%&lt;\/span&gt;\n  &lt;sup class=\"units\"&gt;%&lt;\/sup&gt;\n&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>The <span style=\"color: #333399;\">&lt;i&gt;<\/span> tags display the fontawesome icons. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">How to display icons<\/h4>\n\n\n\n<p>To chose the icons, go to the <a href=\"https:\/\/fontawesome.com\/icons?d=gallery\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Font Awesome Icons website<\/a>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"476\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/fontawesomepage.png?resize=750%2C476&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Font Awesome Icons website\" class=\"wp-image-83530\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/fontawesomepage.png?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/fontawesomepage.png?resize=300%2C190&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>Search the icon you&#8217;re looking for. For example, &#8220;thermometer&#8221;.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"476\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/fontawesome-thermometer.png?resize=750%2C476&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Font Awesome Icons website thermometer\" class=\"wp-image-83531\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/fontawesome-thermometer.png?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/fontawesome-thermometer.png?resize=300%2C190&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>Click the desired icon. Then, you just need to copy the HTML text provided.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;i class=\"fas fa-thermometer-half\"&gt;<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"476\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/fontawesome-thermometer-html.png?resize=750%2C476&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Font Awesome Icons website thermometer half\" class=\"wp-image-83532\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/fontawesome-thermometer-html.png?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/fontawesome-thermometer-html.png?resize=300%2C190&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>To chose the color, you just need to pass the style parameter with the color in hexadecimal, as follows:<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;i class=\"fas fa-tint\" style=\"color:#00add6;\"&gt;&lt;\/i&gt; <\/code><\/pre>\n\n\n\n<p>Proceeding with the HTML text&#8230;<\/p>\n\n\n\n<p>The next line writes the word &#8220;Temperature&#8221; into the web page. <\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;span class=\"dht-labels\"&gt;Temperature&lt;\/span&gt;<\/code><\/pre>\n\n\n\n<p>The TEMPERATURE text between % signs is a placeholder for the temperature value. <\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;span id=\"temperature\"&gt;%TEMPERATURE%&lt;\/span&gt;<\/code><\/pre>\n\n\n\n<p>This means that this <strong>%TEMPERATURE%<\/strong> text is like a variable that will be replaced by the actual temperature value from the DHT sensor. The placeholders on the HTML text should go between % signs. <\/p>\n\n\n\n<p>Finally, we add the degree symbol.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;sup class=\"units\"&gt;\u00b0C&lt;\/sup&gt;<\/code><\/pre>\n\n\n\n<p>The <span style=\"color: #333399;\">&lt;sup&gt;&lt;<\/span><span style=\"color: #333399;\">\/sup&gt;<\/span> tags make the text superscript. <\/p>\n\n\n\n<p class=\"language-c\">We use the same approach for the humidity paragraph, but it uses a different icon and the <strong>%HUMIDITY%<\/strong> placeholder.<br><\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;p&gt;\n  &lt;i class=\"fas fa-tint\" style=\"color:#00add6;\"&gt;&lt;\/i&gt; \n  &lt;span class=\"dht-labels\"&gt;Humidity&lt;\/span&gt;\n  &lt;span id=\"humidity\"&gt;%HUMIDITY%&lt;\/span&gt;\n  &lt;sup class=\"units\"&gt;%&lt;\/sup&gt;\n&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Automatic Updates<\/h3>\n\n\n\n<p>Finally, there\u2019s some JavaScript code in our web page that updates the temperature and humidity automatically, every 10 seconds. <\/p>\n\n\n\n<p>Scripts in HTML text should go between the <span style=\"color: #333399;\">&lt;script&gt;&lt;\/script&gt;<\/span> tags.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;script&gt;\nsetInterval(function ( ) {\n  var xhttp = new XMLHttpRequest();\n  xhttp.onreadystatechange = function() {\n    if (this.readyState == 4 &amp;&amp; this.status == 200) {\n      document.getElementById(\"temperature\").innerHTML = this.responseText;\n    }\n  };\n  xhttp.open(\"GET\", \"\/temperature\", true);\n  xhttp.send();\n}, 10000 ) ;\n\nsetInterval(function ( ) {\n  var xhttp = new XMLHttpRequest();\n  xhttp.onreadystatechange = function() {\n    if (this.readyState == 4 &amp;&amp; this.status == 200) {\n      document.getElementById(\"humidity\").innerHTML = this.responseText;\n    }\n  };\n  xhttp.open(\"GET\", \"\/humidity\", true);\n  xhttp.send();\n}, 10000 ) ;\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>To update the temperature on the background, we have a <span class=\"rnthl rntliteral\">setInterval()<\/span> function that runs every 10 seconds. <\/p>\n\n\n\n<p>Basically, it makes a request in the <em>\/temperature<\/em> URL to get the latest temperature reading. <\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>  xhttp.open(\"GET\", \"\/temperature\", true);\n  xhttp.send();\n}, 10000 ) ;<\/code><\/pre>\n\n\n\n<p>When it receives that value, it updates the HTML element whose id is <span class=\"rnthl rntliteral\">temperature<\/span>. <\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>if (this.readyState == 4 &amp;&amp; this.status == 200) {\n  document.getElementById(\"temperature\").innerHTML = this.responseText;\n}<\/code><\/pre>\n\n\n\n<p>In summary, this previous section is responsible for updating the temperature asynchronously. The same process is repeated for the humidity readings.<\/p>\n\n\n\n<p class=\"rntbox rntcred\"><strong>Important: <\/strong> since the DHT sensor is quite slow getting the readings, if you plan to have multiple clients connected to an ESP32 at the same time, we recommend increasing the request interval or remove the automatic updates.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Processor<\/h3>\n\n\n\n<p>Now, we need to create the <span class=\"rnthl rntliteral\">processor()<\/span> function, that will replace the placeholders in our HTML text with the actual temperature and humidity values.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>String processor(const String&amp; var){\n  \/\/Serial.println(var);\n  if(var == \"TEMPERATURE\"){\n    return readDHTTemperature();\n  }\n  else if(var == \"HUMIDITY\"){\n    return readDHTHumidity();\n  }\n  return String();\n}<\/code><\/pre>\n\n\n\n<p>When the web page is requested, we check if the HTML has any placeholders. If it finds the <strong>%TEMPERATURE%<\/strong> placeholder, we return the temperature by calling the <span class=\"rnthl rntliteral\">readDHTTemperature()<\/span> function created previously.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>if(var == \"TEMPERATURE\"){\n  return readDHTTemperature();\n}<\/code><\/pre>\n\n\n\n<p>If the placeholder is <strong>%HUMIDITY%<\/strong>, we return the humidity value.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>else if(var == \"HUMIDITY\"){\n  return readDHTHumidity();\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">setup()<\/h3>\n\n\n\n<p>In the <span class=\"rnthl rntliteral\">setup(),<\/span> initialize the Serial Monitor for debugging purposes.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>Serial.begin(115200);<\/code><\/pre>\n\n\n\n<p>Initialize the DHT sensor.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>dht.begin();<\/code><\/pre>\n\n\n\n<p>Connect to your local network and print the ESP32 IP address.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>WiFi.begin(ssid, password);\nwhile (WiFi.status() != WL_CONNECTED) {\n  delay(1000);\n  Serial.println(\"Connecting to WiFi..\");\n}<\/code><\/pre>\n\n\n\n<p>Finally, add the next lines of code to handle the web server.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>server.on(\"\/\", HTTP_GET, &#091;](AsyncWebServerRequest *request){\n  request-&gt;send_P(200, \"text\/html\", index_html, processor);\n});\nserver.on(\"\/temperature\", HTTP_GET, &#091;](AsyncWebServerRequest *request){\n  request-&gt;send_P(200, \"text\/plain\", readDHTTemperature().c_str());\n});\nserver.on(\"\/humidity\", HTTP_GET, &#091;](AsyncWebServerRequest *request){\n  request-&gt;send_P(200, \"text\/plain\", readDHTHumidity().c_str());\n});<\/code><\/pre>\n\n\n\n<p>When we make a request on the root URL, we send the HTML text that is stored on the <span class=\"rnthl rntliteral\">index_html<\/span> variable. We also need to pass the <span class=\"rnthl rntliteral\">processor<\/span>function, that will replace all the placeholders with the right values.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>server.on(\"\/\", HTTP_GET, &#091;](AsyncWebServerRequest *request){\n  request-&gt;send_P(200, \"text\/html\", index_html, processor);\n});<\/code><\/pre>\n\n\n\n<p>We need to add two additional handlers to update the temperature and humidity readings. When we receive a request on the <em>\/temperature<\/em> URL, we simply need to send the updated temperature value. It is plain text, and it should be sent as a char, so, we use the <span class=\"rnthl rntliteral\">c_str()<\/span> method.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>server.on(\"\/temperature\", HTTP_GET, &#091;](AsyncWebServerRequest *request){\n  request-&gt;send_P(200, \"text\/plain\", readDHTTemperature().c_str());\n});<\/code><\/pre>\n\n\n\n<p>The same process is repeated for the humidity.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>server.on(\"\/humidity\", HTTP_GET, &#091;](AsyncWebServerRequest *request){\n  request-&gt;send_P(200, \"text\/plain\", readDHTHumidity().c_str());\n});<\/code><\/pre>\n\n\n\n<p>Lastly, we can start the server.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>server.begin();<\/code><\/pre>\n\n\n\n<p>Because this is an asynchronous web server, we don\u2019t need to write anything in the <span class=\"rnthl rntliteral\">loop()<\/span>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>void loop(){\n\n}<\/code><\/pre>\n\n\n\n<p>That\u2019s pretty much how the code works.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Upload the Code<\/h2>\n\n\n\n<p>Now, upload the code to your ESP32. Make sure you have the right board and COM port selected. <\/p>\n\n\n\n<p>After uploading, open the Serial Monitor at a baud rate of 115200. Press the ESP32 reset button. The ESP32 IP address should be printed in the serial monitor.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"764\" height=\"577\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/ESP32-DHT11-DHT22-Web-Server-Arduino-IDE.png?resize=764%2C577&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Upload the DHT11 DHT22 ESP32 Sketch Code Example\" class=\"wp-image-83533\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/ESP32-DHT11-DHT22-Web-Server-Arduino-IDE.png?w=764&amp;quality=100&amp;strip=all&amp;ssl=1 764w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/ESP32-DHT11-DHT22-Web-Server-Arduino-IDE.png?resize=300%2C227&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 764px) 100vw, 764px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\">Web Server Demonstration<\/h2>\n\n\n\n<p>Open a browser and type the ESP32 IP address. Your web server should display the latest sensor readings. <\/p>\n\n\n\n<p>Notice that the temperature and humidity readings are updated automatically without the need to refresh the web page.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"500\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/esp32-web-server-asynchronous-demonstration.jpg?resize=750%2C500&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 DHT11\/DHT22 Web Server - Temperature and Humidity using Arduino IDE Demonstration\" class=\"wp-image-83534\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/esp32-web-server-asynchronous-demonstration.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/esp32-web-server-asynchronous-demonstration.jpg?resize=300%2C200&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">Troubleshooting<\/h3>\n\n\n\n<p>If your DHT sensor fails to get the readings, read our&nbsp;<a href=\"https:\/\/randomnerdtutorials.com\/solved-dht11-dht22-failed-to-read-from-dht-sensor\/\"><strong>DHT Troubleshooting Guide<\/strong><\/a>&nbsp;to help you fix the issue.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>In this tutorial we&#8217;ve shown you how to build an asynchronous web server with the ESP32 to display sensor readings from a DHT11 or DHT22 sensor and how to update the readings automatically. <\/p>\n\n\n\n<p>If you liked this project, you may also like:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/randomnerdtutorials.com\/learn-esp32-with-arduino-ide\/\">Learn ESP32 with Arduino IDE (course)<\/a><\/strong><\/li>\n\n\n\n<li><a href=\"https:\/\/rntlab.com\/build-an-esp32-web-server-using-files-from-filesystem-spiffs\/\">Build an ESP32 Web Server using Files from Filesystem (SPIFFS)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-web-server-arduino-ide\/\">ESP32 Web Server &#8211; control outputs<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-deep-sleep-arduino-ide-wake-up-sources\/\">ESP32 Deep Sleep with Arduino IDE and Wake Up Sources<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"rntbox rntclgray\">This tutorial is a preview of the \u201c<a href=\"https:\/\/randomnerdtutorials.com\/learn-esp32-with-arduino-ide\/\">Learn ESP32 with Arduino IDE<\/a>\u201d course. If you like this project, make sure you take a look at the <a href=\"https:\/\/randomnerdtutorials.com\/learn-esp32-with-arduino-ide\/\">ESP32 course page<\/a> where we cover this and a lot more topics with the ESP32.<br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this project, you&#8217;ll learn how to build an asynchronous ESP32 web server with the DHT11 or DHT22 that displays temperature and humidity using Arduino IDE. The web server we\u2019ll &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"ESP32 DHT11\/DHT22 Web Server &#8211; Temperature and Humidity using Arduino IDE\" class=\"read-more button\" href=\"https:\/\/randomnerdtutorials.com\/esp32-dht11-dht22-temperature-humidity-web-server-arduino-ide\/#more-39319\" aria-label=\"Read more about ESP32 DHT11\/DHT22 Web Server &#8211; Temperature and Humidity using Arduino IDE\">CONTINUE READING \u00bb<\/a><\/p>\n","protected":false},"author":1,"featured_media":83536,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[276,281,277,299,264,215,257],"tags":[],"class_list":["post-39319","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-esp32","category-esp32-project","category-esp32-arduino-ide","category-0-esp32","category-project","category-sensors","category-web-server-2"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/ESP32-DHT11-DHT22-Web-Server-Arduino-IDE-featured-image.jpg?fit=1280%2C720&quality=100&strip=all&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/39319","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/comments?post=39319"}],"version-history":[{"count":2,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/39319\/revisions"}],"predecessor-version":[{"id":167999,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/39319\/revisions\/167999"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media\/83536"}],"wp:attachment":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media?parent=39319"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/categories?post=39319"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/tags?post=39319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}