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 센서 드라이버 기본 클래스

📡 Wi-Fi 연결 정보 설정

const char* ssid = "네트워크_SSID";
const char* password = "네트워크_비밀번호";
  • 실습 시 스마트폰 핫스팟 또는 공유기 SSID와 비밀번호로 변경

🌡 DHT 센서 설정

#define DHTPIN 18     // 센서 데이터 핀
#define DHTTYPE DHT11 // 센서 타입
DHT dht(DHTPIN, DHTTYPE); // 센서 객체 생성
  • DHTPIN: ESP32의 18번 핀에 센서 연결
  • DHT11, DHT22, DHT21 중 사용 센서에 따라 수정 가능

🌐 웹서버 객체 생성

AsyncWebServer server(80);
  • 포트 80에서 HTTP 요청 수신하는 비동기 웹서버 객체

🔧 DHT 센서 읽기 함수

온도

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() → 센서 실패 시 안전하게 "--" 반환

🧠 HTML 웹페이지 템플릿

const char index_html[] PROGMEM = R"rawliteral( ... )rawliteral";

특징


🔄 템플릿 변수 치환 함수

String processor(const String& var){
  if (var == "TEMPERATURE") return readDHTTemperature();
  if (var == "HUMIDITY") return readDHTHumidity();
  return String();
}
  • 웹페이지 전송 시 %TEMPERATURE%%HUMIDITY%를 실제 값으로 바꿔줌

🚀 setup()에서 수행되는 일

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으로 실시간 센서값 전달)

🔁 loop()

void loop() { }
  • 비동기 웹서버이므로 loop()에는 아무것도 없어도 됨
    (클라이언트 요청은 이벤트 기반으로 자동 처리됨)

🖥 웹 브라우저에서 동작 방식 요약

  1. 사용자 → http://ESP32_IP/ 접속
  2. ESP32 → HTML 페이지 전송
  3. 웹페이지 내부 JS → /temperature, /humidity로 AJAX 요청
  4. ESP32 → 실시간 센서값을 문자로 응답
  5. 웹페이지 → <span> 태그 내용 갱신

🧪 실습 시 주의사항

항목 내용
Wi-Fi 스마트폰 핫스팟 사용 가능 (STA 모드)
DHT 센서 5V or 3.3V 연결 주의, 데이터 핀은 DHTPIN과 일치해야
크로스도메인 문제 없음 같은 장치에서 요청함으로 문제 없음

✅ 확장 아이디어

  • /json 엔드포인트 추가 → { "temp": 23.5, "hum": 45 } 형식 반환
  • LED ON/OFF 제어 버튼 추가
  • /history로 시간별 센서 데이터 기록
  • MicroSD 저장 + 나중에 그래프 출력

⚠️ **GitHub.com Fallback** ⚠️