ESP32 WebRTC 예제 실시간 시계 인터페이스 튜토리얼
개요
WebRTC 예제는 ESP32 프로젝트를 위한 포괄적인 실시간 시계 인터페이스를 제공합니다. ESP32용으로 설계된 교육용 플랫폼으로 내장 RTC 기능, 향상된 시간 관리 기능 및 교육 생태계와의 매끄러운 통합을 제공합니다. 실시간 시계 정보를 표시하고, 웹 브라우저에서 Arduino로 시간을 동기화하며, 직관적인 웹 인터페이스를 통해 시간 차이를 모니터링할 수 있습니다.
주요 기능
- 실시간 시계 표시: ESP32 RTC의 현재 시간을 자동으로 업데이트하여 표시합니다
- 장치 시간 비교: ESP32 시간과 함께 웹 브라우저/장치의 시간을 표시합니다
- 원클릭 시간 동기화: ESP32 RTC를 웹 브라우저 시간과 즉시 동기화합니다
- 시각적 시간 차이 표시기: 장치 간 시간 차이를 분 단위로 표시합니다
- 두 줄 시간 형식: 12시간제(오전/오후) 형식과 전체 날짜 표시를 제공합니다
- 현대적 그라데이션 UI: 카드 스타일 레이아웃과 반응형 디자인
- WebSocket 통신: 페이지 새로고침 없이 실시간 양방향 업데이트를 제공합니다
- 시간대 인식 동기화: 정확한 동기를 위해 로컬 디바이스 시간을 사용합니다
- 연결 상태 모니터링: WebSocket 연결 상태에 대한 시각적 표시
- 자동 시간 요청: 페이지 로드 시 ESP32의 현재 시간을 요청합니다
준비물
| 1 | × | ESP32 ESP-WROOM-32 개발 모듈 | 쿠팡 | 아마존 | |
| 1 | × | USB 케이블 타입-A to 타입-C (USB-A PC용) | 쿠팡 | 아마존 | |
| 1 | × | USB 케이블 타입-C to 타입-C (USB-C PC용) | 아마존 | |
| 1 | × | DS3231 실시간 클록(RTC) 모듈 | 아마존 | |
| 1 | × | CR2032 배터리 | 아마존 | |
| 1 | × | 점퍼케이블 | 쿠팡 | 아마존 | |
| 1 | × | 브레드보드 | 쿠팡 | 아마존 | |
| 1 | × | (추천) ESP32용 스크루 터미널 확장 보드 | 쿠팡 | 아마존 | |
| 1 | × | (추천) Breakout Expansion Board for ESP32 | 쿠팡 | 아마존 | |
| 1 | × | (추천) ESP32용 전원 분배기 | 쿠팡 | 아마존 |
공개: 이 포스팅 에 제공된 일부 링크는 아마존 제휴 링크입니다. 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
선연결
이 이미지는 Fritzing을 사용하여 만들어졌습니다. 이미지를 확대하려면 클릭하세요.
ESP32 및 다른 구성 요소에 전원을 공급하는 방법에 대해 잘 알지 못하는 경우, 다음 튜토리얼에서 안내를 찾을 수 있습니다: ESP32 전원 공급 방법.
ESP32 - DS3231 RTC 모듈
| DS1307 RTC Module | ESP32 |
|---|---|
| Vin | 3.3V |
| GND | GND |
| SDA | GPIO21 |
| SCL | GPIO22 |
빠른 단계
다음 지시를 단계별로 따라가세요:
- ESP32를 처음 사용하는 경우 Arduino IDE에서 ESP32를 위한 환경 설정 튜토리얼을 참조하십시오. ESP32 - 소프트웨어 설치.
- USB 케이블을 사용하여 ESP32 보드를 컴퓨터에 연결합니다.
- 컴퓨터에서 Arduino IDE를 실행합니다.
- 적절한 ESP32 보드(예: ESP32 Dev Module)와 COM 포트를 선택합니다.
- Arduino IDE의 왼쪽 바에 있는 Libraries 아이콘으로 이동합니다.
- "DIYables ESP32 WebApps"를 검색한 후 DIYables에서 제공하는 DIYables ESP32 WebApps 라이브러리를 찾으십시오.
- 라이브러리를 설치하려면 Install 버튼을 클릭합니다.
- 다른 라이브러리 의존성 설치를 요청받게 됩니다.
- 모든 라이브러리 의존성을 설치하려면 Install All 버튼을 클릭하세요.
- 검색 “RTClib”를 한 다음 Adafruit의 RTC 라이브러리를 찾으세요
- Install 버튼을 클릭하여 RTC 라이브러리를 설치하세요
- 라이브러리의 의존성 설치를 요청받을 수 있습니다.
- 라이브러리의 모든 의존성을 설치하려면 Install All 버튼을 클릭하십시오.
- Arduino IDE에서, File 예제 DIYables ESP32 WebApps WebRTC 예제, 또는 위의 코드를 복사하여 Arduino IDE의 편집기에 붙여넣으세요
/*
* DIYables WebApp Library - Web RTC Example
*
* This example demonstrates the Web RTC feature:
* - Real-time clock display for both ESP32 and client device
* - One-click time synchronization from web browser to ESP32
* - Hardware RTC integration for persistent timekeeping
* - Visual time difference monitoring
*
* Hardware Required:
* - ESP32 development board
* - DS3231 RTC module (connected via I2C)
*
* Required Libraries:
* - RTClib library (install via Library Manager)
*
* Setup:
* 1. Connect DS3231 RTC module to ESP32 I2C pins (SDA/SCL)
* 2. Install RTClib library in Arduino IDE
* 3. Update WiFi credentials below
* 4. Upload the sketch to your ESP32
* 5. Open Serial Monitor to see the IP address
* 6. Navigate to http://[IP_ADDRESS]/web-rtc
*/
#include <DIYables_ESP32_Platform.h>
#include <DIYablesWebApps.h>
#include <RTClib.h>
// RTC object
RTC_DS3231 rtc;
char daysOfWeek[7][12] = {
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
};
// WiFi credentials - UPDATE THESE WITH YOUR NETWORK
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create WebApp server and page instances
ESP32ServerFactory serverFactory;
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
DIYablesWebRTCPage webRTCPage;
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("DIYables ESP32 WebApp - Web RTC Example");
// Initialize RTC
if (!rtc.begin()) {
Serial.println("RTC module is NOT found");
Serial.flush();
while (1);
}
// Check if RTC lost power and if so, set the time
if (rtc.lostPower()) {
Serial.println("RTC lost power, setting time!");
// When time needs to be set on a new device, or after a power loss, the
// following line sets the RTC to the date & time this sketch was compiled
rtc.adjust(DateTime(F(__DATE__), F(__TIME__)));
// This line sets the RTC with an explicit date & time, for example to set
// January 21, 2021 at 3am you would call:
// rtc.adjust(DateTime(2021, 1, 21, 3, 0, 0));
}
// Print initial RTC time
DateTime initialTime = rtc.now();
Serial.print("Initial RTC Time: ");
Serial.print(initialTime.year(), DEC);
Serial.print("/");
Serial.print(initialTime.month(), DEC);
Serial.print("/");
Serial.print(initialTime.day(), DEC);
Serial.print(" (");
Serial.print(daysOfWeek[initialTime.dayOfTheWeek()]);
Serial.print(") ");
if (initialTime.hour() < 10) Serial.print("0");
Serial.print(initialTime.hour(), DEC);
Serial.print(":");
if (initialTime.minute() < 10) Serial.print("0");
Serial.print(initialTime.minute(), DEC);
Serial.print(":");
if (initialTime.second() < 10) Serial.print("0");
Serial.print(initialTime.second(), DEC);
Serial.println();
// Add pages to server
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webRTCPage);
// Optional: Add 404 page for better user experience
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Set callback for time sync from web
webRTCPage.onTimeSyncFromWeb(onTimeSyncReceived);
// Set callback for time request from web
webRTCPage.onTimeRequestToWeb(onTimeRequested);
// Start the WebApp server
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("Failed to connect to WiFi");
delay(1000);
}
}
}
void loop() {
// Handle web server
webAppsServer.loop();
// Send current time to web clients and print to Serial every 1 second
static unsigned long lastUpdate = 0;
if (millis() - lastUpdate >= 1000) {
lastUpdate = millis();
// Get current RTC time
DateTime currentTime = rtc.now();
// Send time to web clients in human readable format
webRTCPage.sendTimeToWeb(currentTime.year(), currentTime.month(),
currentTime.day(), currentTime.hour(),
currentTime.minute(), currentTime.second());
// Print time to Serial Monitor
Serial.print("RTC Time: ");
Serial.print(currentTime.year(), DEC);
Serial.print("/");
Serial.print(currentTime.month(), DEC);
Serial.print("/");
Serial.print(currentTime.day(), DEC);
Serial.print(" (");
Serial.print(daysOfWeek[currentTime.dayOfTheWeek()]);
Serial.print(") ");
if (currentTime.hour() < 10) Serial.print("0");
Serial.print(currentTime.hour(), DEC);
Serial.print(":");
if (currentTime.minute() < 10) Serial.print("0");
Serial.print(currentTime.minute(), DEC);
Serial.print(":");
if (currentTime.second() < 10) Serial.print("0");
Serial.print(currentTime.second(), DEC);
Serial.println();
}
delay(10);
}
// Callback function called when web client sends time sync command
void onTimeSyncReceived(unsigned long unixTimestamp) {
Serial.print("Time sync received: ");
Serial.println(unixTimestamp);
// Convert Unix timestamp to DateTime and set RTC time
DateTime newTime(unixTimestamp);
rtc.adjust(newTime);
Serial.println("ESP32 RTC synchronized!");
}
// Callback function called when web client requests current ESP32 time
void onTimeRequested() {
// Get current RTC time and send to web in human readable format
DateTime currentTime = rtc.now();
webRTCPage.sendTimeToWeb(currentTime.year(), currentTime.month(),
currentTime.day(), currentTime.hour(),
currentTime.minute(), currentTime.second());
}
- 코드에서 WiFi 자격 증명을 구성하려면 이 줄들을 업데이트하십시오:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Arduino IDE에서 Upload 버튼을 클릭하여 Arduino에 코드를 업로드합니다.
- Arduino IDE에서 시리얼 모니터를 엽니다.
- WiFi에 연결될 때까지 기다리고, Serial Monitor에서 WiFi 정보가 출력되는 것을 확인합니다.
- Serial Monitor에서 결과를 확인합니다. 아래와 같이 보입니다.
COM6
DIYables ESP32 WebApp - Web RTC Example
Initial RTC Time: 2025/8/28 (Thursday) 12:00:08
INFO: Added app /
INFO: Added app /web-rtc
DIYables WebApp Library
Platform: ESP32
Network connected!
IP address: 192.168.0.2
HTTP server started on port 80
Configuring WebSocket server callbacks...
WebSocket server started on port 81
WebSocket URL: ws://192.168.0.2:81
WebSocket server started on port 81
==========================================
DIYables WebApp Ready!
==========================================
📱 Web Interface: http://192.168.0.2
🔗 WebSocket: ws://192.168.0.2:81
📋 Available Applications:
🏠 Home Page: http://192.168.0.2/
🕐 Web RTC: http://192.168.0.2/web-rtc
==========================================
Autoscroll
Clear output
9600 baud
Newline
- 아무것도 보이지 않으면 ESP32 보드를 재부팅하세요.
웹 인터페이스 사용
- 같은 WiFi 네트워크에 연결된 컴퓨터나 모바일 기기에서 웹 브라우저를 엽니다.
- 시리얼 모니터에 표시된 IP 주소를 웹 브라우저에 입력합니다.
- 예: http://192.168.1.100
- 아래 이미지와 같은 홈페이지가 표시됩니다:
- Web RTC 링크를 클릭하면 아래와 같이 Web RTC 앱의 UI가 보입니다:
- 또는 IP 주소에 이어 /web-rtc를 붙여 페이지에 직접 접속할 수도 있습니다. 예: http://192.168.1.100/web-rtc
- Web RTC 인터페이스가 표시됩니다:
- 아두이노 시간: 아두이노의 RTC에서 가져온 현재 시간
- 당신의 기기 시각: 웹 브라우저/기기에서의 현재 시각
- 시간 차이: 두 시각 사이의 차이를 분 단위로
- ESP32 시간 동기화 버튼: 기기와 ESP32 시간을 동기화하려면 클릭하세요
시간 동기화
- "ESP32 시간 동기화" 버튼을 클릭하여 Arduino의 RTC를 기기의 로컬 시간과 동기화합니다.
- 동기화 프로세스:
- 당신의 기기의 현재 로컬 시간을 가져옵니다(UTC가 아닙니다)
- 정확한 로컬 시간 동기화를 보장하기 위해 시간대 오프셋을 보정합니다
- 웹소켓을 통해 Arduino로 타임스탬프를 전송합니다
- 수신된 시간으로 Arduino의 RTC를 업데이트합니다
- 웹 인터페이스가 동기화된 시간을 표시하도록 업데이트합니다
동기화 후 시간 차이가 최소화되어야 합니다(일반적으로 0-1분)
ESP32는 웹 인터페이스가 닫힌 후에도 정확한 시간을 유지합니다
코드 설명
주요 구성 요소
#include <DIYablesWebApps.h>
#include <RTClib.h>
// Initialize RTC object and web server
RTC_DS3231 rtc;
DIYablesWebAppServer server;
DIYablesWebRTCPage rtcPage;
// Days of week array for display
char daysOfWeek[7][12] = {
"Sunday", "Monday", "Tuesday", "Wednesday",
"Thursday", "Friday", "Saturday"
};
설정 함수
void setup() {
Serial.begin(9600);
// Initialize DS3231 RTC module
if (!rtc.begin()) {
Serial.println("RTC module is NOT found");
Serial.flush();
while (1);
}
// Check if RTC lost power and set time if needed
if (rtc.lostPower()) {
Serial.println("RTC lost power, setting time!");
rtc.adjust(DateTime(F(__DATE__), F(__TIME__)));
}
// Setup WiFi connection
server.setupWiFi(WIFI_SSID, WIFI_PASSWORD);
// Add RTC page to server
server.addWebApp(rtcPage);
// Set up callback functions
rtcPage.onTimeSyncFromWeb(onTimeSyncReceived);
rtcPage.onTimeRequestToWeb(onTimeRequested);
// Start the server
server.begin();
}
콜백 함수들
시간 동기화 콜백:
// Called when web interface sends time sync command
void onTimeSyncReceived(unsigned long unixTimestamp) {
Serial.print("Time sync received: ");
Serial.println(unixTimestamp);
// Convert Unix timestamp to DateTime and set RTC time
DateTime newTime(unixTimestamp);
rtc.adjust(newTime);
Serial.println("ESP32 RTC synchronized!");
}
시간 요청 콜백:
// Called when web interface requests current ESP32 time
void onTimeRequested() {
DateTime currentTime = rtc.now();
// Send current time to web interface
rtcPage.sendTimeToWeb(
currentTime.year(),
currentTime.month(),
currentTime.day(),
currentTime.hour(),
currentTime.minute(),
currentTime.second()
);
}
메인 루프
void loop() {
server.handleClient();
// Send current time to web clients every 1 second
static unsigned long lastUpdate = 0;
if (millis() - lastUpdate >= 1000) {
lastUpdate = millis();
DateTime currentTime = rtc.now();
// Send time to web clients
rtcPage.sendTimeToWeb(currentTime.year(), currentTime.month(),
currentTime.day(), currentTime.hour(),
currentTime.minute(), currentTime.second());
// Print time to Serial Monitor
Serial.print("RTC Time: ");
Serial.print(currentTime.year(), DEC);
Serial.print("/");
Serial.print(currentTime.month(), DEC);
Serial.print("/");
Serial.print(currentTime.day(), DEC);
Serial.print(" (");
Serial.print(daysOfWeek[currentTime.dayOfTheWeek()]);
Serial.print(") ");
if (currentTime.hour() < 10) Serial.print("0");
Serial.print(currentTime.hour(), DEC);
Serial.print(":");
if (currentTime.minute() < 10) Serial.print("0");
Serial.print(currentTime.minute(), DEC);
Serial.print(":");
if (currentTime.second() < 10) Serial.print("0");
Serial.print(currentTime.second(), DEC);
Serial.println();
}
delay(10);
}
API 메서드
DIYablesWebRTCPage 클래스 메서드
onTimeSyncFromWeb(callback)
- 웹 브라우저에서 시간 동기화를 처리하기 위한 콜백 함수를 설정합니다.
- 매개변수: void (*callback)(unsigned long unixTimestamp)
- 사용 방법: 사용자가 "Sync ESP32 Time" 버튼을 클릭할 때 호출됩니다.
onTimeRequestToWeb(콜백)
- 웹 브라우저의 시간 요청을 처리하기 위한 콜백 함수를 설정합니다
- 매개변수: void (*callback)()
- 용도: 웹 인터페이스가 현재 ESP32 시간을 요청할 때 호출됩니다
웹으로 시간 전송(year, month, day, hour, minute, second)
- 현재 ESP32의 시간을 웹 인터페이스로 전송합니다
- 매개변수:
- year: 현재 연도(예: 2025)
- month: 현재 월 (1-12)
- day: 현재 달의 날짜(1-31)
- hour: 현재 시각(0-23)
- minute: 현재 분(0-59)
- second: 현재 초(0-59)
웹소켓 통신
웹에서 아두이노로 보내는 메시지
- RTC:GET_TIME - ESP32의 현재 시간 요청
- RTC:SYNC:[timestamp] - 유닉스 타임스탬프를 이용해 ESP32 시간 동기화
ESP32에서 웹으로의 메시지
- DATETIME:YYYY,MM,DD,HH,MM,SS - 현재 ESP32 시간 구성 요소를 보냅니다
문제 해결
일반적인 문제
수시간의 시차
- 문제: ESP32는 장치 시각보다 몇 시간 차이가 나는 시간을 표시합니다
- 원인: 일반적으로 시간대 문제이거나 RTC가 올바르게 초기화되지 않음
- 해결 방법:
- "Sync ESP32 Time" 버튼을 클릭하여 다시 동기화하세요.
- Setup()에서 RTC가 올바르게 초기화되었는지 확인합니다.
- 와이파이 연결이 안정적인지 확인
2. "RTC 모듈을 찾을 수 없음" 오류
- 문제: 초기화 중 RTC 모듈이 감지되지 않음
- 원인: DS3231 모듈이 올바르게 연결되지 않았거나 불량
- 해결 방법:
- I2C 배선 확인(SDA를 GPIO 21에, SCL을 GPIO 22에 연결)
- 전원 연결 확인 (VCC를 3.3V 또는 5V에, GND를 GND에 연결)
- 모듈 주소를 감지하기 위해 I2C 스캐너를 사용해 테스트합니다.
- 가능하다면 다른 DS3231 모듈을 사용해 보세요.
- "아두이노에 연결되지 않음" 오류
- 이슈: 동기화 버튼을 클릭할 때 오류가 발생합니다
- 원인: 웹소켓 연결에 실패했습니다
- 해결 방법:
- ESP32의 IP 주소가 올바른지 확인
- 웹 페이지를 새로고침
- ESP32가 동일한 Wi‑Fi 네트워크에 연결되어 있는지 확인
- 방화벽 설정을 확인하십시오
3. 시간 업데이트 중지
- 문제: 시간 표시가 멈추거나 업데이트되지 않습니다.
- 원인: WebSocket 연결이 끊겼거나 RTC가 중지되었습니다.
- 해결 방법:
- 웹 페이지를 새로 고침
- 웹소켓 연결 상태 확인
- RTC가 응답하지 않으면 ESP32를 재시작합니다
- 큰 시간 간격(일/개월)
- 문제: 시간 차이가 수천 분으로 표시됩니다
- 원인: RTC가 제대로 설정되지 않았거나 시간이 크게 벗어났습니다
- 해결 방법: 동기화 버튼을 여러 번 클릭하고 콜백 함수를 확인하십시오
디버깅 팁
직렬 디버깅 활성화:
void onTimeSyncReceived(unsigned long unixTimestamp) {
Serial.print("Time sync received: ");
Serial.println(unixTimestamp);
// ... rest of function
}
void onTimeRequested() {
Serial.println("Time request received from web");
// ... rest of function
}
RTC 초기화 확인:
void setup() {
// ... other setup code
if (!rtc.begin()) {
Serial.println("RTC module is NOT found");
Serial.println("Check I2C wiring:");
Serial.println("SDA -> GPIO 21");
Serial.println("SCL -> GPIO 22");
Serial.println("VCC -> 3.3V or 5V");
Serial.println("GND -> GND");
while (1);
}
Serial.println("DS3231 RTC initialized successfully");
if (rtc.lostPower()) {
Serial.println("RTC lost power, will set to compile time");
rtc.adjust(DateTime(F(__DATE__), F(__TIME__)));
}
}
고급 사용법
타임스탬프가 포함된 데이터 로깅
void logSensorData(float temperature, float humidity) {
DateTime currentTime = rtc.now();
String logEntry = String(currentTime.year()) + "-" +
String(currentTime.month()) + "-" +
String(currentTime.day()) + " " +
String(currentTime.hour()) + ":" +
String(currentTime.minute()) + ":" +
String(currentTime.second()) + " (" +
String(daysOfWeek[currentTime.dayOfTheWeek()]) + ") - " +
"Temp: " + String(temperature) + "°C, " +
"Humidity: " + String(humidity) + "%";
Serial.println(logEntry);
// Save to SD card, send to database, etc.
}
예약된 작업
void checkScheduledActions() {
DateTime currentTime = rtc.now();
// Turn on LED every day at 6:00 AM
if (currentTime.hour() == 6 && currentTime.minute() == 0 && currentTime.second() == 0) {
digitalWrite(LED_BUILTIN, HIGH);
Serial.print("Morning LED activated! Time: ");
Serial.print(daysOfWeek[currentTime.dayOfTheWeek()]);
Serial.print(" ");
Serial.print(currentTime.hour());
Serial.print(":");
Serial.println(currentTime.minute());
}
// Turn off LED every day at 10:00 PM
if (currentTime.hour() == 22 && currentTime.minute() == 0 && currentTime.second() == 0) {
digitalWrite(LED_BUILTIN, LOW);
Serial.println("Evening LED deactivated!");
}
}
다중 웹 애플리케이션 통합
// Combine WebRTC with other web apps
server.addWebApp(rtcPage); // Real-time clock
server.addWebApp(monitorPage); // Serial monitor with timestamps
server.addWebApp(plotterPage); // Data plotting with time axis
응용 분야 및 사용 사례
교육 프로젝트
- 시간 관리 학습: 학생들에게 RTC, 시간 측정 및 동기화에 대해 가르치기
- IoT 시간 개념: IoT 시스템에서 네트워크 시간 동기화를 시연하기
- 데이터 로깅 프로젝트: 센서 측정값과 실험에 타임스탬프를 추가하기
- 스케줄링 시스템: 시간 기반 자동화 및 제어 시스템 만들기
현실 세계의 응용
- 홈 자동화: 조명, 관개 또는 기타 장치의 일정을 설정
- 데이터 수집: 분석을 위한 센서 측정값의 타임스탬프 기록
- 이벤트 로깅: 정확한 타이밍으로 특정 이벤트가 발생한 시점을 기록
- 원격 모니터링: 원격으로 장치 상태와 마지막 업데이트 시간을 확인
STEM 교육의 이점
- 시간대 개념: 현지 시각과 UTC의 차이 및 시간대 처리 이해
- 네트워크 통신: 웹소켓 통신 및 실시간 업데이트 학습
- 하드웨어 통합: 웹 인터페이스와 하드웨어 RTC 기능의 결합
- 문제 해결: 타이밍 이슈 및 동기화 문제 디버깅
기술 사양
메모리 사용량
- 플래시 메모리: WebRTC 기능을 위한 약 8KB
- SRAM: 작동 중 약 2KB
- WebSocket 버퍼: 메시지 처리를 위한 약 1KB
성능 특성
- 업데이트 빈도: WebSocket을 통한 실시간 업데이트
- 동기화 정확도: 일반적으로 1-2초 이내
- 네트워크 오버헤드: 시간 업데이트 메시지당 약 50바이트
- 응답 시간: 시각 동기화 작업의 경우 100ms 미만
호환성
- ESP32 보드: ESP32, ESP32 웹 앱
- 브라우저: WebSocket을 지원하는 모든 최신 브라우저
- 장치: 데스크톱, 태블릿 및 모바일 기기
- 네트워크: 인터넷 접속이 가능한 와이파이 네트워크
요약
WebRTC 예제는 어떻게 하는지 보여줍니다:
- 웹 기반 실시간 시계 인터페이스 만들기
- ESP32 RTC를 웹 브라우저의 시간과 동기화
- 시간 정보를 사용자 친화적인 형식으로 표시
- 시간 차이와 연결 상태 모니터링
- 다른 웹 애플리케이션과 시간 기능을 통합
- 시간 관리 기능이 있는 교육용 IoT 프로젝트 만들기
이 예제는 정확한 시간 유지가 필요한 프로젝트, 타임스탬프가 포함된 데이터 로깅, 스케줄링된 자동화, 그리고 IoT 시스템에서의 시간 동기화 개념에 대한 교육용 시연에 적합합니다.