6주차_참고 : 내장 LED를 제어하는 웹서버 - dhryu60/SmartDevice_2025-1 GitHub Wiki
- 비동기 웹 서버(
ESPAsyncWebServer) 방식이라 더 빠르고 실시간 반응성이 좋음
- ESP32가 Wi-Fi에 연결되고,
-
/경로에 접속하면 웹 페이지를 보여주며, - 버튼 클릭으로 GPIO 2번 핀을 ON/OFF 제어 가능 (내장 LED도 해당됨)
- 버튼 상태와 텍스트는 동적으로 바뀜 (템플릿 처리)
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebSrv.h>-
WiFi.h: ESP32의 Wi-Fi 기능 제공 -
AsyncTCP.h: 비동기 TCP 통신 지원 -
ESPAsyncWebSrv.h: 비동기 웹서버 구현 (빠르고 효율적)
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";- 사용자의 공유기 정보 입력 필요
String output2State = "off";
const int output2 = 2;-
GPIO 2번 핀 상태를 저장하는 변수 선언 (
"on"또는"off") - 대부분의 ESP32 보드에서는 GPIO 2가 내장 LED에 연결되어 있음
AsyncWebServer server(80);- 포트 80에서 서버 실행
- 비동기 방식이라
loop()에서handleClient()호출 필요 없음
const char index_html[] PROGMEM = R"rawliteral( ... )rawliteral";-
웹 브라우저에 표시될 HTML 코드 (내장 메모리
PROGMEM에 저장) -
%STATE%와%BUTTON%→ 템플릿 자리표시자, 코드로 치환됨
String processor(const String& var) {
if (var == "STATE") return output2State;
if (var == "BUTTON") {
if (output2State == "off") {
return "<p><a href=\"/2/on\"><button class=\"button\">ON</button></a></p>";
} else {
return "<p><a href=\"/2/off\"><button class=\"button button2\">OFF</button></a></p>";
}
}
return String();
}-
%STATE%는 현재 GPIO 상태 (on/off)로 대체됨 -
%BUTTON%은 상태에 따라 다른 HTML 버튼으로 대체됨 (ON or OFF)
Serial.begin(115200);
delay(3000);- 시리얼 디버깅용 초기 설정
pinMode(output2, OUTPUT);
digitalWrite(output2, LOW);- GPIO 2번 핀을 출력으로 설정, 기본값은
OFF
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) { ... }- Wi-Fi 연결 시도 및 대기
Serial.println(WiFi.localIP());- 연결된 ESP32의 IP 주소를 출력 → 브라우저에서 접속 가능
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html, processor);
});- 루트 페이지
/요청 시 HTML 페이지 전송 - 템플릿 자리표시자
%STATE%,%BUTTON%은processor()를 통해 실제 값으로 치환
server.on("/2/on", HTTP_GET, [] (AsyncWebServerRequest *request) {
output2State = "on";
digitalWrite(output2, HIGH);
request->send_P(200, "text/html", index_html, processor);
});-
/2/on경로 접근 시- GPIO 2를 HIGH로 → ON
- 상태 업데이트 후 페이지 재전송
server.on("/2/off", HTTP_GET, [] (AsyncWebServerRequest *request) {
output2State = "off";
digitalWrite(output2, LOW);
request->send_P(200, "text/html", index_html, processor);
});-
/2/off경로 접근 시- GPIO 2를 LOW로 → OFF
- 상태 업데이트 후 페이지 재전송
server.begin();- 웹서버 시작
void loop() {
}- 비동기 서버이기 때문에 비워둬도 됨 (중요한 차이점!)
-
WebServer는handleClient()가 필요했지만AsyncWebServer는 이벤트 기반으로 자동 처리
- 주소창에
http://<ESP32_IP>입력 시 아래처럼 표시됩니다:
ESP32 웹 서버
GPIO 2 - 상태 on
[OFF 버튼]
- 버튼을 누르면
/2/on또는/2/off요청이 서버로 전송되고 즉시 GPIO 상태가 변경됨
- 비동기 방식 → 빠르고 효율적, 실시간 반응에 강함
- 템플릿 사용 → 동적 웹 페이지 쉽게 구성
- 상태에 따라 HTML 버튼 내용 실시간 변경
- GPIO 여러 개로 확장:
/4/on,/5/off등 라우팅 추가 - DHT11 센서 연결해서
/temperature경로로 값 전송 - AJAX로 버튼 누르지 않고 상태 자동 갱신