Arduino UNO R4 - WebSocket
Dieser Leitfaden erklärt, was WebSocket ist, warum es bei der Verwendung des Arduino UNO R4 hilfreich ist, und wie man WebSocket mit dem Arduino UNO R4 verwendet. Wir zeigen Ihnen, wie man eine Chat-Anwendung erstellt, die es einem Webbrowser ermöglicht, mit dem Arduino UNO R4 zu kommunizieren, und Ihnen Folgendes zu ermöglichen:
- Sende Nachrichten aus dem Chatfenster deines Webbrowsers, um den Arduino UNO R4 zu steuern.
- Erhalte sofortige Nachrichten vom Arduino UNO R4. Du kannst diese Einrichtung ändern, um den Arduino UNO R4 live zu beobachten.
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 UNO R4 WebSocket?
Vielleicht fragen Sie sich: „Was ist WebSocket?“ Es ist einfach: WebSocket ist eine Technologie, die es einem Webbrowser ermöglicht, direkt mit einem Webserver in Echtzeit zu kommunizieren.
- Ohne WebSocket musst du die Webseite neu laden, um neue Updates zu sehen. Das ist nicht sehr praktisch.
- Mit WebSocket bleibt die Webseite ständig mit dem Server verbunden. Das bedeutet, dass du Informationen sofort austauschen kannst, ohne die Seite neu zu laden.
Man verwendet WebSocket-Technologie häufig in täglichen Webanwendungen wie Online-Spielen, Instant Messaging und Börsenaktualisierungen.
Warum brauchen wir WebSocket, um den Arduino UNO R4 reibungslos zu steuern?
Angenommen, du möchtest ein ferngesteuertes Auto mit dem Webbrowser deines Smartphones oder Computers steuern. Wenn du kein WebSocket verwendest, müsstest du die Webseite jedes Mal aktualisieren, wenn du die Richtung oder Geschwindigkeit des Autos ändern möchtest. Das ist vergleichbar mit dem Drücken eines 'Neu laden'-Knopfs jedes Mal, wenn du dem Auto einen Befehl gibst.
WebSocket ermöglicht eine konstante und direkte Verbindung zwischen Ihrem Webbrowser und dem Auto. Sie können die Richtung und Geschwindigkeit des Autos steuern, ohne die Seite neu laden zu müssen. Es ist, als würde das Auto in Echtzeit sofort auf Ihre Befehle reagieren, ohne Verzögerungen durch das Neuladen der Seite.
WebSocket macht es einfacher, zu:
- Daten vom Webbrowser an den Arduino UNO R4 senden, ohne die Webseite neu laden zu müssen.
- Daten vom Arduino UNO R4 zurück an den Webbrowser senden, ohne die Seite aktualisieren zu müssen.
Dies ermöglicht eine einfache Hin- und Her-Kommunikation in Echtzeit.
Vorteile von WebSocket mit dem Arduino UNO R4:
- Echtzeitsteuerung: WebSocket ermöglicht eine sofortige Interaktion mit dem Arduino UNO R4 und schnelle Reaktionen auf Ihre Befehle für ein reibungsloses Erlebnis.
- Persistente Verbindung: Halten Sie eine konstante Verbindung aufrecht, ohne die Kontrollseite neu laden zu müssen, sodass ein Kommunikationskanal jederzeit für direkte Anweisungen bereitsteht.
- Effizienz: Profitieren Sie von schnellen Antworten und einem besseren Erlebnis, ohne die Seite wiederholt neu laden zu müssen, wodurch es effizienter und angenehmer wird.
Web-Chat mit Arduino UNO R4 über WebSocket
Die Materialien der Webseite wie HTML, CSS und JavaScript werden in einer separaten Datei mit dem Namen index.h gespeichert. Also verwenden wir in der Arduino-IDE zwei Code-Dateien.
- Eine .ino-Datei ist Arduino UNO R4-Code. Sie richtet einen Webserver und einen WebSocket-Server ein.
- Eine .h-Datei enthält den Inhalt der Webseite.
Schnelle Schritte
Befolgen Sie diese Anweisungen Schritt für Schritt:
- Wenn Sie dies zum ersten Mal mit dem Arduino Uno R4 WiFi/Minima verwenden, schauen Sie sich Einrichtung der Umgebung für Arduino Uno R4 WiFi/Minima in der Arduino IDE an.
- Schließen Sie das Arduino Uno R4-Board mit einem USB-Kabel an Ihren Computer an.
- Starten Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie das passende Arduino Uno R4-Board (z. B. Arduino Uno R4 WiFi) und den COM-Port aus.
- Öffnen Sie den Bibliotheks-Manager, indem Sie auf das Symbol links in der Arduino IDE klicken.
- Suchen Sie nach Web-Server für Arduino Uno R4 WiFi und finden Sie die von DIYables erstellte Web-Server-Bibliothek.
- Klicken Sie auf die Schaltfläche Installieren, um die Web-Server-Bibliothek hinzuzufügen.
- In der Arduino IDE erstelle einen neuen Sketch und benenne ihn beispielsweise newbiely.com.ino
- Kopiere den folgenden Code und öffne ihn in der Arduino IDE
/*
* Dieser Arduino UNO R4 Code wurde von newbiely.de entwickelt
* Dieser Arduino UNO R4 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-uno-r4/arduino-uno-r4-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);
}
- Ändern Sie die WLAN-Daten (SSID und Passwort) im Code auf Ihre eigenen WLAN-Daten.
- Um die index.h-Datei in der Arduino-IDE zu erstellen:
- Klicken Sie auf die Schaltfläche unter dem Symbol des seriellen Monitors und wählen Sie Neuer Tab aus, oder drücken Sie Strg+Umschalt+N.
- Benennen Sie die Datei als index.h und drücken Sie die OK-Schaltfläche.
- Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei index.h ein.
- Sie haben den Code jetzt in zwei Dateien: newbiely.com.ino und index.h.
- Klicken Sie im Arduino IDE auf die Hochladen-Schaltfläche, um den Code auf den Arduino UNO R4 hochzuladen.
- Öffnen Sie den Serial Monitor.
- Sehen Sie die Ergebnisse im Serial Monitor an.
- Schreib die angezeigte IP-Adresse auf und gib sie in die Adresszeile des Webbrowsers auf deinem Smartphone oder Computer ein.
- Die Webseite wird wie unten beschrieben erscheinen.
- Drücken Sie die CONNECT-Taste, um die Webseite über WebSocket mit dem Arduino UNO R4 zu verbinden.
- Geben Sie etwas Text ein und senden Sie ihn an den Arduino UNO R4.
- Beobachten Sie die Antwort des Arduino UNO R4.
- Wenn Sie nur den HTML-Inhalt in der Datei namens index.h ändern und die Datei newbiely.com.ino nicht ändern, aktualisiert die Arduino-IDE den HTML-Inhalt beim Kompilieren und Hochladen des Codes auf den Arduino UNO R4 nicht.
- Um den HTML-Inhalt über die Arduino-IDE zu aktualisieren, nehmen Sie eine kleine Änderung in der Datei newbiely.com.ino vor, z. B. das Hinzufügen einer leeren Zeile oder eines Kommentars.
/*
* Dieser Arduino UNO R4 Code wurde von newbiely.de entwickelt
* Dieser Arduino UNO R4 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-uno-r4/arduino-uno-r4-websocket
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino Uno R4 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 Uno R4 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
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
※ Notiz:
Zeile für Zeile Code-Erklärung
Bitte lesen Sie die Kommentare im Code, um eine zeilenweise Erklärung des oben genannten Arduino Uno R4-Codes zu erhalten.
Wie das System funktioniert
Der Code des Arduino UNO R4 richtet einen Webserver und einen WebSocket-Server ein. So funktioniert er:
- Geben Sie die IP-Adresse des Arduino UNO R4 in Ihren Webbrowser ein.
- Der Webserver des Arduino UNO R4 sendet die Webseite (bestehend aus HTML, CSS und JavaScript) an Ihren Webbrowser.
- Ihr Webbrowser zeigt die Webseite an.
- Klicken Sie auf die CONNECT-Schaltfläche auf der Webseite. Diese Aktion startet eine WebSocket-Verbindung mit dem Server des Arduino UNO R4.
- Wenn Sie Text eingeben und auf die SEND-Schaltfläche klicken, sendet das JavaScript Ihren Text über den WebSocket an den Arduino UNO R4.
- Der WebSocket-Server des Arduino UNO R4 empfängt Ihren Text und sendet eine Antwort an Ihre Webseite zurück.
Hier sind weitere Beispiele für Arduino UNO R4 WebSocket, die Sie lernen können:
Fehlerbehebung für Arduino Uno R4
Wenn der obige Code funktioniert, aktualisieren Sie bitte die neueste Version des WLAN-Moduls des Arduino UNO R4.
- Schließen Sie Ihren Arduino Uno R4 WiFi an Ihren PC an
- Öffnen Sie Arduino IDE 2
- Gehen Sie zu Werkzeuge Firmware-Updater
- Wählen Sie das Arduino Uno R4 WiFi-Board und den Port aus
- Klicken Sie auf die Schaltfläche AKTUALISIERUNGEN PRÜFEN
- Es wird eine Liste der verfügbaren Firmware-Versionen angezeigt
- Wählen Sie die neueste Firmware-Version aus
- Klicken Sie auf die Schaltfläche INSTALLIEREN
- Warten Sie, bis es fertig ist
- Starten Sie Ihren Arduino Uno R4 WiFi neu
- Kompilieren Sie Ihren Code erneut und laden Sie ihn auf den Arduino Uno R4 WiFi hoch
- Überprüfen Sie das Ergebnis