ESP32 - WebSocket
In diesem Tutorial lernen wir, was WebSocket ist, warum wir es verwenden müssen, um den ESP32 reibungslos zu steuern, und wie man WebSocket mit dem ESP32 verwendet. In einem praktischen Beispiel lernen wir, wie man eine Chat-Anwendung zwischen dem Webbrowser und dem ESP32 erstellt, die es Ihnen ermöglicht:
- Geben Sie eine Nachricht in das Chatfenster im Webbrowser ein und senden Sie sie an den ESP32. Sie können dies anpassen, um den ESP32 zu steuern.
- Empfangen Sie Echtzeitnachrichten vom ESP32. Sie können dies anpassen, um den ESP32 in Echtzeit zu überwachen.
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables ESP32 Starter-Kit (ESP32 enthalten) | |
| 1 | × | DIYables Sensor-Kit (30 Sensoren/Displays) | |
| 1 | × | DIYables Sensor-Kit (18 Sensoren/Displays) |
Offenlegung: Einige der in diesem Abschnitt bereitgestellten Links sind Amazon-Affiliate-Links. Wir können eine Provision für Käufe erhalten, die über diese Links getätigt werden, ohne zusätzliche Kosten für Sie. Wir schätzen Ihre Unterstützung.
Was ist ESP32 WebSocket?
Nun fragst du dich vielleicht: 'Was ist WebSocket?' Es ist ganz einfach: WebSocket ist eine Technologie, die es einem Webbrowser ermöglicht, in Echtzeit direkt mit einem Webserver zu kommunizieren.
- Ohne WebSocket müssen Sie die Webseite aktualisieren, um Updates zu erhalten. Das ist nicht sehr praktisch.
- Mit WebSocket bleiben die Webseite und der Server die ganze Zeit verbunden. Das bedeutet, dass sie Informationen sofort austauschen können, ohne die Seite neu laden zu müssen.
Du wirst wahrscheinlich bei alltäglichen Webanwendungen wie Online-Spielen, Sofortnachrichten und Börsen-Updates auf WebSocket stoßen.
Warum benötigen wir WebSocket, um den ESP32 reibungslos zu steuern?
Stellen Sie sich vor, Sie möchten Ihr ferngesteuertes Auto über eine Weboberfläche auf Ihrem Smartphone oder Computer steuern. Ohne WebSocket müssten Sie jedes Mal, wenn Sie die Richtung oder Geschwindigkeit des Autos ändern möchten, die Webseite aktualisieren. Es ist, als müssten Sie jedes Mal einen 'Neu laden'-Knopf drücken, damit Ihr Befehl das Auto erreicht.
Jetzt, mit WebSocket, ist es wie eine kontinuierliche und direkte Verbindung zwischen deinem Telefon oder Computer und dem Auto. Du musst die Seite nicht mehr jedes Mal aktualisieren, wenn du das Auto steuern oder seine Geschwindigkeit anpassen möchtest. Es ist, als würde das Auto deine Befehle in Echtzeit empfangen, ohne Verzögerungen durch ständiges Neuladen der Seite.
Im Allgemeinen ermöglicht WebSocket Ihnen Folgendes:
- Daten vom Webbrowser an den ESP32 senden, ohne die Webseite neu zu laden.
- Daten vom ESP32 an den Webbrowser senden, ohne die Webseite neu zu laden.
Dies ermöglicht eine zweiseitige Kommunikation in Echtzeit.
Vorteile von WebSocket mit ESP32:
- Echtzeitsteuerung: WebSocket ermöglicht eine sofortige Kommunikation mit dem ESP32 und gewährleistet schnelle Reaktionen auf Befehle für ein nahtloses Benutzererlebnis.
- Dauerhafte Verbindung: Eine kontinuierliche Verbindung aufrechterhalten, ohne die Steuerseite zu aktualisieren, wodurch eine jederzeit bereite Kommunikationsverbindung für sofortige Anweisungen geschaffen wird.
- Effizienz: Schnelle Reaktionen erleben, ohne die Seite ständig neu laden zu müssen, was das Gesamterlebnis des Nutzers und die Effizienz erhöht.
Web-Chat mit ESP32 über WebSocket
Der Inhalt der Webseite (HTML, CSS, JavaScript) wird separat in einer index.h-Datei gespeichert. Daher werden wir zwei Code-Dateien in der Arduino-IDE haben:
- Eine .ino-Datei, die ESP32-Code enthält und einen Webserver sowie einen WebSocket-Server erstellt
- Eine .h-Datei, die den Inhalt der Webseite enthält
Schnelle Schritte
- Wenn Sie ESP32 zum ersten Mal verwenden, sehen Sie sich wie man die Entwicklungsumgebung für ESP32 in der Arduino-IDE einrichtet an.
- Verbinden Sie das ESP32-Board mit Ihrem PC über ein Micro-USB-Kabel.
- Öffnen Sie die Arduino IDE auf Ihrem PC.
- Wählen Sie das richtige ESP32-Board (z. B. ESP32 Dev Module) und den COM-Port aus.
- Öffnen Sie den Bibliotheks-Manager, indem Sie auf das Bibliotheks-Manager-Symbol in der linken Navigationsleiste der Arduino IDE klicken.
- Suchen Sie “ESPAsyncWebServer”, und finden Sie den ESPAsyncWebServer, der von lacamera erstellt wurde.
- Klicken Sie auf die Schaltfläche Installieren, um die ESPAsyncWebServer-Bibliothek zu installieren.
- Sie werden aufgefordert, die Abhängigkeit zu installieren. Klicken Sie auf die Schaltfläche Alle installieren.
- Suchen Sie „WebSockets“, dann finden Sie die WebSockets, die von Markus Sattler erstellt wurden.
- Klicken Sie auf die Schaltfläche Installieren, um die WebSockets-Bibliothek zu installieren.
- In der Arduino IDE erstelle ein neues Sketch, gib ihm einen Namen, zum Beispiel newbiely.com.ino.
- Kopiere den untenstehenden Code und öffne ihn mit der Arduino IDE.
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/esp32/esp32-websocket
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <WebSocketsServer.h>
#include "index.h"
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
AsyncWebServer server(80);
WebSocketsServer webSocket = WebSocketsServer(81); // WebSocket server on port 81
void webSocketEvent(uint8_t num, WStype_t type, uint8_t* payload, size_t length) {
switch (type) {
case WStype_DISCONNECTED:
Serial.printf("[%u] Disconnected!\n", num);
break;
case WStype_CONNECTED:
{
IPAddress ip = webSocket.remoteIP(num);
Serial.printf("[%u] Connected from %d.%d.%d.%d\n", num, ip[0], ip[1], ip[2], ip[3]);
}
break;
case WStype_TEXT:
Serial.printf("[%u] Received text: %s\n", num, payload);
// Send a response back to the client
webSocket.sendTXT(num, "Received: " + String((char*)payload));
break;
}
}
void setup() {
Serial.begin(9600);
delay(1000);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
// Initialize WebSocket server
webSocket.begin();
webSocket.onEvent(webSocketEvent);
// Serve a basic HTML page with JavaScript to create the WebSocket connection
server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) {
Serial.println("Web Server: received a web page request");
String html = HTML_CONTENT; // Use the HTML content from the index.h file
request->send(200, "text/html", html);
});
server.begin();
Serial.print("ESP32 Web Server's IP address: ");
Serial.println(WiFi.localIP());
}
void loop() {
webSocket.loop();
// TODO: Your code here
}
- Passen Sie die WiFi-Informationen (SSID und Passwort) im Code an, damit sie zu Ihren eigenen Zugangsdaten passen.
- Erstellen Sie die index.h-Datei in der Arduino IDE, indem Sie:
- Klicken Sie entweder auf die Schaltfläche direkt unter dem Symbol des seriellen Monitors und wählen Sie Neuer Tab, oder verwenden Sie die Tasten Ctrl+Shift+N.
- Geben Sie den Dateinamen index.h ein und klicken Sie auf die OK-Schaltfläche
- Kopiere den untenstehenden Code und füge ihn in die index.h ein.
- Jetzt hast du den Code in zwei Dateien: newbiely.com.ino und index.h
- Klicke auf die Schaltfläche Upload in der Arduino-IDE, um den Code auf den ESP32 hochzuladen.
- Öffne den seriellen Monitor.
- Schau dir das Ergebnis im seriellen Monitor an.
- Notiere die angezeigte IP-Adresse und gib diese Adresse in die Adresszeile eines Webbrowsers auf deinem Smartphone oder PC ein.
- Du wirst die Webseite wie unten dargestellt sehen:
- Klicken Sie auf die CONNECT-Schaltfläche, um die Webseite über WebSocket mit dem ESP32 zu verbinden.
- Tippen Sie einige Wörter ein und senden Sie sie an den ESP32.
- Sie werden die Antwort vom ESP32 sehen.
- Wenn du den HTML-Inhalt in der index.h änderst und nichts an der newbiely.com.ino-Datei berührst, wird die Arduino IDE beim Kompilieren und Hochladen des Codes auf den ESP32 den HTML-Inhalt nicht aktualisieren.
- Um in diesem Fall die Arduino IDE dazu zu bringen, den HTML-Inhalt zu aktualisieren, nimmst du eine Änderung in der newbiely.com.ino-Datei vor (z. B. eine leere Zeile hinzufügen, einen Kommentar hinzufügen).
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/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:
Zeilenweise Code-Erklärung
Der obige ESP32-Code enthält eine Zeilen-für-Zeile-Erklärung. Bitte lesen Sie die Kommentare im Code!
Wie das System funktioniert
Der ESP32-Code funktioniert, indem sowohl ein Webserver als auch ein WebSocket-Server erstellt werden. Der Ablauf gestaltet sich wie folgt:
- Wenn Sie die IP-Adresse des ESP32 in einen Webbrowser eingeben, wird eine Anfrage für die Webseite (Benutzeroberfläche) des ESP32 gestellt.
- Der Webserver des ESP32 antwortet, indem er den Inhalt der Webseite (HTML, CSS, JavaScript) überträgt.
- Anschließend zeigt Ihr Webbrowser die Webseite an.
- Wenn Sie auf die CONNECT-Schaltfläche klicken, baut der in der Webseite eingebettete JavaScript-Code eine WebSocket-Verbindung zum WebSocket-Server auf dem ESP32 auf.
- Wenn die WebSocket-Verbindung hergestellt ist, geben Sie etwas ein und klicken Sie auf die SEND-Schaltfläche; der JavaScript-Code sendet diesen Text im Hintergrund über die WebSocket-Verbindung an den ESP32.
- Beim Empfang des Winkelwerts sendet der WebSocket-Server eine Antwort an die Webseite zurück.
Unten finden Sie weitere ESP32-WebSocket-Beispiele: