6주차_참고 : 내장 LED를 제어하는 웹서버(TEXT 기반) - dhryu60/SmartDevice_2025-1 GitHub Wiki
아래는 HTML이나 CSS 없이 텍스트 기반으로 실습할 수 있도록 변형한 코드
- 웹 브라우저에서
http://ESP32_IP/
에 접속하면 GPIO 상태를 단순한 텍스트 형식으로 보여주고,
/2/on
,/2/off
경로를 통해 GPIO 2번 핀을 ON/OFF 할 수 있음
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
// Wi-Fi 접속 정보
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
// GPIO 상태 저장 변수
String output2State = "off";
const int output2 = 2;
// 비동기 웹서버 객체 생성
AsyncWebServer server(80);
void setup() {
Serial.begin(115200);
delay(3000);
pinMode(output2, OUTPUT);
digitalWrite(output2, LOW); // 기본 OFF
Serial.print("Wi-Fi 연결 중: ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("\nWi-Fi 연결됨");
Serial.print("IP 주소: ");
Serial.println(WiFi.localIP());
// 루트 페이지 - 현재 상태 표시
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
String message = "ESP32 GPIO 제어 페이지\n\n";
message += "현재 GPIO 2 상태: " + output2State + "\n\n";
message += "GPIO 2를 ON 하려면 /2/on\n";
message += "GPIO 2를 OFF 하려면 /2/off\n";
request->send(200, "text/plain", message);
});
// GPIO 2 ON
server.on("/2/on", HTTP_GET, [](AsyncWebServerRequest *request){
digitalWrite(output2, HIGH);
output2State = "on";
Serial.println("GPIO 2 ON");
request->send(200, "text/plain", "GPIO 2 is now ON\n");
});
// GPIO 2 OFF
server.on("/2/off", HTTP_GET, [](AsyncWebServerRequest *request){
digitalWrite(output2, LOW);
output2State = "off";
Serial.println("GPIO 2 OFF");
request->send(200, "text/plain", "GPIO 2 is now OFF\n");
});
server.begin();
}
void loop() {
// 비동기 웹 서버이므로 loop 내용 없음
}
- 📱 스마트폰 핫스팟 켜기
- 🔌 ESP32 전원 연결 → Wi-Fi에 자동 연결됨
- 🖥 시리얼 모니터로 IP 주소 확인
예:192.168.43.157
- 브라우저에서 접속
-
http://192.168.43.157/
→ 상태 확인 -
http://192.168.43.157/2/on
→ GPIO ON -
http://192.168.43.157/2/off
→ GPIO OFF
-
- HTML이나 스타일이 없기 때문에 메모리 부담이 적고, 초보자에게도 직관적
- 모든 출력이 텍스트 기반이므로, 모바일 브라우저, curl, Python 등 다양한 환경에서 테스트 가능