Arduino Nano 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 Arduino Nano 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 Arduino Nano ESP32. Sie können dies anpassen, um den Arduino Nano ESP32 zu steuern.
- Empfangen Sie Echtzeit-Nachrichten vom Arduino Nano ESP32. Sie können dies anpassen, um den Arduino Nano ESP32 in Echtzeit zu überwachen.
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 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 Arduino Nano 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 neu laden, 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 Webseite neu laden zu müssen.
Du stößt wahrscheinlich in alltäglichen Web-Apps auf WebSocket, zum Beispiel in Online-Spielen, Instant Messaging und Börsen-Updates.
Warum benötigen wir WebSocket, um den ESP32 reibungslos zu steuern?
Stell dir vor, du willst dein ferngesteuertes Auto über eine Weboberfläche auf deinem Smartphone oder Computer steuern. Ohne WebSocket müsstest du jedes Mal, wenn du die Richtung oder Geschwindigkeit des Autos ändern willst, die Webseite aktualisieren. Es ist, als müsstest du jedes Mal auf einen 'Neu laden'-Knopf drücken, damit dein 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 neu laden, wenn du das Auto steuern oder seine Geschwindigkeit anpassen möchtest. Es ist, als würde das Auto dir in Echtzeit zuhören, ohne Verzögerungen durch ständiges Neuladen der Seite.
Im Allgemeinen ermöglicht WebSocket Folgendes:
- Daten vom Webbrowser an den Arduino Nano ESP32 senden, ohne die Webseite neu zu laden.
- Daten vom Arduino Nano 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 eine nahtlose Benutzererfahrung.
- Persistente Verbindung: Aufrechterhalten Sie eine durchgehende Verbindung, ohne die Kontrollseite zu aktualisieren, und schaffen Sie so eine jederzeit bereite Kommunikationslinie für unmittelbare Anweisungen.
- Effizienz: Erleben Sie schnelle Reaktionen, ohne ständiges Neuladen der Seite, was das allgemeine Benutzererlebnis verbessert und die Effizienz erhöht.
Web-Chat mit dem Arduino Nano ESP32 über WebSocket
Der Inhalt der Webseite (HTML, CSS, JavaScript) wird separat in einer index.h-Datei gespeichert. Also werden wir zwei Code-Dateien in der Arduino IDE haben:
- Eine .ino-Datei, die Arduino Nano ESP32-Code enthält, der einen Webserver und einen WebSocket-Server erstellt
- Eine .h-Datei, die den Inhalt der Webseite enthält
Schnelle Schritte
- Wenn dies das erste Mal ist, dass Sie Arduino Nano ESP32 verwenden, sehen Sie sich wie man die Umgebung für Arduino Nano ESP32 in der Arduino IDE einrichtet.
- Schließen Sie das Arduino Nano ESP32-Board über ein USB-Kabel an Ihren PC an.
- Öffnen Sie die Arduino IDE auf Ihrem PC.
- Wählen Sie das richtige Arduino Nano ESP32-Board aus (z. B. Arduino Nano ESP32 und COM-Port).
- Öffnen Sie den Bibliotheks-Manager, indem Sie auf das Bibliotheks-Manager-Symbol in der linken Navigationsleiste der Arduino IDE klicken.
- Suchen Sie “DIYables ESP32 WebServer”, dann finden Sie den DIYables ESP32 WebServer, der von DIYables erstellt wurde.
- Klicken Sie auf die Schaltfläche Installieren, um die DIYables ESP32 WebServer-Bibliothek zu installieren.
- In der Arduino-IDE erstelle ein neues Sketch und gib ihm einen Namen, zum Beispiel newbiely.com.ino
- Kopiere den untenstehenden Code und öffne ihn mit der Arduino-IDE
/*
* Dieser Arduino Nano ESP32 Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano 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/arduino-nano-esp32/arduino-nano-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("Arduino Nano 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();
}
- Erstelle die Datei index.h in der Arduino-IDE durch:
- Entweder klickst du auf die Schaltfläche direkt unter dem Symbol des seriellen Monitors und wählst New Tab, oder verwendest die Tasten Ctrl+Shift+N.
- Geben Sie den Dateinamen index.h ein und klicken Sie auf die OK-Schaltfläche
- Kopieren Sie den untenstehenden Code und fügen Sie ihn in die index.h-Datei ein.
- Jetzt haben Sie den Code in zwei Dateien: newbiely.com.ino und index.h
- Klicken Sie in der Arduino IDE auf die Hochladen-Schaltfläche, um den Code auf den Arduino Nano ESP32 hochzuladen.
- Öffnen Sie den Seriellen Monitor.
- Schauen Sie sich das Ergebnis im Seriellen Monitor an.
- Notieren Sie sich die angezeigte IP-Adresse und geben Sie diese Adresse in die Adressleiste eines Webbrowsers auf Ihrem Smartphone oder PC ein.
- Sie sehen die unten dargestellte Webseite:
- Klicken Sie auf die VERBINDEN-Schaltfläche, um die Webseite über WebSocket mit dem Arduino Nano ESP32 zu verbinden.
- Geben Sie einige Wörter ein und senden Sie sie an den Arduino Nano ESP32.
- Sie werden die Antwort vom Arduino Nano ESP32 sehen.
- Wenn Sie den HTML-Inhalt in der index.h-Datei ändern und nichts in der newbiely.com.ino-Datei berühren, wird die Arduino IDE beim Kompilieren und Hochladen des Codes auf den ESP32 den HTML-Inhalt nicht aktualisieren.
- Um die Arduino IDE in diesem Fall dazu zu bringen, den HTML-Inhalt zu aktualisieren, nehmen Sie eine Änderung in der newbiely.com.ino-Datei vor (z. B. eine leere Zeile hinzufügen, einen Kommentar hinzufügen ...)
/*
* Dieser Arduino Nano ESP32 Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano 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/arduino-nano-esp32/arduino-nano-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>Arduino Nano 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>Arduino Nano 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
Arduino Nano 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 Arduino Nano ESP32-Code enthält eine zeilenweise Erklärung. Bitte lesen Sie die Kommentare im Code!
Wie das System funktioniert
Der Code für den Arduino Nano ESP32 funktioniert, indem er sowohl einen Webserver als auch einen WebSocket-Server erstellt. Der Prozess verläuft wie folgt:
- Wenn Sie die IP-Adresse des ESP32 in einen Webbrowser eingeben, wird eine Anfrage nach der Webseite (Benutzeroberfläche) vom Arduino Nano 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, stellt der im Webseitencode eingebettete JavaScript-Code eine WebSocket-Verbindung zum WebSocket-Server auf dem Arduino Nano ESP32 her.
- 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 Arduino Nano ESP32.
- Beim Empfang des Winkelwerts sendet der WebSocket-Server eine Antwort an die Webseite zurück.
Unten finden Sie weitere Arduino Nano ESP32 WebSocket-Beispiele: