ESP32 WebSocket Server - Real-Time Communicatie Tutorial
WebServerWithWebSocket Voorbeeld - Real-Time Communicatie
Overzicht
Dit voorbeeld laat zien hoe u een geavanceerde multi-page webserver met real-time WebSocket-communicatie op de ESP32 kunt maken, wat bidirectionele gegevensuitwisseling tussen de browser en ESP32 mogelijk maakt.
Kenmerken
- Real-time WebSocket-communicatie voor directe bidirectionele berichtenuitwisseling
- Eenvoudige op strings gebaseerde commando’s (ping, hello, time, led on/off)
- LED-besturing via WebSocket-commando’s
- Ingebouwde HTTP-server die de WebSocket testinterface serveert
- Echo-functionaliteit voor het testen van berichttransmissie
- Monitoring van verbindingsstatus met automatische herverbinding
Benodigde Hardware
Of u kunt de volgende kits kopen:
| 1 | × | DIYables Sensorkit (30 sensoren/displays) | |
| 1 | × | DIYables Sensorkit (18 sensoren/displays) |
Openbaarmaking: Sommige van de links in deze sectie zijn Amazon-affiliate links. We kunnen een commissie ontvangen voor aankopen die via deze links worden gedaan, zonder extra kosten voor u. We waarderen uw steun.
Bibliotheek Installatie
Volg deze stappen nauwkeurig:
- Als u voor het eerst met de ESP32 werkt, raadpleeg dan de tutorial over het instellen van de omgeving voor ESP32 in de Arduino IDE.
- Verbind het ESP32-board met uw computer via een USB-kabel.
- Start de Arduino IDE op uw computer.
- Selecteer het juiste ESP32 board (bijv. ESP32) en de COM-poort.
- Open de Bibliotheekbeheerder door te klikken op het Library Manager icoon aan de linkerkant van de Arduino IDE.
- Zoek op Web Server for ESP32 en vind de mWebSockets bibliotheek van DIYables.
- Klik op de Install knop om de mWebSockets bibliotheek toe te voegen.
WebSocket Voorbeeld
- Open in Arduino IDE File Examples Web Server for ESP32 WebServerWithWebSocket om de voorbeeldcode te openen.
Code Structuur
Het project bestaat uit twee hoofdbestanden:
- websocket_html.h:
Bevat de HTML-, CSS- en JavaScript-code voor de webinterface. Dit bestand definieert de gebruikersinterface voor interactie met de ESP32 via WebSocket, inclusief knoppen voor het verzenden van commando’s, een berichtenlog en indicatoren voor de verbindingsstatus.
- WebServerWithWebSocket.ino:
Implementeert de hoofdserverlogica op de ESP32. Dit bestand zet de HTTP- en WebSocket-servers op, beheert de WiFi-verbinding, verwerkt binnenkomende WebSocket-berichten en bestuurt hardware (zoals de ingebouwde LED) op basis van ontvangen commando’s.
Circuitverbinding
Er zijn geen externe componenten nodig – dit voorbeeld gebruikt de ingebouwde LED op pin 13.
WebSocket Communicatie
Verbindingsgegevens
- Webserver Poort: 80 (HTTP)
- WebSocket Poort: 81 (WebSocket)
- Protocol: RFC 6455 compliant WebSocket
Berichttypen
De daadwerkelijke implementatie gebruikt eenvoudige stringcommando’s:
- Ping: "ping" → Reactie: "pong"
- Groet: "hello" → Reactie: "Hello from ESP32!"
- Uptime: "time" → Reactie: "Uptime: X seconds"
- LED-besturing: "led on" / "led off" → Reactie: "LED ON" / "LED OFF"
- Echo: Elke andere tekst → Reactie: "Echo: [uw bericht]"
Installatie-instructies
1. Netwerkconfiguratie
Pas de WiFi-gegevens rechtstreeks aan in het WebServerWithWebSocket.ino bestand:
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
2. Code uploaden en output monitoren
- Verbind uw ESP32 met de computer
- Selecteer het juiste board en de juiste poort in de Arduino IDE
- Upload de WebServerWithWebSocket.ino sketch
- Open de Seriële Monitor (9600 baud)
- Wacht op WiFi-verbinding
- Noteer zowel het HTTP- als het WebSocket-serveradres
- Als u het IP-adres niet in de Seriële Monitor ziet, druk dan op de resetknop van het ESP32-board
- Open een webbrowser en voer het IP-adres van de ESP32 in de adresbalk in (bijv. http://192.168.x.x/). U ziet de webinterface zoals hieronder:
- Klik op de "Connect" knop om via WebSocket verbinding te maken tussen de webpagina en de ESP32.
- Zodra de verbindingsstatus "Connected" toont, klikt u één voor één op de knoppen om de bidirectionele communicatie tussen de webinterface en ESP32 te testen. Het resultaat ziet er zo uit:
Webinterface Kenmerken
De HTML-interface (uit websocket_html.h) biedt:
- WebSocket-verbindingbeheer met connect/ disconnect knoppen
- Eenvoudige commando-knoppen voor ping, hello, time, LED aan/uit
- Berichtinvoerveld om aangepaste commando’s te verzenden
- Realtime berichtgeschiedenis die verstuurde en ontvangen berichten toont
- Verbindingsstatusindicator die de status van de WebSocket toont
Code Uitleg
WebSocket Server Configuratie
#include <DIYables_ESP32_WebServer.h>
#include "websocket_html.h"
// LED configuratie
#define LED_PIN 2 // ESP32 ingebouwde LED pin
// Server configuratie
WiFiServer httpServer(80);
constexpr uint16_t wsPort = 81;
WebSocketServer wss{wsPort};
void setup() {
Serial.begin(9600);
delay(1000);
// Initialiseert ingebouwde LED
pinMode(LED_PIN, OUTPUT);
digitalWrite(LED_PIN, LOW);
// Maak handmatig verbinding met WiFi
Serial.print("Verbinden met ");
Serial.println(WIFI_SSID);
WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Start HTTP-server
httpServer.begin();
// Configureer WebSocket-server met lambda handlers
wss.onConnection([](WebSocket &ws) {
Serial.println("Nieuwe WebSocket verbinding");
// Stel berichtverwerker in
ws.onMessage([](WebSocket &ws, const WebSocket::DataType dataType, const char *message, uint16_t length) {
handleWebSocketMessage(ws, message, length);
});
// Stuur welkomstbericht
const char welcome[] = "Connected to ESP32!";
ws.send(WebSocket::DataType::TEXT, welcome, strlen(welcome));
});
// Start WebSocket-server
wss.begin();
}
WebSocket Berichtverwerking
void handleWebSocketMessage(WebSocket &ws, const char *message, uint16_t length) {
Serial.print("[WebSocket] Ontvangen (");
Serial.print(length);
Serial.print(" bytes): ");
Serial.println(message);
String msgStr = String(message);
String response = "";
// Commandoverwerking met eenvoudige stringvergelijking
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;
}
// Verstuur reactie
ws.send(WebSocket::DataType::TEXT, response.c_str(), response.length());
}
Hoofdloop met WebSocket Verwerking
void loop() {
// Verwerk HTTP-verzoeken
WiFiClient httpClient = httpServer.available();
if (httpClient) {
handleHTTPClient(httpClient);
}
// Verwerk WebSocket-verbindingen
wss.listen();
delay(10);
}
// HTTP-verzoekverwerker
void handleHTTPClient(WiFiClient client) {
String request = "";
// Lees HTTP-verzoek
while (client.connected() && client.available()) {
String line = client.readStringUntil('\n');
if (line == "\r") break;
if (request.length() == 0) request = line;
}
// Serveer webpagina of 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();
}
JavaScript WebSocket Client
Verbindingsbeheer
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');
// Automatisch opnieuw verbinden na 3 seconden
setTimeout(initWebSocket, 3000);
};
websocket.onerror = function(error) {
console.error('WebSocket error:', error);
updateConnectionStatus('Error');
};
}
Berichtverwerking
function handleWebSocketMessage(event) {
const message = event.data;
console.log('Received:', message);
// Verwerk eenvoudige stringreacties (overeenkomend met implementatie)
if (message === 'pong') {
console.log('Ping response received');
addMessageToHistory('Ontvangen: pong');
} else if (message.startsWith('Hello from ESP32')) {
addMessageToHistory('Ontvangen: ' + message);
} else if (message.startsWith('Uptime:')) {
updateUptimeDisplay(message);
addMessageToHistory('Ontvangen: ' + message);
} else if (message === 'LED ON' || message === 'LED OFF') {
updateLedStatus(message);
addMessageToHistory('Ontvangen: ' + message);
} else if (message.startsWith('Echo:')) {
addMessageToHistory('Ontvangen: ' + message);
} else {
addMessageToHistory('Ontvangen: ' + message);
}
}
Commando’s Versturen
// Simpele op strings gebaseerde commando verzending (overeenkomend met implementatie)
function sendCommand(command) {
if (isConnected) {
websocket.send(command);
addMessageToHistory('Verzonden: ' + command);
} else {
alert('WebSocket is niet verbonden!');
}
}
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');
}
HTML Interface Kenmerken
WebSocket Testinterface
De bijgeleverde HTML-pagina biedt een complete WebSocket testinterface:
- Verbindingsbediening met connect/disconnect functionaliteit
- Snelle commando-knoppen voor veelgebruikte commando’s (ping, hello, time, LED-besturing)
- Berichtinvoerveld voor het verzenden van aangepaste tekstcommando’s
- Realtime berichtenlog die alle communicatie toont
- Weergave van verbindingsstatus met visuele indicatoren
Ingebouwde JavaScript Functies
De HTML-interface bevat JavaScript-functies die aansluiten bij de ESP32-commandostructuur:
// Verstuur eenvoudige stringcommando’s naar ESP32
function sendQuick(msg) {
if (connected && ws) {
ws.send(msg);
addMsg('U: ' + msg, 'sent');
} else {
addMsg('Niet verbonden!');
}
}
// Afhandeling WebSocket evenementen
ws.onmessage = function(event) {
console.log('WebSocket bericht ontvangen:', event.data);
addMsg('ESP32: ' + event.data, 'received');
};
Implementatienotities
Vereenvoudigde Architectuur
De daadwerkelijke implementatie gebruikt een eenvoudige aanpak:
- Gescheiden servers: WiFiServer voor HTTP en WebSocketServer voor WebSocket
- Handmatige WiFi-verbinding: standaard WiFi.begin() zonder geïntegreerd serverbeheer
- Op strings gebaseerde berichtuitwisseling: eenvoudige stringcommando’s zonder JSON-protocol
- Lambda-handlers: WebSocket event handlers gedefinieerd als inline lambda-functies
- Eenvoudige HTML-servicing: direct client.print() van HTML-inhoud uit headerbestand
Beperkingen van de Huidige Implementatie
- Geen streaming van sensordata (zoals in documentatievoorbeelden)
- Geen JSON-berichtanalyse
- Geen broadcast naar meerdere clients
- Geen uitgebreid verbindingbeheer boven connect/disconnect
- Geen heartbeat of keepalive systeem
- Geen berichtwachtrij of betrouwbaarheidssysteem
Beschikbare Commando’s
De werkende commando’s in deze implementatie:
- ping → pong
- hello → Hello from ESP32!
- time → Uptime: X seconds
- led on → LED ON (zet LED_PIN aan)
- led off → LED OFF (zet LED_PIN uit)
- Elke andere tekst → Echo: [uw bericht]
Problemen oplossen
Veelvoorkomende Problemen
WebSocket verbinding mislukt
- Controleer of poort 81 voor WebSocket toegankelijk is
- Controleer firewall-instellingen die poort 81 blokkeren
- Gebruik browser ontwikkelaarstools om WebSocket fouten te controleren
- Zorg dat het IP-adres van de ESP32 klopt
Berichten worden niet ontvangen
- Controleer de Seriële Monitor op WebSocket events en berichtontvangst
- Controleer of de commando-strings exact overeenkomen (hoofdletterongevoelig)
- Test eerst met simpele commando’s zoals "ping"
LED reageert niet
- Controleer of LED_PIN correct is gedefinieerd voor uw ESP32 board (meestal GPIO 2)
- Check Seriële Monitor voor commandoverwerking
- Controleer of "led on" en "led off" commando’s correct worden verzonden
Debug Commando’s
Gebruik deze commando’s om de WebSocket-functionaliteit te testen:
- ping - Eenvoudige connectiviteitstest
- hello - Groet-reactietest
- time - ESP32 uptime test
- led on / led off - Hardwarebesturingstest
- Elke andere tekst wordt teruggeëchood voor communicatietest
Praktische Toepassingen
Basis IoT-besturing
De huidige simpele implementatie is geschikt voor:
- Afstandsbediening van LED’s voor eenvoudige statusindicatoren
- Eenvoudige commando/antwoord systemen voor apparaatinteractie
- WebSocket connectiviteitstests tijdens ontwikkeling
- Basale demonstraties van real-time communicatie
Mogelijke Verbeteringen
Om dit voorbeeld uit te breiden voor productie, kunt u overwegen:
- JSON-berichtanalyse voor gestructureerde data
- Streaming van sensordata
- Meerdere client-verbindingen beheren
- Authenticatie en beveiligingsfuncties toevoegen
- Foutafhandeling en herverbindingslogica
Volgende Stappen
- Voeg JSON-berichtanalyse toe met de ArduinoJson bibliotheek
- Integreer echte sensoren (temperatuur, vochtigheid, etc.)
- Implementeer broadcast naar meerdere WebSocket clients
- Voeg authenticatie toe voor beveiligde toegang
- Maak mobiele app interfaces met WebSocket-verbindingen