ESP32 다중 페이지 웹 서버 예제
웹 서버 예제 - 다중 페이지 웹 서버
개요
이 예제는 ESP32에서 홈 페이지, 온도 모니터링 및 LED 제어를 위한 서로 연결된 여러 페이지를 갖춘 다중 페이지 웹 서버를 만드는 방법을 보여줍니다.
주요 기능
- 다중 페이지 네비게이션 매끄러운 페이지 전환 제공
- 홈 페이지 네비게이션 메뉴와 시스템 정보를 포함
- 온도 모니터링 페이지 실시간 온도 표시와 새로고침 기능 포함
- LED 제어 페이지 온/오프 토글 기능 포함
- 템플릿 기반 HTML 동적 콘텐츠 교체 포함
- 헬퍼 함수들로 깨끗하고 유지보수 가능한 코드 작성
준비물
| 1 | × | ESP32 ESP-WROOM-32 개발 모듈 | 쿠팡 | 아마존 | |
| 1 | × | USB 케이블 타입-A to 타입-C (USB-A PC용) | 쿠팡 | 아마존 | |
| 1 | × | USB 케이블 타입-C to 타입-C (USB-C PC용) | 아마존 | |
| 1 | × | (추천) ESP32용 스크루 터미널 확장 보드 | 쿠팡 | 아마존 | |
| 1 | × | (추천) Breakout Expansion Board for ESP32 | 쿠팡 | 아마존 | |
| 1 | × | (추천) ESP32용 전원 분배기 | 쿠팡 | 아마존 |
공개: 이 포스팅 에 제공된 일부 링크는 아마존 제휴 링크입니다. 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
라이브러리 설치
다음 지침을 단계별로 따라가세요:
- ESP32를 처음 사용하는 경우, Arduino IDE에서 ESP32 환경 설정 튜토리얼을 참조하십시오(ESP32를 위한 Arduino IDE에서의 환경 설정 튜토리얼).
- ESP32 보드를 USB 케이블로 컴퓨터에 연결합니다.
- 컴퓨터에서 Arduino IDE를 실행합니다.
- 올바른 ESP32 보드(예: ESP32)와 COM 포트를 선택합니다.
- Arduino IDE의 왼쪽에 있는 Library Manager 아이콘을 클릭하여 라이브러리 관리자를 엽니다.
- Web Server for ESP32를 검색하고 DIYables의 mWebSockets를 찾습니다.
- Install 버튼을 클릭하여 mWebSockets 라이브러리를 추가합니다.
웹 서버 예제
- Arduino IDE에서, 예제 코드를 열려면 File 예제 ESP32용 웹 서버 WebServer 예제로 이동합니다.
회로 연결
외부 부품이 필요하지 않습니다 - 이 예제는 핀 13의 내장 LED를 사용합니다.
코드 구조
- home.h: 홈 페이지 HTML 템플릿
- temperature.h: 온도 모니터링 페이지 템플릿
- led.h: LED 제어 페이지 템플릿
- WebServer.ino: 주요 서버 로직
설정 안내
1. 네트워크 구성
WebServer.ino 파일에서 와이파이 자격 증명을 직접 편집하십시오:
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
2. 코드 업로드 및 출력 모니터링
- ESP32를 컴퓨터에 연결하세요
- Arduino IDE에서 올바른 보드와 포트를 선택하세요
- WebServer.ino 스케치를 업로드하세요
- 시리얼 모니터를 여세요(9600 baud)
- WiFi 연결을 기다리세요
- 표시된 IP 주소를 메모해 두세요
- 시리얼 모니터에서 IP 주소가 보이지 않으면 ESP32 보드의 리셋 버튼을 누르세요
사용 방법
웹 브라우저를 열고 시리얼 모니터에 표시된 IP 주소를 입력하여 ESP32 웹 서버에 접속하십시오.
온도 모니터링 기능 테스트:
- "온도" 메뉴를 클릭합니다.
- 온도 표시를 봅니다.
LED 제어 기능 테스트:
- "LED Control" 메뉴를 클릭하세요. 아래와 같은 웹 인터페이스가 표시됩니다:
- 제공된 버튼으로 LED를 켜고 끄십시오.
- ESP32 보드의 내장 LED 상태가 즉시 업데이트되는 것을 관찰하십시오.
이용 가능한 페이지
홈 페이지 (`/`)
- 웹 주소: http://your-esp32-ip/
- 주요 기능:
- 시스템 정보가 포함된 환영 메시지
- 모든 페이지로 이동하는 네비게이션 메뉴
- 깔끔하고 전문적인 레이아웃
온도 페이지 (`/temperature`)
- 웹 주소: http://your-esp32-ip/temperature
- 특징:
- 실시간 섭씨 온도 표시
- 5초마다 자동 새로고침
- 수동 새로고침 버튼
- 홈으로 돌아가기
LED 제어 페이지 (`/led`)
- URL: http://your-esp32-ip/led
- ON URL: http://your-esp32-ip/led/on
- OFF URL: http://your-esp32-ip/led/off
- 특징:
- 현재 LED 상태 표시
- 켜기 및 끄기 동작에 대한 별도의 경로
- 상태 변경 직후의 즉각적인 상태 업데이트
- 홈으로 돌아가기
코드 설명
서버 라우트
// Configure routes with custom handler functions
server.addRoute("/", handleHome);
server.addRoute("/temperature", handleTemperature);
server.addRoute("/led", handleLed);
server.addRoute("/led/on", handleLedOn);
server.addRoute("/led/off", handleLedOff);
// Handler function examples
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, HOME_PAGE);
}
void handleTemperature(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
float tempC = 25.5; // Simulated temperature value
String response = TEMPERATURE_PAGE;
response.replace("%TEMP_C%", String(tempC, 1));
server.sendResponse(client, response.c_str());
}
void handleLedOn(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
ledState = HIGH;
digitalWrite(LED_PIN, ledState);
sendLedPage(client);
}
void handleLedOff(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
ledState = LOW;
digitalWrite(LED_PIN, ledState);
sendLedPage(client);
}
템플릿 시스템
예제는 동적 콘텐츠를 위한 자리 표시자 대체 시스템을 사용합니다:
- %TEMP_C%: 현재 섭씨 온도 값으로 대체됩니다
- %LED_STATUS%: 현재 LED 상태로 대체됩니다 ("ON" 또는 "OFF")
헬퍼 함수
// Helper function to send LED page with current status
void sendLedPage(WiFiClient& client) {
String ledStatus = (ledState == HIGH) ? "ON" : "OFF";
String response = LED_PAGE;
response.replace("%LED_STATUS%", ledStatus);
server.sendResponse(client, response.c_str());
}
// LED state tracking
int ledState = LOW; // Track LED state (LOW = OFF, HIGH = ON)
맞춤화
새 페이지 추가
- 새 헤더 파일에 HTML 템플릿 만들기
- 메인 루프에 라우트 핸들러 추가하기
- 기존 페이지의 네비게이션 메뉴 업데이트하기
스타일링
HTML 템플릿의 CSS를 수정하여 외관을 변경:
<style>
body { font-family: Arial, sans-serif; margin: 40px; }
.container { max-width: 600px; margin: 0 auto; }
/* Add your custom styles here */
</style>
센서 추가
시뮬레이션된 온도 값을 실제 센서 측정값으로 대체합니다:
void handleTemperature(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
// Replace with actual sensor reading
// e.g., DHT22, DS18B20, etc.
float tempC = readActualTemperatureSensor(); // Your sensor function here
String response = TEMPERATURE_PAGE;
response.replace("%TEMP_C%", String(tempC, 1));
server.sendResponse(client, response.c_str());
}
문제 해결
일반적인 문제
와이파이 연결에 실패했습니다
- WebServer.ino 파일에서 SSID와 비밀번호를 확인합니다
- WiFi 네트워크 이용 가능 여부를 확인합니다
- ESP32가 WiFi 범위 내에 있는지 확인합니다
페이지가 로드되지 않음
- 시리얼 모니터에서 IP 주소를 확인하십시오
- 브라우저의 웹 주소가 ESP32의 IP 주소와 일치하는지 확인하십시오
- 페이지를 새로 고침해 보세요
LED가 응답하지 않음
- LED가 핀 13에 연결되어 있는지 확인합니다
- 시리얼 모니터에서 디버그 메시지를 확인합니다
- 라우트 핸들러가 등록되었는지 확인합니다
디버그 출력
Serial.println() 문장을 추가하여 추가 디버깅을 활성화합니다.
void handleLed(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("LED route accessed");
Serial.println("Method: " + method);
Serial.println("Request: " + request);
sendLedPage(client);
}
다음 단계
- REST API 개발을 위한 WebServerJson.ino 예제 탐색
- 고급 매개변수 처리를 위한 WebServerQueryStrings.ino 사용해보기
- 실시간 통신을 위한 WebServerWithWebSocket.ino 확인해보기