ESP8266 - WebSocket
In diesem Tutorial lernen wir, was WebSocket ist, warum wir es verwenden müssen, um den ESP8266 reibungslos zu steuern, und wie man WebSocket mit dem ESP8266 verwendet. In einem praktischen Beispiel lernen wir, wie man eine Chat-Anwendung zwischen dem Webbrowser und dem ESP8266 erstellt, die es Ihnen ermöglicht,:
- Geben Sie eine Nachricht in das Chatfenster im Webbrowser ein und senden Sie sie an den ESP8266. Sie können dies anpassen, um den ESP8266 zu steuern.
- Empfangen Sie Echtzeitnachrichten vom ESP8266. Sie können dies anpassen, um den ESP8266 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 ESP8266 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 musst du 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 stößt wahrscheinlich in alltäglichen Web-Apps wie Online-Spiele, Instant Messaging und Börsen-Updates auf WebSocket.
Warum wir WebSocket benötigen, um den ESP8266 reibungslos zu steuern?
Stell dir vor, du möchtest dein ferngesteuertes Auto über eine Weboberfläche auf deinem Smartphone oder Computer steuern. Ohne WebSocket müsstest du jedes Mal die Seite aktualisieren, wenn du die Richtung oder Geschwindigkeit des Autos ändern möchtest. Es ist, als müsstest du jedes Mal einen 'Neu laden'-Knopf drücken, damit dein Befehl das Auto erreicht.
Jetzt, mit WebSocket, ist es, als ob eine kontinuierliche und direkte Verbindung zwischen deinem Smartphone oder Computer und dem Auto besteht. 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:
- Daten vom Webbrowser an den ESP8266 senden, ohne die Webseite neu zu laden.
- Daten vom ESP8266 an den Webbrowser senden, ohne die Webseite neu zu laden.
Dies ermöglicht eine zweiseitige Kommunikation in Echtzeit.
Vorteile von WebSocket mit ESP8266:
- Echtzeitsteuerung: WebSocket ermöglicht eine sofortige Kommunikation mit dem ESP8266, sorgt für schnelle Antworten auf Befehle und ein nahtloses Benutzererlebnis.
- Dauerhafte Verbindung: Eine durchgehende Verbindung aufrechterhalten, ohne die Steuerungsseite zu aktualisieren, wodurch eine jederzeit bereite Kommunikationsverbindung für unmittelbare Anweisungen entsteht.
- Effizienz: Erleben Sie schnelle Antworten, ohne dass die Seite ständig neu geladen werden muss, was das Gesamterlebnis des Nutzers und die Effizienz erhöht.
Web-Chat mit ESP8266 ü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 ESP8266-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 ESP8266 verwenden, sehen Sie So richten Sie die Entwicklungsumgebung für ESP8266 in der Arduino-IDE ein.
- Verbinden Sie das ESP8266-Board über ein Micro-USB-Kabel mit Ihrem PC.
- Öffnen Sie die Arduino-IDE auf Ihrem PC.
- Wählen Sie das richtige ESP8266-Board aus (z. B. NodeMCU 1.0 (ESP-12E Modul)) und den COM-Port aus.
- Öffnen Sie den Library Manager, indem Sie auf das Library Manager-Symbol in der linken Navigationsleiste der Arduino IDE klicken.
- Suchen Sie „WebSockets“, und finden Sie die WebSockets von Markus Sattler.
- Klicken Sie auf die Installieren-Schaltfläche, um die WebSockets-Bibliothek zu installieren.
- In der Arduino-IDE ein neues Sketch erstellen, gib ihm einen Namen, zum Beispiel newbiely.com.ino
- Kopiere den untenstehenden Code und öffne ihn in der Arduino-IDE.
/*
* Dieser ESP8266 NodeMCU Code wurde von newbiely.de entwickelt
* Dieser ESP8266 NodeMCU 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/esp8266/esp8266-websocket
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <WebSocketsServer.h>
#include "index.h"
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
ESP8266WebServer server(80); // Web server on port 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
String echoMessage = "Received: " + String((char*)payload);
webSocket.sendTXT(num, echoMessage);
break;
}
}
void setup() {
Serial.begin(9600);
delay(500);
// 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, []() {
Serial.println("Web Server: received a web page request");
String html = HTML_CONTENT; // Use the HTML content from the index.h file
server.send(200, "text/html", html);
});
server.begin();
Serial.print("ESP8266 Web Server's IP address: ");
Serial.println(WiFi.localIP());
}
void loop() {
// Handle client requests
server.handleClient();
// Handle WebSocket events
webSocket.loop();
// TODO: Your code here
}
- Erstelle die index.h-Datei in der Arduino IDE durch:
- Entweder klicke auf den Button direkt unter dem Symbol des seriellen Monitors und wähle Neuen Tab aus, oder benutze die Tastenkombination 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 ein.
- Ändern Sie die WiFi-Informationen (SSID und Passwort) im Code, um Ihre eigenen Netzwerkzugangsdaten zu verwenden.
- Jetzt haben Sie den Code in zwei Dateien: newbiely.com.ino und index.h
- Klicken Sie im Arduino IDE auf die Schaltfläche Upload, um den Code auf den ESP8266 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 Adresszeile eines Webbrowsers auf Ihrem Smartphone oder PC ein.
- Sie sehen die Webseite wie unten dargestellt:
- Klicken Sie auf die CONNECT-Schaltfläche, um die Webseite über WebSocket mit dem ESP8266 zu verbinden.
- Geben Sie einige Wörter ein und senden Sie sie an den ESP8266.
- Sie werden die Antwort vom ESP8266 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 den HTML-Inhalt beim Kompilieren und Hochladen des Codes auf den ESP8266 nicht aktualisieren.
- Um die Arduino IDE dazu zu bringen, den HTML-Inhalt in diesem Fall 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 ESP8266 NodeMCU Code wurde von newbiely.de entwickelt
* Dieser ESP8266 NodeMCU 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/esp8266/esp8266-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>ESP8266 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>ESP8266 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
ESP8266 Web Server's IP address IP address: 192.168.0.5
Autoscroll
Clear output
9600 baud
Newline
※ Notiz:
Zeile für Zeile Code-Erklärung
Der oben gezeigte ESP8266-Code enthält eine zeilenweise Erklärung. Bitte lesen Sie die Kommentare im Code!
Wie das System funktioniert
Der ESP8266-Code funktioniert, indem er sowohl einen Webserver als auch einen WebSocket-Server erstellt. Der Ablauf gestaltet sich wie folgt:
- Wenn Sie die IP-Adresse des ESP8266 in einen Webbrowser eingeben, wird eine Anfrage für die Webseite (Benutzeroberfläche) vom ESP8266 gestellt.
- Der Webserver des ESP8266 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 in der Webseite eingebettete JavaScript-Code eine WebSocket-Verbindung zum WebSocket-Server auf dem ESP8266 her.
- Sobald die WebSocket-Verbindung hergestellt ist, sendet der JavaScript-Code im Hintergrund den von Ihnen eingegebenen Text über die WebSocket-Verbindung an den ESP8266, wenn Sie die SEND-Schaltfläche drücken.
- Beim Empfang des Winkelwerts sendet der WebSocket-Server eine Antwort an die Webseite zurück.
Unten finden Sie weitere ESP8266-WebSocket-Beispiele: