Serveur WebSocket ESP32 - Tutoriel sur la communication en temps réel
Exemple de WebServerWithWebSocket - Communication en temps réel
Vue d'ensemble
Cet exemple montre comment créer un serveur web multi-pages avancé avec une communication WebSocket en temps réel sur l'ESP32, permettant un échange bidirectionnel de données entre le navigateur et l'ESP32.
Fonctionnalités
- Communication WebSocket en temps réel pour un échange bidirectionnel instantané
- Commandes simples basées sur des chaînes (ping, hello, time, LED allumée/éteinte)
- Contrôle de la LED via les commandes WebSocket
- Serveur HTTP intégré hébergeant une interface de test WebSocket
- Fonctionnalité d'écho pour tester la transmission de messages
- Surveillance de l'état de la connexion avec reconnexion automatique
Préparation du matériel
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.
Installation de la bibliothèque
Suivez ces instructions étape par étape :
- Si c'est la première fois que vous utilisez l'ESP32, reportez-vous au tutoriel sur la configuration de l'environnement pour ESP32 dans l'IDE Arduino.
- 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 exemple, ESP32) et le port COM.
- Ouvrez le Gestionnaire de bibliothèques en cliquant sur l'icône Gestionnaire de bibliothèques sur le côté gauche de l'IDE Arduino.
- Recherchez Serveur Web pour ESP32 et localisez la bibliothèque mWebSockets de DIYables.
- Cliquez sur le bouton Install pour ajouter la bibliothèque mWebSockets.
Exemple de WebSocket
- Dans l'IDE Arduino, allez dans Fichier Exemples Serveur Web pour ESP32 WebServerWithWebSocket un exemple pour ouvrir le code d'exemple
Structure du code
Le projet se compose de deux fichiers principaux :
- websocket_html.h:
Contient le code HTML, CSS et JavaScript pour l'interface Web. Ce fichier définit l'interface utilisateur permettant d'interagir avec l'ESP32 via WebSocket, comprenant des boutons pour envoyer des commandes, un journal des messages et des indicateurs d'état de connexion.
- WebServerWithWebSocket.ino:
Implémente la logique principale du serveur sur l'ESP32. Ce fichier configure les serveurs HTTP et WebSocket, gère la connectivité WiFi, traite les messages WebSocket entrants et contrôle le matériel (tel que la LED intégrée) en fonction des commandes reçues.
Connexion du circuit
Aucun composant externe nécessaire - cet exemple utilise la LED intégrée sur la broche 13.
Communication WebSocket
Détails de la connexion
- Port du serveur Web: 80 (HTTP)
- Port du WebSocket: 81 (WebSocket)
- Protocole: WebSocket conforme à la RFC 6455
Types de messages
L'implémentation réelle utilise des commandes de chaînes simples:
- Ping: "ping" → Réponse: "pong"
- Salutation: "hello" → Réponse: "Bonjour de l'ESP32!"
- Temps de fonctionnement: "heure" → Réponse: "Temps de fonctionnement : X secondes"
- Contrôle de LED: "led allumé" / "led éteint" → Réponse: "LED ALLUMÉE" / "LED ÉTEINTE"
- Écho: Tout autre texte → Réponse: "Écho: [votre message]"
Instructions d'installation
1. Configuration du réseau
Modifiez directement les identifiants Wi-Fi dans le fichier WebServerWithWebSocket.ino :
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
2. Téléverser le code et surveiller la sortie
- Connectez votre ESP32 à votre ordinateur
- Sélectionnez la bonne carte et le port dans l'IDE Arduino
- Téléversez le sketch WebServerWithWebSocket.ino
- Ouvrez le Moniteur Série (9600 bauds)
- Attendez la connexion au Wi‑Fi
- Notez les adresses des serveurs HTTP et WebSocket
- Si vous ne voyez pas l'adresse IP dans le Moniteur Série, appuyez sur le bouton de réinitialisation sur la carte ESP32
- Ouvrez un navigateur Web et saisissez l'adresse IP de l'ESP32 dans la barre d'adresse (par ex., http://192.168.x.x/). Vous verrez l'interface Web ressembler à ce qui suit :
- Cliquez sur le bouton « Connect » pour connecter le Web à l'ESP32 via WebSocket.
- Une fois que l'état de la connexion affiche « Connected », cliquez sur chaque bouton l'un après l'autre pour tester la communication bidirectionnelle entre l'interface Web et l'ESP32 via WebSocket. Le résultat sera le suivant :
Fonctionnalités de l'interface Web
L'interface HTML (à partir de websocket_html.h) fournit :
- Gestion de la connexion WebSocket avec des boutons de connexion/déconnexion
- Boutons de commande simples pour ping, bonjour, heure, LED allumée/éteinte
- Champ de saisie de message pour envoyer des commandes personnalisées
- Historique des messages en temps réel affichant les messages envoyés et reçus
- Indicateur d'état de la connexion montrant l'état du WebSocket
Explication du code
Configuration du serveur WebSocket
#include <DIYables_ESP32_WebServer.h>
#include "websocket_html.h"
// LED configuration
#define LED_PIN 2 // ESP32 built-in LED pin
// Server configuration
WiFiServer httpServer(80);
constexpr uint16_t wsPort = 81;
WebSocketServer wss{wsPort};
void setup() {
Serial.begin(9600);
delay(1000);
// Initialize built-in LED
pinMode(LED_PIN, OUTPUT);
digitalWrite(LED_PIN, LOW);
// Connect to WiFi manually
Serial.print("Connecting to ");
Serial.println(WIFI_SSID);
WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Start HTTP server
httpServer.begin();
// Configure WebSocket server with lambda handlers
wss.onConnection([](WebSocket &ws) {
Serial.println("New WebSocket connection");
// Set up message handler
ws.onMessage([](WebSocket &ws, const WebSocket::DataType dataType, const char *message, uint16_t length) {
handleWebSocketMessage(ws, message, length);
});
// Send welcome message
const char welcome[] = "Connected to ESP32!";
ws.send(WebSocket::DataType::TEXT, welcome, strlen(welcome));
});
// Start WebSocket server
wss.begin();
}
Gestion des messages WebSocket
void handleWebSocketMessage(WebSocket &ws, const char *message, uint16_t length) {
Serial.print("[WebSocket] Received (");
Serial.print(length);
Serial.print(" bytes): ");
Serial.println(message);
String msgStr = String(message);
String response = "";
// Command processing with simple string matching
if (msgStr.equalsIgnoreCase("ping")) {
response = "pong";
}
else if (msgStr.equalsIgnoreCase("hello")) {
response = "Hello from ESP32!";
}
else if (msgStr.equalsIgnoreCase("time")) {
response = "Uptime: " + String(millis()/1000) + " seconds";
}
else if (msgStr.equalsIgnoreCase("led on")) {
digitalWrite(LED_PIN, HIGH);
response = "LED ON";
}
else if (msgStr.equalsIgnoreCase("led off")) {
digitalWrite(LED_PIN, LOW);
response = "LED OFF";
}
else {
response = "Echo: " + msgStr;
}
// Send response
ws.send(WebSocket::DataType::TEXT, response.c_str(), response.length());
}
Boucle principale avec traitement WebSocket
void loop() {
// Handle HTTP requests
WiFiClient httpClient = httpServer.available();
if (httpClient) {
handleHTTPClient(httpClient);
}
// Handle WebSocket connections
wss.listen();
delay(10);
}
// HTTP request handler
void handleHTTPClient(WiFiClient client) {
String request = "";
// Read HTTP request
while (client.connected() && client.available()) {
String line = client.readStringUntil('\n');
if (line == "\r") break;
if (request.length() == 0) request = line;
}
// Serve web page or 404
if (request.indexOf("GET / HTTP") >= 0) {
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");
client.println();
client.print(htmlPage);
} else {
client.println("HTTP/1.1 404 Not Found");
client.println("Connection: close");
client.println();
}
client.stop();
}
Client WebSocket JavaScript
Gestion des connexions
let websocket;
let isConnected = false;
function initWebSocket() {
const wsUrl = `ws://${window.location.hostname}:81/`;
websocket = new WebSocket(wsUrl);
websocket.onopen = function(event) {
console.log('WebSocket connected');
isConnected = true;
updateConnectionStatus('Connected');
};
websocket.onmessage = function(event) {
handleWebSocketMessage(JSON.parse(event.data));
};
websocket.onclose = function(event) {
console.log('WebSocket disconnected');
isConnected = false;
updateConnectionStatus('Disconnected');
// Auto-reconnect after 3 seconds
setTimeout(initWebSocket, 3000);
};
websocket.onerror = function(error) {
console.error('WebSocket error:', error);
updateConnectionStatus('Error');
};
}
Gestion des messages
function handleWebSocketMessage(event) {
const message = event.data;
console.log('Received:', message);
// Handle simple string responses (matching actual implementation)
if (message === 'pong') {
console.log('Ping response received');
addMessageToHistory('Received: pong');
} else if (message.startsWith('Hello from ESP32')) {
addMessageToHistory('Received: ' + message);
} else if (message.startsWith('Uptime:')) {
updateUptimeDisplay(message);
addMessageToHistory('Received: ' + message);
} else if (message === 'LED ON' || message === 'LED OFF') {
updateLedStatus(message);
addMessageToHistory('Received: ' + message);
} else if (message.startsWith('Echo:')) {
addMessageToHistory('Received: ' + message);
} else {
addMessageToHistory('Received: ' + message);
}
}
Envoi des commandes
// Simple string-based command sending (matching actual implementation)
function sendCommand(command) {
if (isConnected) {
websocket.send(command);
addMessageToHistory('Sent: ' + command);
} else {
alert('WebSocket not connected!');
}
}
function controlLED(action) {
if (action === 'on') {
sendCommand('led on');
} else if (action === 'off') {
sendCommand('led off');
}
}
function sendPing() {
sendCommand('ping');
}
function sendHello() {
sendCommand('hello');
}
function getUptime() {
sendCommand('time');
}
Fonctionnalités de l'interface HTML
Interface de test WebSocket
La page HTML incluse fournit une interface complète de test WebSocket :
- Contrôles de connexion avec les fonctions de connexion et de déconnexion
- Boutons de commandes rapides pour des commandes courantes (ping, hello, time, contrôle des LED)
- Champ de saisie de message pour l'envoi de commandes texte personnalisées
- Journal des messages en temps réel affichant toutes les communications
- Affichage de l'état de la connexion avec des indicateurs visuels
Fonctions JavaScript intégrées
L'interface HTML comprend des fonctions JavaScript correspondant à la structure des commandes ESP32 :
// Send simple string commands to ESP32
function sendQuick(msg) {
if (connected && ws) {
ws.send(msg);
addMsg('You: ' + msg, 'sent');
} else {
addMsg('Not connected!');
}
}
// Handle WebSocket events
ws.onmessage = function(event) {
console.log('WebSocket message received:', event.data);
addMsg('ESP32: ' + event.data, 'received');
};
Notes d'implémentation
Architecture simplifiée
La mise en œuvre réelle utilise une approche simple :
- Serveurs séparés : WiFiServer pour HTTP et WebSocketServer pour WebSocket
- Connexion WiFi manuelle : Configuration standard WiFi.begin() sans gestion de serveur intégrée
- Messagerie basée sur des chaînes : commandes simples sous forme de chaînes au lieu de protocoles JSON
- Gestionnaires lambda : gestionnaires d'événements WebSocket définis comme des fonctions lambda en ligne
- Service HTML de base : impression directe du contenu HTML avec client.print() à partir du fichier d'en-tête
Limites de l'implémentation actuelle
- Pas de diffusion des données des capteurs (comme indiqué dans les exemples de la documentation)
- Pas d’analyse des messages JSON
- Pas de diffusion vers plusieurs clients
- Pas de gestion de connexion au-delà d'une connexion/déconnexion de base
- Pas de système de heartbeat ni de keepalive
- Pas de mise en queue des messages ni de fonctionnalités de fiabilité
Commandes disponibles
Les commandes qui fonctionnent dans l’implémentation réelle :
- ping → pong
- hello → Bonjour de l'ESP32!
- time → Temps de fonctionnement : X secondes
- led on → LED ALLUMÉE (allume LED_PIN)
- led off → LED ÉTEINTE (éteint LED_PIN)
- Tout autre texte → Écho: [votre message]
Dépannage
Problèmes courants
Échec de la connexion WebSocket
- Vérifier si le port WebSocket (81) est accessible
- Vérifier que les paramètres du pare-feu ne bloquent pas le port 81
- Utiliser les outils de développement du navigateur pour vérifier les erreurs WebSocket
- S'assurer que l'adresse IP de l'ESP32 est correcte
Messages non reçus
- Vérifiez le moniteur série pour les événements WebSocket et la réception de messages
- Vérifiez que les chaînes de commandes correspondent exactement (insensible à la casse)
- Testez d'abord des commandes simples comme « ping »
LED ne répond pas
- Confirmez que LED_PIN est correctement défini pour votre carte ESP32 (généralement GPIO 2)
- Vérifiez le moniteur série pour les messages de traitement des commandes
- Vérifiez que les commandes « led on » et « led off » sont envoyées exactement
Commandes de débogage
Utilisez ces commandes pour tester la fonctionnalité WebSocket :
- ping - Test de connectivité simple
- hello - Test de réponse à une salutation
- time - Test du temps de fonctionnement de l'ESP32
- led on / led off - Test de contrôle matériel
- Tout autre texte sera renvoyé pour tester la communication
Applications du monde réel
Contrôle de base de l'IoT
L'implémentation simple actuelle convient à :
- Contrôle LED à distance pour l'indication de l'état de l'appareil
- Systèmes de commande et de réponse simples pour l'interaction avec l'appareil
- Tests de connectivité WebSocket à des fins de développement
- Démonstrations de communication en temps réel de base
Améliorations potentielles
Pour étendre cet exemple en vue d'une utilisation en production, envisagez d'ajouter :
- Analyse des messages JSON pour des données structurées
- Capacités de diffusion en continu des données des capteurs
- Gestion de plusieurs connexions clients
- Fonctionnalités d'authentification et de sécurité
- Gestion des erreurs et logique de reconnexion
Prochaines étapes
- Ajouter l'analyse des messages JSON en utilisant la bibliothèque ArduinoJson
- Intégrer des capteurs réels (température, humidité, etc.)
- Implémenter la diffusion vers plusieurs clients WebSocket
- Ajouter une authentification pour un accès sécurisé
- Créer des interfaces d'applications mobiles utilisant des connexions WebSocket