ESP32 - WebSocket
In deze handleiding leert u wat WebSocket is, waarom u het nodig heeft om ESP32 soepel te besturen, en hoe u WebSocket met ESP32 gebruikt. In een praktisch voorbeeld maken we een chatapplicatie tussen de webbrowser en ESP32, waarmee u het volgende kunt doen:
- Typ een bericht in het chatvenster van de webbrowser en stuur dit naar de ESP32. U kunt dit aanpassen om de ESP32 te besturen.
- Ontvang real-time berichten van de ESP32. Dit kunt u gebruiken om de ESP32 in real-time te monitoren.
Hardware Benodigd
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.
Wat is ESP32 WebSocket?
U vraagt zich misschien af: "Wat is WebSocket?" Het is redelijk eenvoudig: WebSocket is een technologie die het mogelijk maakt dat een webbrowser rechtstreeks en in real-time met een webserver communiceert.
- Zonder WebSocket moet u de webpagina verversen om updates te zien. Dat is niet erg praktisch.
- Met WebSocket blijven de webpagina en server continu verbonden. Daardoor kunnen ze direct informatie uitwisselen zonder de pagina opnieuw te laden.
U komt WebSocket waarschijnlijk dagelijks tegen in webapplicaties zoals online games, instant messaging en beursupdates.
Waarom hebben we WebSocket nodig om ESP32 soepel te besturen?
Stel, u wilt uw bestuurbare auto op afstand bedienen via een webinterface op uw telefoon of computer. Zonder WebSocket zou u elke keer de webpagina moeten verversen om de richting of snelheid van de auto aan te passen. Dat is alsof u telkens op een "ververs"-knop moet drukken om uw commando door te geven.
Met WebSocket is het alsof er een continue en directe verbinding is tussen uw telefoon/computer en de auto. U hoeft de pagina niet telkens te verversen om de auto te sturen of de snelheid aan te passen. De auto "luistert" continu naar uw commando’s in real-time, zonder vertraging door steeds opnieuw laden van de pagina.
Samengevat stelt WebSocket u in staat om:
- Gegevens van de webbrowser naar de ESP32 te sturen zonder de pagina te verversen.
- Gegevens van de ESP32 naar de webbrowser te sturen zonder de pagina te verversen.
Dit maakt tweerichtingscommunicatie in real-time mogelijk.
Voordelen van WebSocket met ESP32:
- Realtime Besturing: WebSocket maakt directe communicatie met de ESP32 mogelijk, wat snelle reacties op commando’s geeft voor een vloeiende gebruikerservaring.
- Persistente Verbinding: Houd een doorlopende verbinding zonder de bedieningspagina te verversen, waardoor direct instructies gestuurd kunnen worden.
- Efficiëntie: Geniet van vlotte reacties zonder steeds de pagina te hoeven herladen, wat de algehele gebruiksvriendelijkheid en efficiëntie verhoogt.
Web Chat met ESP32 via WebSocket
De inhoud van de webpagina (HTML, CSS, JavaScript) wordt apart opgeslagen in een index.h bestand. Zo heeft u in de Arduino IDE twee codebestanden:
- Een .ino bestand met de ESP32-code, dat een webserver en WebSocket-server creëert
- Een .h bestand dat de inhoud van de webpagina bevat
Snel aan de slag
- Als u ESP32 voor het eerst gebruikt, bekijk dan hoe u de omgeving instelt voor ESP32 in Arduino IDE.
- Verbind het ESP32-board met uw PC via een micro-USB-kabel
- Open de Arduino IDE op uw PC.
- Selecteer het juiste ESP32-board (bijv. ESP32 Dev Module) en de juiste COM-poort.
- Open de Library Manager door te klikken op het Library Manager icoon in de linker navigatiebalk van de Arduino IDE.
- Zoek op “DIYables ESP32 WebServer” en vind de Web Server bibliotheek gemaakt door DIYables.
- Klik op de Install knop om de Web Server bibliotheek te installeren.
- Maak in Arduino IDE een nieuwe sketch aan, geef deze een naam, bijvoorbeeld newbiely.com.ino
- Kopieer onderstaande code en open deze in Arduino IDE
/*
* Deze ESP32 code is ontwikkeld door newbiely.nl
* Deze ESP32 code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/tutorials/esp32/esp32-websocket
*/
#include <DIYables_ESP32_WebServer.h>
#include "index.h"
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
DIYables_ESP32_WebSocket* webSocket;
// Web Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
// HTML_CONTENT from the index.h file
server.sendResponse(client, HTML_CONTENT);
}
// WebSocket event handlers
void onWebSocketOpen(net::WebSocket& ws) {
Serial.println("New WebSocket connection");
// Send welcome message
const char welcome[] = "Connected to ESP32 WebSocket Server!";
}
void onWebSocketMessage(net::WebSocket& ws, const net::WebSocket::DataType dataType, const char* message, uint16_t length) {
Serial.print("WebSocket Received (");
Serial.print(length);
Serial.print(" bytes): ");
Serial.println(message);
// Broadcast response to all connected clients using the library
if (webSocket != nullptr) {
String response = "Received: " + String((char*)message);
webSocket->broadcastTXT(response);
Serial.print("WebSocket sent (");
Serial.print(response.length());
Serial.print(" bytes): ");
Serial.println(response);
}
}
void onWebSocketClose(net::WebSocket& ws, const net::WebSocket::CloseCode code, const char* reason, uint16_t length) {
Serial.println("WebSocket client disconnected");
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("ESP32 Web Server and WebSocket Server");
// Configure web server routes
server.addRoute("/", handleHome);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
// Enable WebSocket functionality
webSocket = server.enableWebSocket(81);
if (webSocket != nullptr) {
// Set up WebSocket event handlers
webSocket->onOpen(onWebSocketOpen);
webSocket->onMessage(onWebSocketMessage);
webSocket->onClose(onWebSocketClose);
} else {
Serial.println("Failed to start WebSocket server");
}
}
void loop() {
// Then handle HTTP requests
server.handleClient();
// Handle WebSocket
server.handleWebSocket();
}
- Pas de WiFi-gegevens (SSID en wachtwoord) in de code aan naar uw eigen netwerkgegevens.
- Maak het index.h bestand aan in Arduino IDE door:
- Ofwel te klikken op de knop onder het seriële monitor icoon en New Tab te kiezen, of gebruik Ctrl+Shift+N.
- Geef het bestand de naam index.h en klik op OK.
- Kopieer onderstaande code en plak deze in index.h.
- Nu heeft u de code in twee bestanden: newbiely.com.ino en index.h
- Klik op de Upload knop in Arduino IDE om de code naar de ESP32 te uploaden.
- Open de Seriële Monitor
- Bekijk het resultaat in de Seriële Monitor.
- Noteer het IP-adres dat wordt weergegeven en voer dit adres in de adresbalk van een webbrowser op uw smartphone of PC in.
- U ziet dan de webpagina zoals hieronder afgebeeld:
- Klik op de CONNECT-knop om de webpagina via WebSocket te verbinden met de ESP32.
- Typ wat tekst en verstuur dit naar de ESP32.
- U ziet dan de reactie van de ESP32.
- Als u de HTML-inhoud in index.h aanpast maar niets verandert aan newbiely.com.ino, zal Arduino IDE bij compileren en uploaden de HTML-inhoud niet bijwerken.
- Om Arduino IDE de HTML-inhoud toch te laten bijwerken, maakt u een wijziging aan het newbiely.com.ino bestand (bijv. een lege regel toevoegen of een commentaarregel).
/*
* Deze ESP32 code is ontwikkeld door newbiely.nl
* Deze ESP32 code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/tutorials/esp32/esp32-websocket
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<!-- saved from url=(0019)http://192.168.0.2/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>ESP32 WebSocket</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<link rel="icon" href="https://diyables.io/images/page/diyables.svg">
<style>
/* Add some basic styling for the chat window */
body {
font-size: 16px;
}
.chat-container {
width: 400px;
margin: 0 auto;
padding: 10px;
}
.chat-messages {
height: 250px;
overflow-y: auto;
border: 1px solid #444;
padding: 5px;
margin-bottom: 5px;
}
.user-input {
display: flex;
margin-bottom: 20px;
}
.user-input input {
flex: 1;
border: 1px solid #444;
padding: 5px;
}
.user-input button {
margin-left: 5px;
background-color: #007bff;
color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
}
.websocket {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.websocket button {
background-color: #007bff;
color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
}
.websocket .label {
margin-left: auto;
}
</style>
<script>
var ws;
var wsm_max_len = 4096; /* bigger length causes uart0 buffer overflow with low speed smart device */
function update_text(text) {
var chat_messages = document.getElementById("chat-messages");
chat_messages.innerHTML += text + '<br>';
chat_messages.scrollTop = chat_messages.scrollHeight;
}
function send_onclick() {
if(ws != null) {
var message = document.getElementById("message").value;
if (message) {
document.getElementById("message").value = "";
ws.send(message + "\n");
update_text('<span style="color:navy">' + message + '</span>');
// You can send the message to the server or process it as needed
}
}
}
function connect_onclick() {
if(ws == null) {
ws = new WebSocket("ws://" + window.location.host + ":81");
document.getElementById("ws_state").innerHTML = "CONNECTING";
ws.onopen = ws_onopen;
ws.onclose = ws_onclose;
ws.onmessage = ws_onmessage;
} else
ws.close();
}
function ws_onopen() {
document.getElementById("ws_state").innerHTML = "<span style='color:blue'>CONNECTED</span>";
document.getElementById("bt_connect").innerHTML = "Disconnect";
document.getElementById("chat-messages").innerHTML = "";
}
function ws_onclose() {
document.getElementById("ws_state").innerHTML = "<span style='color:gray'>CLOSED</span>";
document.getElementById("bt_connect").innerHTML = "Connect";
ws.onopen = null;
ws.onclose = null;
ws.onmessage = null;
ws = null;
}
function ws_onmessage(e_msg) {
e_msg = e_msg || window.event; // MessageEvent
console.log(e_msg.data);
update_text('<span style="color:blue">' + e_msg.data + '</span>');
}
</script>
</head>
<body>
<div class="chat-container">
<h2>ESP32 WebSocket</h2>
<div class="websocket">
<button class="connect-button" id="bt_connect" onclick="connect_onclick()">Connect</button>
<span class="label">WebSocket: <span id="ws_state"><span style="color:blue">CLOSED</span></span></span>
</div>
<div class="chat-messages" id="chat-messages"></div>
<div class="user-input">
<input type="text" id="message" placeholder="Type your message...">
<button onclick="send_onclick()">Send</button>
</div>
<div class="sponsor">Sponsored by <a href="https://amazon.com/diyables">DIYables</a></div>
</div>
</body></html>
)=====";
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address IP address: 192.168.0.2
Autoscroll
Clear output
9600 baud
Newline
※ Notiz:
Regel-voor-regel Code Uitleg
De bovenstaande ESP32-code bevat regel-voor-regel uitleg in comments. Lees deze goed door!
Hoe het Systeem Werkt
De ESP32-code werkt door het creëren van zowel een webserver als een WebSocket-server. Het proces verloopt als volgt:
- Als u het IP-adres van de ESP32 invoert in een webbrowser, wordt een verzoek gedaan voor de webpagina (gebruikersinterface) bij de ESP32.
- De webserver van de ESP32 reageert door de inhoud van de pagina (HTML, CSS, JavaScript) te verzenden.
- Daarna toont de webbrowser de webpagina.
- Wanneer u op de CONNECT-knop klikt, maakt de JavaScript-code in de webpagina een WebSocket-verbinding met de WebSocket-server op de ESP32.
- Met de WebSocket-verbinding actief, wordt bij het typen en klikken op de SEND-knop de tekst via die WebSocket-verbinding naar de ESP32 gestuurd. Dit gebeurt op de achtergrond.
- Wanneer de WebSocket-server het bericht ontvangt, stuurt deze een antwoord terug naar de webpagina.
Andere voorbeelden met ESP32 en WebSocket kunt u hier vinden: