Arduino - WebSocket
In diesem Leitfaden werden wir untersuchen, was WebSocket ist, warum es nützlich ist, Arduino effektiv zu steuern, und wie man WebSocket mit Arduino implementiert. Anhand eines praktischen Beispiels zeigen wir, wie man eine Chat-Anwendung erstellt, die einen Webbrowser mit Arduino verbindet, und Ihnen Folgendes ermöglicht:
- Geben Sie Nachrichten im Chatfenster des Webbrowsers ein und senden Sie sie an Arduino. Diese Methode kann angepasst werden, um Arduino zu steuern.
- Empfangen Sie Nachrichten von Arduino sofort. Dieses Setup kann angepasst werden, um Arduino in Echtzeit zu überwachen.
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables STEM V4 IoT Starter-Kit (Arduino 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 Arduino WebSocket?
Sie fragen sich 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üssten Sie die Webseite aktualisieren, um neue Updates zu sehen. Das ist nicht sehr praktikabel.
- Mit WebSocket bleibt die Webseite kontinuierlich mit dem Server verbunden. Dadurch können Sie Informationen sofort austauschen, ohne die Seite aktualisieren zu müssen.
Sie stoßen wahrscheinlich regelmäßig auf die WebSocket-Technologie in alltäglichen Webanwendungen wie Online-Spielen, Instant Messaging und Börsenaktualisierungen.
Warum benötigen wir WebSocket, um Arduino 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, wenn du die Richtung oder Geschwindigkeit des Autos ändern willst, die Webseite neu laden. Es ist, als müsstest du jedes Mal eine 'Neu laden'-Schaltfläche drücken, wenn du dem Auto einen Befehl gibst.
Mit WebSocket ist es jedoch, als gäbe es eine kontinuierliche und direkte Verbindung zwischen deinem Telefon oder Computer und dem Auto. Du musst die Seite nicht aktualisieren, um das Auto zu steuern oder seine Geschwindigkeit zu ändern. Es ist, als würde das Auto deine Befehle in Echtzeit ständig entgegennehmen, ohne Verzögerungen, die durch das Neuladen der Seite verursacht würden.
Insgesamt ermöglicht WebSocket:
- Daten vom Webbrowser an Arduino senden, ohne die Webseite neu laden zu müssen.
- Daten von Arduino zurück an den Webbrowser senden, ohne die Seite zu aktualisieren.
Dies ermöglicht eine reibungslose Zwei-Wege-Kommunikation in Echtzeit.
Vorteile von WebSocket mit Arduino:
- Echtzeitsteuerung: WebSocket ermöglicht eine sofortige Kommunikation mit dem Arduino und sorgt für schnelle Antworten auf Befehle, was zu einem nahtlosen Benutzererlebnis führt.
- Dauerhafte Verbindung: Eine kontinuierliche Verbindung aufrechterhalten, ohne die Steuerseite zu aktualisieren, und damit eine jederzeit bereite Kommunikationslinie für unmittelbare Anweisungen schaffen.
- Effizienz: Erleben Sie schnelle Antworten, ohne die Seite ständig neu laden zu müssen, was das gesamte Benutzererlebnis und die Effizienz verbessert.
Web-Chat mit Arduino über WebSocket
Der Inhalt der Webseite (HTML, CSS, JavaScript) wird separat in einer index.h-Datei gespeichert. Somit werden wir zwei Code-Dateien in der Arduino-IDE haben:
- Eine .ino-Datei, die Arduino-Code enthält und einen Webserver sowie einen WebSocket-Server erstellt.
- Eine .h-Datei, die den Inhalt der Webseite enthält.
Schnelle Schritte
- Falls Sie Arduino Uno R4 zum ersten Mal verwenden, sehen Sie wie man die Umgebung für Arduino Uno R4 in der Arduino IDE einrichtet.
- Verbinden Sie das Arduino-Board über ein Micro-USB-Kabel mit Ihrem PC.
- Öffnen Sie die Arduino IDE auf Ihrem PC.
- Wählen Sie das richtige Arduino-Board (Arduino Uno R4 WiFi) und den COM-Port.
- Öffnen Sie den Bibliotheksverwalter, indem Sie auf das Library Manager-Symbol in der linken Navigationsleiste der Arduino IDE klicken.
- Suchen Sie nach Web Server for Arduino Uno R4 WiFi und finden Sie die von DIYables erstellte Webserver-Bibliothek.
- Klicken Sie auf den Install-Button, um die Webserver-Bibliothek zu installieren.
- In der Arduino IDE erstelle einen neuen Sketch. Gib ihm einen Namen, zum Beispiel, ArduinoGetStarted.com.ino
- Kopiere den untenstehenden Code und öffne ihn mit der Arduino IDE
/*
* Dieser Arduino Code wurde von newbiely.de entwickelt
* Dieser Arduino 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/arduino-websocket
*/
#include <UnoR4WiFi_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
UnoR4WiFi_WebServer server(80);
UnoR4WiFi_WebSocket *webSocket;
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, HTML_CONTENT);
}
// WebSocket event handlers
void onWebSocketOpen(net::WebSocket& ws) {
Serial.println("New WebSocket connection");
const char message[]{ "Hello from Arduino server!" };
ws.send(WebSocket::DataType::TEXT, message, strlen(message));
}
void onWebSocketMessage(net::WebSocket& ws, const net::WebSocket::DataType dataType, const char* message, uint16_t length) {
Serial.print(F("Received: "));
Serial.println(message);
String reply = "Received: " + String((char*)message);
ws.send(dataType, reply.c_str(), reply.length());
}
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 Uno R4 WiFi - 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() {
// Handle HTTP requests and WebSocket connections using the library
server.handleClient();
server.handleWebSocket();
delay(10);
}
- Passen Sie die WiFi-Informationen (SSID und Passwort) im Code so an, dass sie mit Ihren eigenen Netzwerkanmeldedaten übereinstimmen.
- Erstellen Sie die Datei index.h in der Arduino IDE, indem Sie:
- Entweder klicken Sie auf die Schaltfläche direkt unter dem Symbol des seriellen Monitors und wählen Sie Neuer Tab, oder verwenden Sie die Tasten Strg+Umschalt+N.
- Geben Sie den Dateinamen der Datei index.h ein und klicken Sie auf die OK-Schaltfläche
- Kopieren Sie den untenstehenden Code und fügen Sie ihn in index.h ein.
/*
* Dieser Arduino Code wurde von newbiely.de entwickelt
* Dieser Arduino 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/arduino-websocket
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino WebSocket</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<link rel="icon" href="https://diyables.io/images/page/diyables.svg">
<style>
/* Add some basic styling for the chat window */
body {
background-color: #E1EFEF;
font-size: 20px;
line-height: 1.3;
}
button, input {
font-size: 20px;
line-height: 1.3;
}
.chat-container {
margin: 0 auto;
padding: 10px;
}
.chat-messages {
height: 250px;
overflow-y: auto;
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;
}
.message-sent {
border-radius: 25px;
background-color: #d35400;
float: right;
width: fit-content;
padding: 10px 20px;
margin: 0;
}
.message-received {
border-radius: 25px;
background-color: white;
float: left;
width: fit-content;
padding: 10px 20px;
margin: 0;
}
</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 += '<div style="width:100%;overflow: auto;">' + text + '</div>';
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('<p class="message-sent">' + message + '</p>');
// 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('<p class="message-received">' + e_msg.data + '</p>');
}
</script>
</head>
<body>
<div class="chat-container">
<h2>Arduino 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>
)=====";
- Jetzt hast du den Code in zwei Dateien: ArduinoGetStarted.com.ino und index.h.
- Klicke auf die Upload-Schaltfläche in der Arduino IDE, um den Code auf dem Arduino hochzuladen.
- Öffne den Serial Monitor.
- Schau dir das Ergebnis im Serial Monitor an.
COM6
Arduino Uno R4 WiFi - WebSocket Server
Connected! IP Address: 192.168.0.254
SSID: YOUR_WIFI_SSID
IP Address: 192.168.0.254
Signal strength (RSSI): -44 dBm
WebSocket server started on port 81
WebSocket URL: ws://192.168.0.254:81
WebSocket server enabled successfully
Autoscroll
Clear output
9600 baud
Newline
- 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 dann die unten dargestellte Webseite.
- Klicken Sie auf die CONNECT-Schaltfläche, um die Webseite über WebSocket mit Arduino zu verbinden.
- Geben Sie einige Wörter ein und senden Sie sie an Arduino.
- Sie werden die Antwort von Arduino sehen.
※ Notiz:
- Wenn Sie den HTML-Inhalt in der index.h ändern und nichts in der ArduinoGetStarted.com.ino Datei berühren, wird die Arduino IDE beim Kompilieren und Hochladen des Codes auf den Arduino den HTML-Inhalt nicht aktualisieren.
- Um in diesem Fall sicherzustellen, dass die Arduino IDE den HTML-Inhalt aktualisiert, nehmen Sie eine Änderung in der ArduinoGetStarted.com.ino-Datei vor (z. B. eine leere Zeile hinzufügen, einen Kommentar hinzufügen....)
Zeilenweise Code-Erklärung
Der oben gezeigte Arduino-Code enthält eine Zeilen-für-Zeile-Erklärung. Bitte lesen Sie die Kommentare im Code!
Wie das System funktioniert
Der Arduino-Code funktioniert, indem er sowohl einen Webserver als auch einen WebSocket-Server einrichtet. So funktioniert es:
- Wenn Sie die IP-Adresse des Arduino in einen Webbrowser eingeben, fordert der Arduino die Webseite (Benutzeroberfläche) vom Arduino an.
- Der Webserver des Arduino sendet dann den Inhalt der Webseite (HTML, CSS, JavaScript) an Ihren Browser.
- Ihr Webbrowser zeigt die Webseite an.
- Wenn Sie auf die CONNECT-Schaltfläche auf der Webseite klicken, initiiert der JavaScript-Code auf der Seite eine WebSocket-Verbindung mit dem WebSocket-Server auf dem Arduino.
- Solange die WebSocket-Verbindung aktiv ist, geben Sie etwas ein und drücken Sie die SEND-Schaltfläche; der JavaScript-Code sendet Ihren Text über die WebSocket-Verbindung im Hintergrund an den Arduino.
- Nachdem der WebSocket-Server auf dem Arduino Ihre Eingabe empfangen hat, sendet er eine Antwort zurück an Ihre Webseite.
Unten finden Sie weitere Arduino-WebSocket-Beispiele.