Exemple ESP32 WebRTC - Tutoriel sur l'interface de l'horloge temps réel

Vue d'ensemble

L’exemple WebRTC fournit une interface complète d’horloge en temps réel pour vos projets ESP32. Conçu pour l’ESP32 — plateforme éducative dotée de capacités RTC intégrées, de fonctionnalités améliorées de gestion du temps et d’une intégration transparente avec l’écosystème éducatif. Vous pouvez afficher les informations de l’horloge en temps réel, synchroniser l’heure depuis le navigateur Web vers Arduino et surveiller les écarts temporels via une interface Web intuitive.

Exemple Arduino WebRTC - Tutoriel sur l'interface de l'horloge en temps réel

Fonctionnalités

  • Affichage de l'horloge en temps réel: Affiche l'heure RTC actuelle de l'ESP32 avec des mises à jour automatiques
  • Comparaison de l'heure de l'appareil: Affiche l'heure du navigateur Web et celle de l'appareil aux côtés de l'heure ESP32
  • Synchronisation horaire en un clic: Synchronise l'heure RTC de l'ESP32 avec l'heure du navigateur Web instantanément
  • Indicateur visuel de l'écart temporel: Affiche le décalage entre les appareils en minutes
  • Format d'heure sur deux lignes: Format 12 heures avec AM/PM et affichage complet de la date
  • Interface moderne en dégradé: Mise en page en style carte avec design réactif
  • Communication WebSocket: Mises à jour bidirectionnelles en temps réel sans rafraîchissement de la page
  • Synchronisation sensible au fuseau horaire: Utilise l'heure locale de l'appareil pour une synchronisation précise
  • Surveillance de l'état de connexion: Indicateurs visuels de l'état de connexion WebSocket
  • Demandes automatiques de l'heure: Demande l'heure actuelle de l'ESP32 lors du chargement de la page

Préparation du matériel

1×Module de développement ESP32 ESP-WROOM-32
1×Câble USB Type-A vers Type-C (pour PC USB-A)
1×Câble USB Type-C vers Type-C (pour PC USB-C)
1×Module horloge temps réel DS3231
1×Pile CR2032
1×Fils de connexion
1×Plaque d'essai
1×Recommandé: Carte d'extension à bornier à vis pour ESP32
1×Recommandé: Breakout Expansion Board for ESP32
1×Recommandé: Répartiteur d'alimentation pour ESP32

Ou vous pouvez acheter les kits suivants:

1×Kit de Démarrage DIYables ESP32 (ESP32 inclus)
1×Kit de Capteurs DIYables (30 capteurs/écrans)
1×Kit de Capteurs DIYables (18 capteurs/écrans)
Divulgation : Certains des liens fournis dans cette section sont des liens affiliés Amazon. Nous pouvons recevoir une commission pour tout achat effectué via ces liens, sans coût supplémentaire pour vous. Nous vous remercions de votre soutien.

Diagramme de câblage

Schéma de câblage ESP32 pour l'horloge temps réel DS3231

Cette image a été créée avec Fritzing. Cliquez pour agrandir l'image.

Si vous ne savez pas comment alimenter l'ESP32 et d'autres composants, consultez les instructions dans le tutoriel suivant : Comment alimenter l'ESP32..

ESP32 - Module horloge temps réel DS3231

DS1307 RTC Module ESP32
Vin 3.3V
GND GND
SDA GPIO21
SCL GPIO22

Étapes rapides

Suivez ces instructions étape par étape :

  • Si c'est votre première utilisation de l'ESP32, reportez-vous au tutoriel sur la configuration de l'environnement pour ESP32 dans l'IDE Arduino (BASE_URL/tutorials/esp32/esp32-software-installation).
  • Connectez la carte ESP32 à votre ordinateur à l'aide d'un câble USB.
  • Lancez l'IDE Arduino sur votre ordinateur.
  • Sélectionnez la carte ESP32 appropriée (par ex. ESP32 Dev Module) et le port COM.
  • Accédez à l'icône Libraries dans la barre de gauche de l'IDE Arduino.
  • Recherchez "DIYables ESP32 WebApps", puis trouvez la bibliothèque DIYables ESP32 WebApps de DIYables
  • Cliquez sur le bouton Install pour installer la bibliothèque.
