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 “ESPAsyncWebServer”, dann 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.
- Suche „WebSockets“, dann finde die WebSockets, die von Markus Sattler erstellt wurden.
- Klicke auf die Schaltfläche Installieren, um die WebSockets-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 <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("Arduino Nano ESP32 Web Server's IP address: ");
Serial.println(WiFi.localIP());
}
void loop() {
webSocket.loop();
// TODO: Your code here
}
- 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: