Ejemplo de ESP32 WebRTC - Tutorial de la Interfaz del Reloj en Tiempo Real
Visión general
El ejemplo de WebRTC ofrece una interfaz integral de reloj en tiempo real para tus proyectos ESP32. Diseñado para ESP32: una plataforma educativa con capacidades RTC integradas, características mejoradas de gestión del tiempo y una integración perfecta con el ecosistema educativo. Puedes mostrar información del reloj en tiempo real, sincronizar la hora desde un navegador web hacia Arduino y monitorear las diferencias de tiempo a través de una interfaz web intuitiva.
Características
- Pantalla de reloj en tiempo real: Muestra la hora RTC actual del ESP32 con actualizaciones automáticas
- Comparación de la hora del dispositivo: Muestra la hora del navegador web o del dispositivo junto con la hora del ESP32
- Sincronización de tiempo con un solo clic: Sincroniza la RTC del ESP32 con la hora del navegador web al instante
- Indicador visual de la diferencia de tiempo: Muestra la deriva de tiempo entre dispositivos en minutos
- Formato de dos líneas: Formato de 12 horas con AM/PM y fecha completa
- Interfaz de usuario con gradiente moderno: Diseño en tarjetas con diseño adaptable
- Comunicación WebSocket: Actualizaciones bidireccionales en tiempo real sin recargar la página
- Sincronización consciente de la zona horaria: Utiliza la hora local del dispositivo para una sincronización precisa
- Monitoreo del estado de la conexión: Indicadores visuales para el estado de la conexión de WebSocket
- Solicitudes automáticas de tiempo: Solicita la hora actual del ESP32 al cargar la página
Hardware Requerido
Or you can buy the following kits:
| 1 | × | DIYables ESP32 Starter Kit (ESP32 included) | |
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgación: Algunos de los enlaces proporcionados en esta sección son enlaces de afiliado de Amazon. Podemos recibir una comisión por las compras realizadas a través de estos enlaces sin costo adicional para usted. Apreciamos su apoyo.
Diagrama de Cableado
This image is created using Fritzing. Click to enlarge image
Si no sabe c\u00f3mo alimentar ESP32 y otros componentes, encuentre instrucciones en el siguiente tutorial: C\u00f3mo alimentar ESP32.
ESP32 - Módulo DS3231 RTC
| DS1307 RTC Module | ESP32 |
|---|---|
| Vin | 3.3V |
| GND | GND |
| SDA | GPIO21 |
| SCL | GPIO22 |
Pasos rápidos
Siga estas instrucciones paso a paso:
- Si es la primera vez que usas el ESP32, consulta el tutorial sobre configurar el entorno para ESP32 en el IDE de Arduino.
- Conecta la placa ESP32 a tu computadora usando un cable USB.
- Inicia el IDE de Arduino en tu computadora.
- Selecciona la placa ESP32 adecuada (p. ej. ESP32 Dev Module) y el puerto COM.
- Navega al icono Bibliotecas en la barra izquierda del IDE de Arduino.
- Busca "DIYables ESP32 WebApps", luego encuentra la Librería DIYables ESP32 WebApps de DIYables.
- Haz clic en el botón Instalar para instalar la biblioteca.
- Se le pedirá instalar algunas otras dependencias de la biblioteca
- Haga clic en el botón Instalar todo para instalar todas las dependencias de la biblioteca
- Buscar “RTClib”, luego encuentra la biblioteca RTC de Adafruit
- Haz clic en el botón Instalar para instalar la biblioteca RTC.
- Es posible que se le pida instalar dependencias de la biblioteca
- Instale todas las dependencias de la biblioteca haciendo clic en el botón Instalar todo
- En el IDE de Arduino, vaya a Archivo Ejemplos DIYables ESP32 WebApps WebRTC ejemplo, o copie el código anterior y péguelo en el editor del IDE de Arduino
/*
* 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());
}
- Configure las credenciales de WiFi en el código actualizando estas líneas:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Haz clic en el botón Subir en el IDE de Arduino para cargar el código en Arduino.
- Abre el Monitor Serial en el IDE de Arduino.
- Espera la conexión a WiFi y los mensajes de información de WiFi en el Monitor Serial.
- Consulta el resultado en el Monitor Serial. Se ve como lo siguiente:
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
- Si no ves nada, reinicia la placa ESP32.
Usando la interfaz web
- Abra un navegador web en su computadora o dispositivo móvil conectado a la misma red Wi-Fi
- Escriba la dirección IP que se muestra en el Monitor Serie en el navegador web
- Ejemplo: http://192.168.1.100
- Verá la página de inicio como se muestra en la imagen siguiente:
- Haz clic en el enlace de Web RTC; verás la interfaz de usuario de la aplicación Web RTC como se muestra a continuación:
- O también puede acceder a la página directamente mediante la dirección IP seguida de /web-rtc. Por ejemplo: http://192.168.1.100/web-rtc
- Verá la interfaz WebRTC que se muestra:
- Tiempo de Arduino: Hora actual desde el RTC del Arduino
- Hora de tu dispositivo: Hora actual desde tu navegador/dispositivo
- Diferencia de tiempo: Diferencia entre los dos tiempos en minutos
- Botón de sincronización de la hora del ESP32: Haz clic para sincronizar la hora del ESP32 con tu dispositivo
Sincronización de Tiempo
- Haz clic en el botón "Sincronizar la hora del ESP32" para sincronizar el RTC del Arduino con la hora local de tu dispositivo
- El proceso de sincronización:
- Obtiene la hora local actual de tu dispositivo (no UTC)
- Ajusta el desfase de la zona horaria para asegurar una sincronización precisa de la hora local
- Envía la marca de tiempo al Arduino a través de WebSocket
- El Arduino actualiza su RTC con la hora recibida
- La interfaz web se actualiza para mostrar la hora sincronizada
Después de la sincronización, la diferencia de tiempo debería ser mínima (usualmente 0-1 minutos)
El ESP32 mantendrá una hora precisa incluso después de que se cierre la interfaz web
Explicación del código
Componentes Clave
#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"
};
Función de configuración
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();
}
Funciones de devolución de llamada
Llamada de devolución de llamada para la sincronización de tiempo:
// 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!");
}
Llamada de devolución de la solicitud de tiempo:
// 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()
);
}
Bucle principal
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);
}
Métodos de la API
Métodos de la clase DIYablesWebRTCPage
onTimeSyncFromWeb(callback)
- Establece la función de devolución de llamada para manejar la sincronización de la hora desde el navegador web
- Parámetro: void (*callback)(unsigned long unixTimestamp)
- Uso: Se invoca cuando el usuario hace clic en el botón "Sync ESP32 Time"
solicitudEnTiempoAWeb(callback)
- Establece la función de devolución de llamada para manejar las solicitudes de tiempo desde el navegador web
- Parámetro: void (*callback)()
- Uso: Llamado cuando la interfaz web solicita la hora actual del ESP32
enviarHoraALaWeb(año, mes, día, hora, minuto, segundo)
- Envía la hora actual del ESP32 a la interfaz web
- Parámetros:
- year: Año actual (p. ej., 2025)
- mes: Mes actual (1-12)
- día: Día actual del mes (1-31)
- hour: Hora actual (0-23)
- minuto: minuto actual (0-59)
- second: Segundo actual (0-59)
Comunicación WebSocket
Mensajes desde la Web hacia Arduino
- RTC:GET_TIME - Solicitar la hora actual del ESP32
- RTC:SYNC:[timestamp] - Sincronizar la hora del ESP32 con la marca de tiempo Unix
Mensajes de ESP32 a la Web
- DATETIME:YYYY,MM,DD,HH,MM,SS - Enviar los componentes de tiempo actuales del ESP32
Solución de problemas
Problemas Comunes
1. Diferencia de varias horas
- Problema: ESP32 muestra la hora con varias horas de diferencia respecto a la hora del dispositivo
- Causa: Generalmente un problema de zona horaria o el RTC no está inicializado correctamente
- Solución:
- Haz clic en el botón "Sincronizar la hora del ESP32" para volver a sincronizar.
- Verifica si el RTC está correctamente inicializado en setup()
- Verifique que la conexión WiFi esté estable
2. "El módulo RTC no se encuentra" Error
- Problema: El módulo RTC no se detecta durante la inicialización
- Causa: El módulo DS3231 no está conectado correctamente o está defectuoso
- Solución:
- Verificar el cableado I2C (SDA al GPIO 21, SCL al GPIO 22)
- Verificar las conexiones de alimentación (VCC a 3.3V/5V, GND a tierra)
- Probar con un escáner I2C para detectar la dirección del módulo
- Prueba un módulo DS3231 diferente si está disponible
3. "No está conectado a Arduino" Error
- Problema: Error al hacer clic en el botón de sincronización
- Causa: La conexión WebSocket falló
- Solución:
- Verificar si la dirección IP del ESP32 es correcta
- Actualiza la página web
- Verificar que el ESP32 esté conectado a la misma red WiFi.
- Verificar la configuración del cortafuegos
3. El tiempo deja de actualizarse
- Problema: La visualización de la hora se congela o no se actualiza
- Causa: La conexión WebSocket se perdió o el RTC se detuvo
- Solución:
- Recargar la página web
- Verificar el estado de la conexión WebSocket
- Reiniciar ESP32 si el RTC deja de responder
4. Grandes diferencias de tiempo (días/meses)
- Problema: La diferencia de tiempo muestra miles de minutos
- Causa: La RTC no estaba configurada correctamente o ha sufrido una deriva significativa
- Solución: Haz clic en el botón de sincronización varias veces y verifica las funciones de devolución de llamada
Consejos de depuración
Habilitar la depuración por puerto serie:
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
}
Verificación de la inicialización del 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__)));
}
}
Uso Avanzado
Registro de datos con marcas de tiempo
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.
}
Acciones programadas
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!");
}
}
Integración de múltiples aplicaciones web
// 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
Aplicaciones y Casos de Uso
Proyectos educativos
- Aprendizaje de la gestión del tiempo: Enseñar a los estudiantes sobre RTC, la medición del tiempo y la sincronización
- Conceptos de tiempo en IoT: Demostrar la sincronización de tiempo en redes IoT
- Proyectos de registro de datos: Agregar marcas de tiempo a las lecturas de sensores y a los experimentos
- Sistemas de programación: Crear sistemas de automatización y control basados en el tiempo
Aplicaciones del mundo real
- Domótica: Programar luces, riego u otros dispositivos
- Adquisición de datos: Marcar las lecturas de sensores con marca de tiempo para su análisis
- Registro de eventos: Registrar cuándo ocurren eventos específicos con una temporización precisa
- Monitoreo remoto: Verificar el estado del dispositivo y las horas de la última actualización de forma remota
Beneficios de la educación STEM
- Conceptos de zonas horarias: Comprender la hora local vs. UTC y la gestión de zonas horarias
- Comunicación de red: Aprender la comunicación WebSocket y las actualizaciones en tiempo real
- Integración de hardware: Combinar interfaces web con la funcionalidad de RTC de hardware
- Resolución de problemas: Depurar problemas de temporización y de sincronización
Especificaciones técnicas
Uso de Memoria
- Memoria Flash: ~8KB para la funcionalidad de WebRTC
- SRAM: ~2KB durante la operación
- Buffer de WebSocket: ~1KB para el manejo de mensajes
Características de rendimiento
- Frecuencia de actualización: Actualizaciones en tiempo real a través de WebSocket
- Precisión de la sincronización: Normalmente entre 1 y 2 segundos
- Sobrecarga de red: aproximadamente 50 bytes por mensaje de actualización de tiempo
- Tiempo de respuesta: <100 ms para operaciones de sincronización de tiempo
Compatibilidad
- Placas ESP32: ESP32, Aplicaciones Web ESP32
- Navegadores: Todos los navegadores modernos con soporte para WebSocket
- Dispositivos: Escritorio, tabletas y dispositivos móviles
- Redes: redes WiFi con acceso a Internet
Resumen
El ejemplo de WebRTC demuestra cómo:
- Crear una interfaz de reloj en tiempo real basada en la web
- Sincronizar el RTC del ESP32 con la hora del navegador web
- Mostrar la información de la hora en un formato fácil de usar
- Monitorear las diferencias de tiempo y el estado de la conexión
- Integrar la funcionalidad de tiempo con otras aplicaciones web
- Desarrollar proyectos educativos de IoT con funciones de gestión del tiempo
Este ejemplo es perfecto para proyectos que requieren un control preciso del tiempo, registro de datos con marcas de tiempo, automatización programada y demostraciones educativas de conceptos de sincronización de tiempo en sistemas IoT.