Bibliothèque ESP32 WebApps de DIYables
  • Vous serez invité à installer d'autres dépendances de bibliothèque
  • Cliquez sur le bouton Tout installer pour installer toutes les dépendances de la bibliothèque.
Dépendance des WebApps ESP32 de DIYables
  • Recherchez “RTClib”, puis trouvez la bibliothèque RTC d'Adafruit
  • Cliquez sur le bouton Install pour installer la bibliothèque RTC.
Bibliothèque RTC ESP32
  • Il peut vous être demandé d'installer les dépendances de la bibliothèque
  • Installez toutes les dépendances de la bibliothèque en cliquant sur le bouton Install All.
Bibliothèque BusIO Adafruit pour ESP32
  • Dans l'IDE Arduino, allez dans Fichier Exemples DIYables ESP32 WebApps WebRTC exemple, ou copiez le code ci-dessus et collez-le dans l'éditeur de l'IDE 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()); }
  • Configurez les identifiants WiFi dans le code en mettant à jour ces lignes :
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
  • Cliquez sur le bouton Upload dans l'IDE Arduino pour téléverser le code sur Arduino.
  • Ouvrez le Moniteur série dans l'IDE Arduino
  • Attendez la connexion au WiFi et l'affichage des informations WiFi dans le Moniteur série.
  • Consultez le résultat dans le Moniteur série. Il ressemble à ce qui suit.
COM6
Send
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 Show timestamp
Clear output
9600 baud  
Newline  
  • Si vous ne voyez rien, redémarrez la carte ESP32.

Utilisation de l'interface Web

  • Ouvrez un navigateur Web sur votre ordinateur ou votre appareil mobile connecté au même réseau Wi‑Fi
  • Saisissez l’adresse IP affichée dans le Moniteur série dans le navigateur
  • Exemple : http://192.168.1.100
  • Vous verrez la page d'accueil comme sur l'image ci-dessous :
Page d'accueil de l'application Web ESP32 DIYables avec l'application WebRTC
  • Cliquez sur le lien Web RTC, vous verrez l'interface utilisateur de l'application Web RTC comme ci-dessous :
ESP32 DIYables WebApp WebRTC application
  • Ou vous pouvez également accéder directement à la page en utilisant l'adresse IP suivie de /web-rtc. Par exemple : http://192.168.1.100/web-rtc
  • Vous verrez l'interface WebRTC s'afficher :
  • Temps Arduino: Heure actuelle du RTC de l'Arduino
  • L'heure de votre appareil: Heure actuelle provenant de votre navigateur/appareil
  • Différence de temps: Différence entre les deux temps en minutes
  • Bouton de synchronisation de l'heure ESP32: Cliquez pour synchroniser l'heure de l'ESP32 avec votre appareil

Synchronisation de l'heure

  • Cliquez sur le bouton "Synchroniser l'heure ESP32" pour synchroniser l'horloge RTC de l'Arduino avec l'heure locale de votre appareil
ESP32 DIYables application Web et WebRTC
  • Le processus de synchronisation :
    1. Obtient l'heure locale actuelle de votre appareil (pas UTC)
    2. Ajuste le décalage du fuseau horaire pour garantir une synchronisation précise de l'heure locale
    3. Envoie l'horodatage à l'Arduino via WebSocket
    4. L'Arduino met à jour son RTC avec l'heure reçue
    5. L'interface Web se met à jour pour afficher l'heure synchronisée
  • Après la synchronisation, la différence de temps devrait être minime (généralement de 0 à 1 minute)
  • L'ESP32 conservera une heure précise même après la fermeture de l'interface Web
  • Explication du code

    Composants clés

    #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" };

    Fonction de configuration

    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(); }

    Fonctions de rappel

    Callback de synchronisation de l'heure:

    // 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!"); }

    Rappel de la demande d'heure :

    // 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() ); }

    Boucle principale

    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éthodes de l'API

    Méthodes de la classe DIYablesWebRTCPage

    onSynchronisationDuTempsDepuisLeWeb(callback)

    • Définit la fonction de rappel pour gérer la synchronisation de l'heure à partir du navigateur web
    • Paramètre: void (*callback)(unsigned long unixTimestamp)
    • Utilisation: Appelée lorsque l'utilisateur clique sur le bouton « Synchroniser l'heure ESP32 »

    onTimeRequestToWeb(callback)

    • Définit la fonction de rappel pour gérer les demandes d'heure provenant du navigateur Web
    • Paramètre: void (*callback)()
    • Utilisation: Appelé lorsque l'interface Web demande l'heure actuelle de l'ESP32

    envoyerLeTempsSurLeWeb(année, mois, jour, heure, minute, seconde)

    • Envoie l'heure actuelle de l'ESP32 à l'interface Web
    • Paramètres:
    • année: Année en cours (par exemple, 2025)
    • mois: Mois actuel (1-12)
    • jour: Jour actuel du mois (1-31)
    • heure: Heure actuelle (0-23)
    • minute : Minute actuelle (0-59)
    • second: Seconde actuelle (0-59)

    Communication WebSocket

    Messages du Web vers Arduino

    • RTC:GET_TIME - Obtenir l'heure actuelle de l'ESP32
    • RTC:SYNC:[timestamp] - Synchroniser l'heure de l'ESP32 avec un horodatage Unix

    Messages de l'ESP32 vers le Web

    • DATETIME:YYYY,MM,DD,HH,MM,SS - Envoyer les composants temporels actuels de l'ESP32

    Dépannage

    Problèmes fréquents

    1. Écart de plusieurs heures

    • Problème: L'ESP32 affiche une heure qui diffère de plusieurs heures par rapport à l'heure de l'appareil
    • Cause: Habituellement un problème de fuseau horaire ou le RTC n'est pas correctement initialisé
    • Solution:
    • Cliquez sur le bouton « Synchroniser l'heure ESP32 » pour resynchroniser.
    • Vérifie si le RTC est correctement initialisé dans setup()
    • Vérifier que la connexion Wi-Fi est stable.
    1. Erreur : « Le module RTC est introuvable ».
    • Problème: Le module RTC n'a pas été détecté lors de l'initialisation
    • Raison: Le module DS3231 n'est pas correctement connecté ou est défectueux
    • Solution:
    • Vérifiez le câblage I2C (SDA vers GPIO 21, SCL vers GPIO 22)
    • Vérifier les connexions d'alimentation (VCC vers 3,3 V/5 V, GND vers la masse)
    • Tester avec un scanner I2C pour détecter l'adresse du module
    • Essayez un autre module DS3231 s'il est disponible.
    1. Erreur « Non connecté à Arduino »
    • Problème: Erreur lors du clic sur le bouton de synchronisation
    • Cause: La connexion WebSocket a échoué
    • Solution:
    • Vérifier si l'adresse IP de l'ESP32 est correcte
    • Rafraîchir la page web
    • Vérifier que l'ESP32 est connecté au même réseau Wi-Fi
    • Vérifier les paramètres du pare-feu

    3. Le temps cesse d'être mis à jour

    • Problème: L'affichage de l'heure se fige ou ne se met pas à jour
    • Cause: Connexion WebSocket perdue ou le RTC arrêté
    • Solution:
    • Actualiser la page web
    • Vérifier l'état de la connexion WebSocket
    • Redémarrer l'ESP32 si le RTC ne répond plus

    4. Grandes différences temporelles (jours/mois)

    • Problème: La différence de temps affiche des milliers de minutes d'écart
    • Raison: L'horloge temps réel (RTC) n'était pas correctement réglée ou a dérivé de manière significative
    • Solution: Cliquez sur le bouton de synchronisation plusieurs fois et vérifiez les fonctions de rappel

    Astuces de débogage

    Activer le débogage série :

    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 }

    Vérifier l'initialisation de l'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__))); } }

    Utilisation avancée

    Journalisation des données avec des horodatages

    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. }

    Actions planifiées

    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!"); } }

    Intégration de plusieurs applications 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

    Applications et cas d'utilisation

    Projets éducatifs

    • Apprentissage de la gestion du temps : enseigner aux étudiants le RTC (horloge temps réel), la mesure du temps et la synchronisation
    • Notions de temps pour l'IoT : démontrer la synchronisation du temps réseau dans les systèmes IoT
    • Projets de journalisation des données : ajouter des horodatages aux lectures des capteurs et aux expériences
    • Systèmes de planification : créer des systèmes d'automatisation et de contrôle basés sur le temps

    Applications du monde réel

    • Domotique: Planifier l’éclairage, l’irrigation ou d’autres appareils
    • Acquisition de données: Horodater les relevés des capteurs pour analyse
    • Journalisation d'événements: Enregistrer lorsque des événements spécifiques se produisent avec un horodatage précis
    • Surveillance à distance: Vérifier l'état des dispositifs et les horodatages des dernières mises à jour à distance

    Avantages de l'éducation STEM

    • Concepts des fuseaux horaires : Comprendre l'heure locale vs UTC et la gestion des fuseaux horaires
    • Communication réseau : Apprendre la communication WebSocket et les mises à jour en temps réel
    • Intégration matérielle : Associer des interfaces Web aux fonctionnalités RTC matérielles
    • Résolution de problèmes : Déboguer les problèmes de synchronisation et de temporisation

    Spécifications techniques

    Utilisation de la mémoire

    • Mémoire flash: environ 8 Ko pour la fonctionnalité WebRTC
    • SRAM: environ 2 Ko pendant le fonctionnement
    • Tampon WebSocket: environ 1 Ko pour la gestion des messages

    Caractéristiques de performance

    • Fréquence de mise à jour : Mises à jour en temps réel via WebSocket
    • Précision de la synchronisation : Typiquement entre 1 et 2 secondes
    • Surcharge réseau : ~50 octets par message de mise à jour de l'heure
    • Temps de réponse : <100 ms pour les opérations de synchronisation de l'heure

    Compatibilité

    • Cartes ESP32 : ESP32, ESP32 Web Apps
    • Navigateurs : Tous les navigateurs modernes prenant en charge WebSocket
    • Périphériques : Ordinateur de bureau, tablette et appareils mobiles
    • Réseaux : réseaux Wi‑Fi avec accès à Internet

    Résumé

    L'exemple WebRTC montre comment :

    • Créer une interface d'horloge en temps réel basée sur le Web
    • Synchroniser l'horloge RTC de l'ESP32 avec l'heure du navigateur Web
    • Afficher les informations temporelles dans un format convivial
    • Surveiller les écarts de temps et l'état de la connexion
    • Intégrer les fonctionnalités liées au temps avec d'autres applications Web
    • Construire des projets IoT éducatifs avec des fonctionnalités de gestion du temps

    Cet exemple est parfait pour des projets nécessitant une mesure du temps précise, l’enregistrement des données avec horodatage, une automatisation planifiée et des démonstrations pédagogiques des concepts de synchronisation du temps dans les systèmes IoT.

    ※ NOS MESSAGES

    • N'hésitez pas à partager le lien de ce tutoriel. Cependant, veuillez ne pas utiliser notre contenu sur d'autres sites web. Nous avons investi beaucoup d'efforts et de temps pour créer ce contenu, veuillez respecter notre travail !