6‐7주차_ESP32 Web Server 실습 - dhryu60/SmartDevice_2025-1 GitHub Wiki
ESP32는 내장 WiFi 기능을 통해 웹서버 기능을 구현할 수 있습니다. WiFi 연결 모드:
- STA 모드: 기존 WiFi 네트워크에 클라이언트로 접속
- AP 모드: ESP32 자체가 WiFi 네트워크 제공 (Soft AP)
웹서버는 클라이언트(브라우저)의 요청을 받아 웹페이지를 제공하는 역할을 합니다. ESP32는 간단한 웹서버를 구동해 다양한 센서 정보 제공 및 제어가 가능합니다.
https://www.youtube.com/watch?v=7ujWkFyw01g
#include <WiFi.h>
const char* ssid = "YourSSID";
const char* password = "YourPassword";
WiFiServer server(80);
void setup() {
Serial.begin(115200);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting...");
}
Serial.println(WiFi.localIP());
server.begin();
}
void loop() {
WiFiClient client = server.available();
if (client) {
client.println("Hello from ESP32!");
delay(10);
client.stop();
}
}필요 라이브러리: ESPAsyncWebServer
- HTML 파일에
%STATE%,%BUTTON%을 사용해 LED 상태 실시간 표시 - 상태에 따라 버튼과 텍스트 자동 갱신
핵심 함수:
String processor(const String& var) {
if (var == "STATE") return ledState ? "ON" : "OFF";
if (var == "BUTTON") return ledState ? "<button>OFF</button>" : "<button>ON</button>";
}센서 연결
- 데이터핀(DH11) → D18
필요 라이브러리
DHT sensor library by AdafruitAdafruit Unified Sensor
센서 데이터 읽기
float temp = dht.readTemperature();
float hum = dht.readHumidity();HTML 페이지에 %TEMPERATURE%, %HUMIDITY% 자리 표시자 설정.
Javascript로 주기적 요청
setInterval(() => {
fetch("/temperature").then(res => res.text()).then(data => {
document.getElementById("temp").innerHTML = data;
});
}, 2000);ESP32 서버에서는 각각의 요청을 처리하여 값을 반환:
server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", String(temp).c_str());
});-
포트 포워딩
- 공유기 설정 필요
- 공인 IP 사용
-
터널링 서비스
-
Ngrok,Serveo,LocalTunnel등
-
-
고정 IP를 통한 직접 호스팅
- 비용 발생
- https://ngrok.com/ 접속 → 회원가입
- Dashboard에서 Authtoken 복사
- [다운로드 페이지](https://ngrok.com/download)에서 OS별 버전 설치
ngrok config add-authtoken <인증키>ngrok tcp 192.168.0.5:80- 생성된 ngrok 주소를 외부 브라우저에서 접속
- ex)
tcp://0.tcp.ngrok.io:12345
PPT : 챕터5.Web Server.pdf
교재 : 5장웹서버.pdf
소스코드 : 챕터5.WEBserver.zip
- ESP32 공식 WiFi 라이브러리
- Adafruit DHT 라이브러리 문서
- Ngrok 공식 문서 및 커뮤니티 포럼