ESP32 DHT11/DHT22 웹 서버 - Arduino IDE를 사용한 온도 및 습도
이 프로젝트에서는 Arduino IDE를 사용하여 온도 및 습도를 표시하는 DHT11 또는 DHT22를 사용하여 비동기 ESP32 웹 서버를 빌드하는 방법을 알아봅니다.
ESP32 DHT11/DHT22 웹 서버 - Arduino IDE를 사용한 온도 및 습도
우리가 빌드할 웹 서버는 웹 페이지를 새로 고칠 필요 없이 자동으로 판독값을 업데이트합니다.
이 프로젝트에서는 다음을 학습합니다.
DHT 센서에서 온도 및 습도를 읽는 방법;
ESPAsyncWebServer 라이브러리를 사용하여 비동기 웹 서버를 빌드합니다.
웹 페이지를 새로 고칠 필요 없이 자동으로 센서 판독값을 업데이트합니다.
ESP32와 함께 DHT22 및 DHT11 온도 및 습도 센서를 사용하는 방법에 대한 자세한 설명은 전체 가이드를 읽어보세요: Arduino IDE를 사용한 DHT11/DHT22 온도 및 습도 센서가 있는 ESP32
비디오 튜토리얼 보기
비디오 튜토리얼을 보거나 이 페이지를 계속 읽어 서면 지침을 확인하세요.
비동기 웹 서버
웹 서버를 빌드하기 위해 비동기 웹 서버를 빌드하는 간편한 방법을 제공하는 ESPAsyncWebServer 라이브러리를 사용합니다. 비동기 웹 서버를 빌드하는 데는 라이브러리 GitHub 페이지에 언급된 것처럼 다음과 같은 여러 가지 이점이 있습니다.
"동시에 두 개 이상의 연결 처리";
"응답을 보내면 서버가 백그라운드에서 응답을 보내는 동안 다른 연결을 즉시 처리할 준비가 됩니다";
"템플릿을 처리하는 간단한 템플릿 처리 엔진";
그리고 훨씬 더 많은 이점이 있습니다.
GitHub 페이지에서 라이브러리 문서를 살펴보세요.
필요한 부품
ESP32 DHT11 DHT22 온도 및 습도 Arduino IDE 회로도
이 튜토리얼을 완료하려면 다음 부품이 필요합니다.
ESP32 개발 보드(ESP32 개발 보드 비교 참조)
DHT22 또는 DHT11 온도 및 습도 센서
4.7kΩ 저항기
브레드보드
점퍼 와이어
회로도
웹 서버로 진행하기 전에 다음 회로도에 표시된 대로 DHT11 또는 DHT22 센서를 ESP32에 연결해야 합니다.
이 경우 데이터 핀을 GPIO 27에 연결하지만 다른 디지털 핀에 연결할 수 있습니다. 이 회로도는 DHT11 및 DHT22 센서 모두에 사용할 수 있습니다.
ESP32 DHT11 DHT22 온도 및 습도 Arduino IDE 회로도
(이 회로도는 36개의 GPIO가 있는 ESP32 DEVKIT V1 모듈 버전을 사용합니다. 다른 모델을 사용하는 경우 사용하는 보드의 핀아웃을 확인하세요.)
참고: DHT 센서가 있는 모듈을 사용하는 경우 일반적으로 핀이 3개만 제공됩니다. 핀에는 배선 방법을 알 수 있도록 레이블이 지정되어 있어야 합니다. 또한 이러한 모듈 중 다수는 이미 내부 풀업 저항이 제공되므로 회로에 추가할 필요가 없습니다.
라이브러리 설치
이 프로젝트에는 몇 가지 라이브러리를 설치해야 합니다.
DHT 센서에서 읽기 위한 DHT 및 Adafruit Unified Sensor Driver 라이브러리.
비동기 웹 서버를 빌드하기 위한 ESPAsyncWebServer 및 Async TCP 라이브러리.
다음 지침에 따라 라이브러리를 설치하세요.
DHT 센서 라이브러리 설치
Arduino IDE를 사용하여 DHT 센서에서 읽으려면 DHT 센서 라이브러리를 설치해야 합니다. 다음 단계에 따라 라이브러리를 설치하세요.
1. 여기를 클릭하여 DHT 센서 라이브러리를 다운로드하세요. 다운로드 폴더에 .zip 폴더가 있어야 합니다.
2. .zip 폴더의 압축을 풀면 DHT-sensor-library-master 폴더가 있어야 합니다.
3. 폴더 이름을 DHT-sensor-library-master에서 DHT_sensor로 변경합니다.
4. DHT_sensor 폴더를 Arduino IDE 설치 라이브러리 폴더로 이동합니다.
5. 마지막으로 Arduino IDE를 다시 엽니다.
Adafruit Unified Sensor Driver 설치
DHT 센서와 함께 작동하려면 Adafruit Unified Sensor Driver 라이브러리도 설치해야 합니다. 다음 단계에 따라 라이브러리를 설치하세요.
- 여기를 클릭하여 Adafruit Unified Sensor 라이브러리를 다운로드하세요. 다운로드 폴더에 .zip 폴더가 있어야 합니다.
- .zip 폴더의 압축을 풀면 Adafruit_sensor-master 폴더가 있어야 합니다.
- 폴더의 이름을 Adafruit_sensor-master에서 Adafruit_sensor로 변경합니다.
- Adafruit_sensor 폴더를 Arduino IDE 설치 라이브러리 폴더로 이동합니다.
- 마지막으로 Arduino IDE를 다시 엽니다.
ESPAsyncWebServer 라이브러리 설치
다음 단계에 따라 ESPAsyncWebServer 라이브러리를 설치합니다.
여기를 클릭하여 ESPAsyncWebServer 라이브러리를 다운로드합니다. 다운로드 폴더에 .zip 폴더가 있어야 합니다.
.zip 폴더의 압축을 풀면 ESPAsyncWebServer-master 폴더가 있어야 합니다.
폴더의 이름을 ESPAsyncWebServer-master에서 ESPAsyncWebServer로 변경합니다.
ESPAsyncWebServer 폴더를 Arduino IDE 설치 라이브러리 폴더로 이동합니다.
ESP32용 비동기 TCP 라이브러리 설치
ESPAsyncWebServer 라이브러리는 작동하려면 AsyncTCP 라이브러리가 필요합니다. 다음 단계에 따라 해당 라이브러리를 설치하세요.
여기를 클릭하여 AsyncTCP 라이브러리를 다운로드하세요. 다운로드 폴더에 .zip 폴더가 있어야 합니다.
.zip 폴더의 압축을 풀면 AsyncTCP-master 폴더가 나옵니다.
폴더 이름을 AsyncTCP-master에서 AsyncTCP로 바꿉니다.
AsyncTCP 폴더를 Arduino IDE 설치 라이브러리 폴더로 옮깁니다.
마지막으로 Arduino IDE를 다시 엽니다.
코드
Arduino IDE를 사용하여 ESP32를 프로그래밍하므로 계속하기 전에 ESP32 애드온이 설치되어 있는지 확인하세요.
Arduino IDE에 ESP32 보드 설치(Windows, Mac 및 Linux 지침)
Arduino IDE를 열고 다음 코드를 복사합니다.
/*********
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(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(){
}
다음 변수에 네트워크 자격 증명을 삽입하면 코드가 바로 작동합니다.
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
코드 작동 방식
다음 단락에서는 코드 작동 방식을 설명합니다. 자세히 알아보려면 계속 읽거나 데모 섹션으로 이동하여 최종 결과를 확인하세요.
라이브러리 가져오기
먼저 필요한 라이브러리를 가져옵니다. WiFi, ESPAsyncWebServer 및 ESPAsyncTCP는 웹 서버를 빌드하는 데 필요합니다. Adafruit_Sensor 및 DHTlibraries는 DHT11 또는 DHT22 센서에서 읽는 데 필요합니다.
#include "WiFi.h"
#include "ESPAsyncWebServer.h"
#include <ESPAsyncTCP.h>
#include <Adafruit_Sensor.h>
#include <DHT.h>
네트워크 자격 증명 설정
ESP32가 로컬 네트워크에 연결할 수 있도록 다음 변수에 네트워크 자격 증명을 삽입합니다.
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
변수 정의
DHT 데이터 핀이 연결된 GPIO를 정의합니다. 이 경우 GPIO 27에 연결됩니다.
#define DHTPIN 27 // DHT 센서에 연결된 디지털 핀
그런 다음 사용 중인 DHT 센서 유형을 선택합니다. 이 예에서는 DHT22를 사용합니다. 다른 유형을 사용하는 경우 센서의 주석 처리를 해제하고 다른 모든 센서의 주석 처리를 해제하기만 하면 됩니다.
#define DHTTYPE DHT22 // DHT 22 (AM2302)
이전에 정의한 유형과 핀으로 DHTobject를 인스턴스화합니다.
DHT dht(DHTPIN, DHTTYPE);
포트 80에서 AsyncWebServerobject를 만듭니다.
AsyncWebServer server(80);
온도 및 습도 함수 읽기
두 가지 함수를 만들었습니다. 하나는 온도를 읽는 함수(readDHTTemperature())이고 다른 하나는 습도를 읽는 함수(readDHTHumidity())입니다.
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);
}
}
센서 판독값을 얻는 것은 dht 객체에서 readTemperature() 및 readHumidity() 메서드를 사용하는 것만큼 간단합니다.
float t = dht.readTemperature();
float h = dht.readHumidity();
센서가 판독값을 얻지 못하는 경우 두 개의 대시(-)를 반환하는 조건도 있습니다.
if (isnan(t)) {
Serial.println("Failed to read from DHT sensor!");
return "--";
}
판독값은 문자열 유형으로 반환됩니다. float를 문자열로 변환하려면 String() 함수를 사용합니다.
return String(t);
기본적으로 섭씨 온도로 온도를 읽습니다. 화씨 온도로 온도를 얻으려면 섭씨 온도에 주석을 달고 화씨 온도의 주석을 제거하여 다음을 얻습니다.
//float t = dht.readTemperature();
// Read temperature as Fahrenheit (isFahrenheit = true)
float t = dht.readTemperature(true);
웹 페이지 구축
웹 서버 페이지로 이동합니다.
ESP32 DHT11 DHT22 온도 및 습도 웹 페이지
위의 그림에서 볼 수 있듯이 웹 페이지에는 제목 하나와 문단 두 개가 표시됩니다. 온도를 표시하는 문단과 습도를 표시하는 문단이 있습니다. 또한 페이지 스타일을 지정하는 두 개의 아이콘이 있습니다.
이 웹 페이지가 어떻게 생성되는지 살펴보겠습니다.
스타일이 포함된 모든 HTML 텍스트는 index_html 변수에 저장됩니다. 이제 HTML 텍스트를 살펴보고 각 부분이 무엇을 하는지 살펴보겠습니다.
다음 meta 태그는 모든 브라우저에서 웹 페이지를 반응형으로 만듭니다.
<meta name="viewport" content="width=device-width, initial-scale=1">
link 태그는 fontawesome 웹사이트에서 아이콘을 로드하는 데 필요합니다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
스타일
style 태그 사이에 CSS를 추가하여 웹 페이지 스타일을 지정합니다.
<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>
기본적으로, 우리는 HTML 페이지를 설정하여 여백 없이 블록으로 Arial 글꼴로 텍스트를 표시하고, 중앙에 정렬합니다.
html {
font-family: Arial;
display: inline-block;
margin: 0px auto;
text-align: center;
}
우리는 제목(h2), 문단(p) 및 판독 단위(.units)의 글꼴 크기를 설정합니다.
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;
}
이전 태그는 모두와태그 사이에 있어야 합니다. 이러한 태그는, 태그 및 스타일과 같이 사용자에게 직접 보이지 않는 콘텐츠를 포함하는 데 사용됩니다.
HTML 본문
body 태그 내부에 웹 페이지 콘텐츠를 추가합니다.
h2 태그는 웹 페이지에 제목을 추가합니다. 이 경우 "ESP32 DHT 서버" 텍스트이지만 다른 텍스트를 추가할 수 있습니다.
<h2>ESP32 DHT Server</h2>ESP32 DHT 서버
그런 다음 두 개의 문단이 있습니다. 하나는 온도를 표시하고 다른 하나는 습도를 표시합니다. 문단은 p 태그로 구분됩니다. 온도에 대한 문단은 다음과 같습니다.
<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>
i 태그는 fontawesome 아이콘을 표시합니다.
아이콘을 표시하는 방법
아이콘을 선택하려면 Font Awesome Icons 웹사이트로 이동합니다.
Font Awesome Icons 웹사이트
찾고 있는 아이콘을 검색합니다. 예를 들어, "thermometer".
Font Awesome Icons 웹사이트 thermometer
원하는 아이콘을 클릭합니다. 그런 다음 제공된 HTML 텍스트를 복사하기만 하면 됩니다.
<i class="fas fa-thermometer-half">
Font Awesome Icons 웹사이트 thermometer half
색상을 선택하려면 다음과 같이 16진수 색상과 함께 스타일 매개변수를 전달하기만 하면 됩니다.
<i class="fas fa-tint" style="color:#00add6;"></i>HTML 텍스트로 진행…
다음 줄은 웹 페이지에 "Temperature"라는 단어를 씁니다.
<span class="dht-labels">Temperature</span>
% 기호 사이의 TEMPERATURE 텍스트는 온도 값의 플레이스홀더입니다.
<span id="temperature">%TEMPERATURE%</span>
즉, 이 %TEMPERATURE% 텍스트는 DHT 센서의 실제 온도 값으로 대체되는 변수와 같습니다. HTML 텍스트의 플레이스홀더는 % 기호 사이에 있어야 합니다.
마지막으로, 도수 기호를 추가합니다.
<sup class="units">°C</sup>
sup 태그는 텍스트를 상위 첨자로 만듭니다.
습도 단락에도 동일한 접근 방식을 사용하지만 다른 아이콘과 %HUMIDITY% 플레이스홀더를 사용합니다.
<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>
자동 업데이트
마지막으로, 웹 페이지에 10초마다 온도와 습도를 자동으로 업데이트하는 JavaScript 코드가 있습니다.
HTML 텍스트의 스크립트는 script 태그 사이에 있어야 합니다.
<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>
백그라운드에서 온도를 업데이트하기 위해 10초마다 실행되는 setInterval() 함수가 있습니다.
기본적으로 /temperature URL에서 최신 온도 판독값을 얻기 위해 요청을 합니다.
xhttp.open("GET", "/temperature", true);
xhttp.send();
}, 10000 ) ;
해당 값을 받으면 ID가 temperature인 HTML 요소를 업데이트합니다.
if (this.readyState == 4 && this.status == 200) {
document.getElementById("temperature").innerHTML = this.responseText;
}
요약하자면, 이전 섹션은 비동기적으로 온도를 업데이트하는 역할을 합니다. 습도 판독값에도 동일한 프로세스가 반복됩니다.
중요: DHT 센서는 판독값을 얻는 데 매우 느리므로 여러 클라이언트를 동시에 ESP32에 연결하려는 경우 요청 간격을 늘리거나 자동 업데이트를 제거하는 것이 좋습니다.
프로세서
이제 HTML 텍스트의 플레이스홀더를 실제 온도 및 습도 값으로 대체하는 프로세서() 함수를 만들어야 합니다.
String processor(const String& var){
//Serial.println(var);
if(var == "TEMPERATURE"){
return readDHTTemperature();
}
else if(var == "HUMIDITY"){
return readDHTHumidity();
}
return String();
}
웹 페이지가 요청되면 HTML에 플레이스홀더가 있는지 확인합니다. %TEMPERATURE% 플레이스홀더를 찾으면 이전에 만든 readDHTTemperature() 함수를 호출하여 온도를 반환합니다.
if(var == "TEMPERATURE"){
return readDHTTemperature();
}
플레이스홀더가 %HUMIDITY%이면 습도 값을 반환합니다.
else if(var == "HUMIDITY"){
return readDHTHumidity();
}
setup()
setup()에서 디버깅 목적으로 직렬 모니터를 초기화합니다.
Serial.begin(115200);
DHT 센서를 초기화합니다.
dht.begin();
로컬 네트워크에 연결하고 ESP32 IP 주소를 출력합니다.
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}
마지막으로 웹 서버를 처리하기 위한 다음 코드 줄을 추가합니다.
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());
});
루트 URL에서 요청을 하면 index_html 변수에 저장된 HTML 텍스트를 보냅니다. 또한 모든 플레이스홀더를 올바른 값으로 대체하는 프로세서 함수를 전달해야 합니다.
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html, processor);
});
온도 및 습도 판독값을 업데이트하기 위해 두 개의 추가 핸들러를 추가해야 합니다. /temperature URL에서 요청을 받으면 업데이트된 온도 값을 보내기만 하면 됩니다. 일반 텍스트이며 char로 보내야 하므로 c_str() 메서드를 사용합니다.
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());
});
마지막으로 서버를 시작할 수 있습니다.
server.begin();
비동기 웹 서버이므로 loop()에 아무것도 쓸 필요가 없습니다.
void loop(){ }
이것이 코드의 작동 방식입니다.
코드 업로드
이제 ESP32에 코드를 업로드합니다. 올바른 보드와 COM 포트를 선택했는지 확인합니다.
업로드 후 115200의 전송 속도로 직렬 모니터를 엽니다. ESP32 재설정 버튼을 누릅니다. ESP32 IP 주소가 직렬 모니터에 인쇄되어야 합니다.
DHT11 DHT22 ESP32 스케치 코드 예제 업로드 웹 서버 데모
브라우저를 열고 ESP32 IP 주소를 입력합니다. 웹 서버에 최신 센서 판독값이 표시됩니다.
온도 및 습도 판독값이 웹 페이지를 새로 고칠 필요 없이 자동으로 업데이트됩니다.
ESP32 DHT11/DHT22 웹 서버 - Arduino IDE를 사용한 온도 및 습도 데모
문제 해결
DHT 센서가 판독값을 가져오지 못하는 경우 DHT 문제 해결 가이드를 읽고 문제를 해결하세요.
마무리
이 튜토리얼에서는 ESP32로 비동기 웹 서버를 빌드하여 DHT11 또는 DHT22 센서의 센서 판독값을 표시하는 방법과 판독값을 자동으로 업데이트하는 방법을 보여드렸습니다.
이 프로젝트가 마음에 드셨다면 다음도 마음에 드실 수 있습니다.
Arduino IDE로 ESP32 배우기(과정)
파일 시스템의 파일을 사용하여 ESP32 웹 서버 구축(SPIFFS)
ESP32 웹 서버 - 제어 출력
Arduino IDE 및 웨이크업 소스를 사용한 ESP32 딥 슬립
이 튜토리얼은 "Arduino IDE로 ESP32 배우기" 과정의 미리보기입니다. 이 프로젝트가 마음에 드셨다면 ESP32 과정 페이지를 꼭 살펴보세요. 이 페이지에서는 ESP32와 관련된 이 주제와 더 많은 주제를 다룹니다.
'ESP32' 카테고리의 다른 글
| 서보 모터 제어 웹 서버 구축 Servo Web Server (0) | 2025.01.24 |
|---|---|
| ESP32 핀맵, 핀할당, Pinout 참고 이미지 (0) | 2025.01.17 |
| ESP32 의 참조 링크 (2) | 2025.01.17 |
| ESP32 아두이노 IDE 에서 사용하기 (0) | 2025.01.17 |
| Relay Web Server (1) | 2025.01.17 |
| PWM32 비동기 웹 서버 ESPAsyncWebServer 라이브러리 (1) | 2025.01.17 |
| ESP32 웹 서버(WebSocket): Multiple Slider LED 밝기 제어(PWM) (2) | 2025.01.15 |
| ESP32 슬라이더가 있는 웹 서버: LED 밝기 제어(PWM) (0) | 2025.01.15 |
더욱 좋은 정보를 제공하겠습니다.~ ^^
