7주차_참고 : 실시간 온도 습도 데이터를 표시하는 ESP32 코드 - dhryu60/SmartDevice_2025-1 GitHub Wiki
ESP32와 DHT11 센서를 이용해 웹페이지에 실시간 온도/습도 데이터를 표시하는 ESP32 코드
- AJAX(비동기 요청)을 이용해 값이 자동으로 갱신되는 웹 대시보드를 구현.
구성 요소 | 설명 |
---|---|
📡 Wi-Fi 연결 | ESP32를 STA 모드로 스마트폰/공유기에 연결 |
🌡 DHT11 센서 | 온도 및 습도 측정 |
🌐 웹 서버 | 웹페이지 제공 및 /temperature , /humidity 요청 처리 |
🧠 JavaScript (AJAX) | 웹페이지에서 주기적으로 값을 요청해 자동으로 UI 갱신 |
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebSrv.h>
#include <Adafruit_Sensor.h>
#include <DHT.h>
-
WiFi.h
: ESP32 Wi-Fi 연결 -
AsyncTCP.h
,ESPAsyncWebSrv.h
: 비동기 웹서버 구현용 -
DHT.h
: DHT11/22 센서 데이터 읽기 -
Adafruit_Sensor.h
: Adafruit 센서 드라이버 기본 클래스
const char* ssid = "네트워크_SSID";
const char* password = "네트워크_비밀번호";
- 실습 시 스마트폰 핫스팟 또는 공유기 SSID와 비밀번호로 변경
#define DHTPIN 18 // 센서 데이터 핀
#define DHTTYPE DHT11 // 센서 타입
DHT dht(DHTPIN, DHTTYPE); // 센서 객체 생성
-
DHTPIN
: ESP32의 18번 핀에 센서 연결 -
DHT11
,DHT22
,DHT21
중 사용 센서에 따라 수정 가능
AsyncWebServer server(80);
- 포트
80
에서 HTTP 요청 수신하는 비동기 웹서버 객체
String readDHTTemperature() {
float t = dht.readTemperature(); // 섭씨 온도 읽기
if (isnan(t)) return "--";
return String(t);
}
String readDHTHumidity() {
float h = dht.readHumidity();
if (isnan(h)) return "--";
return String(h);
}
- 센서에서 값을 읽어 문자열로 반환
-
isnan()
→ 센서 실패 시 안전하게"--"
반환
const char index_html[] PROGMEM = R"rawliteral( ... )rawliteral";
-
센서값 자리표시자:
%TEMPERATURE%
,%HUMIDITY%
-
폰트 아이콘 사용:
fontawesome
-
AJAX 스크립트로
/temperature
,/humidity
에 요청하여 실시간 업데이트
String processor(const String& var){
if (var == "TEMPERATURE") return readDHTTemperature();
if (var == "HUMIDITY") return readDHTHumidity();
return String();
}
- 웹페이지 전송 시
%TEMPERATURE%
와%HUMIDITY%
를 실제 값으로 바꿔줌
Serial.begin(115200);
dht.begin();
WiFi.begin(ssid, password);
- 시리얼 시작 → 디버깅
- DHT 센서 초기화
- Wi-Fi 연결 시도 → 성공 시 IP 주소 출력
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){ ... });
-
/
→ HTML 웹페이지 전송 (템플릿 처리 포함)
server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){ ... });
server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){ ... });
- 각각 AJAX 요청에 응답 (text/plain으로 실시간 센서값 전달)
void loop() { }
-
비동기 웹서버이므로 loop()에는 아무것도 없어도 됨
(클라이언트 요청은 이벤트 기반으로 자동 처리됨)
- 사용자 →
http://ESP32_IP/
접속 - ESP32 → HTML 페이지 전송
- 웹페이지 내부 JS →
/temperature
,/humidity
로 AJAX 요청 - ESP32 → 실시간 센서값을 문자로 응답
- 웹페이지 →
<span>
태그 내용 갱신
항목 | 내용 |
---|---|
Wi-Fi | 스마트폰 핫스팟 사용 가능 (STA 모드) |
DHT 센서 | 5V or 3.3V 연결 주의, 데이터 핀은 DHTPIN과 일치해야 |
크로스도메인 문제 없음 | 같은 장치에서 요청함으로 문제 없음 |
-
/json
엔드포인트 추가 →{ "temp": 23.5, "hum": 45 }
형식 반환 -
LED ON/OFF
제어 버튼 추가 -
/history
로 시간별 센서 데이터 기록 - MicroSD 저장 + 나중에 그래프 출력