Arduino UNO R4 - WebSocket
Deze handleiding legt uit wat WebSocket is, waarom het handig is voor het gebruik van Arduino UNO R4, en hoe u WebSocket kunt gebruiken met Arduino UNO R4. We laten u zien hoe u een chatapplicatie kunt maken waarmee een webbrowser kan communiceren met Arduino UNO R4, zodat u:
- Berichten kunt verzenden vanuit het chatvenster van uw webbrowser om de Arduino UNO R4 te besturen.
- Directe berichten van de Arduino UNO R4 kunt ontvangen. U kunt deze setup wijzigen om de Arduino UNO R4 live te monitoren.
Hardware Vereist
Of u kunt de volgende kits kopen:
| 1 | × | DIYables STEM V4 IoT Starterskit (Arduino inbegrepen) | |
| 1 | × | DIYables Sensorkit (30 sensoren/displays) | |
| 1 | × | DIYables Sensorkit (18 sensoren/displays) |
Openbaarmaking: Sommige van de links in deze sectie zijn Amazon-affiliate links. We kunnen een commissie ontvangen voor aankopen die via deze links worden gedaan, zonder extra kosten voor u. We waarderen uw steun.
Wat is Arduino UNO R4 Websocket?
U vraagt zich misschien af: "Wat is WebSocket?" Het is eenvoudig: WebSocket is een technologie die een webbrowser in staat stelt om direct en onmiddellijk met een webserver te communiceren.
- Zonder WebSocket moet u de webpagina opnieuw laden om nieuwe updates te bekijken. Dit is niet erg handig.
- Met WebSocket blijft de webpagina voortdurend verbonden met de server. Dit betekent dat ze onmiddellijk informatie kunnen delen zonder de pagina opnieuw te laden.
U gebruikt WebSocket-technologie vaak in dagelijkse webapplicaties zoals online games, instant messaging en beurskoersen-updates.
Waarom hebben we WebSocket nodig om Arduino UNO R4 soepel te besturen?
Stel dat u een bestuurbare auto wilt besturen via de webbrowser van uw smartphone of computer. Als u geen WebSocket gebruikt, zou u de webpagina moeten verversen elke keer dat u de richting of snelheid van de auto wilt wijzigen. Het is vergelijkbaar met het indrukken van een "vernieuwen" knop elke keer dat u een commando aan de auto geeft.
WebSocket maakt een constante en directe verbinding mogelijk tussen uw webbrowser en de auto. U kunt de richting en snelheid van de auto besturen zonder de pagina te hoeven verversen. Het is alsof de auto onmiddellijk reageert op uw commando's in realtime, zonder vertragingen door het opnieuw laden van de pagina.
WebSocket maakt het gemakkelijker om:
- Data te verzenden van de webbrowser naar Arduino UNO R4 zonder de webpagina opnieuw te moeten laden.
- Data terug te sturen naar de webbrowser vanuit Arduino UNO R4 zonder de pagina te hoeven verversen.
Dit maakt een gemakkelijk heen-en-weer gesprek in realtime mogelijk.
Voordelen van WebSocket met Arduino UNO R4:
- Realtime Besturing: WebSocket maakt onmiddellijke interactie met de Arduino UNO R4 mogelijk, wat snelle reacties op uw commando's mogelijk maakt voor een soepele ervaring.
- Permanente Verbinding: Behoud een constante verbinding zonder de besturingspagina te hoeven verversen, wat zorgt voor een communicatielijn die altijd klaar is voor directe instructies.
- Efficiëntie: Geniet van snelle antwoorden en een betere ervaring zonder de pagina herhaaldelijk opnieuw te moeten laden, wat het efficiënter en plezieriger maakt.
Web Chat met Arduino UNO R4 via WebSocket
De materialen van de webpagina zoals HTML, CSS en JavaScript worden bewaard in een afzonderlijk bestand genaamd index.h. Dus in de Arduino IDE gebruiken we twee codebestanden.
- Een .ino-bestand is Arduino UNO R4 code. Het richt een webserver en een WebSocket-server in.
- Een .h-bestand bevat de inhoud voor de webpagina.
Snelle Stappen
Volg deze instructies stap voor stap:
- Als dit uw eerste keer is met de Arduino Uno R4 WiFi/Minima, raadpleeg dan de tutorial over het instellen van de omgeving voor Arduino Uno R4 WiFi/Minima in de Arduino IDE.
- Verbind het Arduino Uno R4 board met uw computer via een USB-kabel.
- Start de Arduino IDE op uw computer.
- Selecteer het juiste Arduino Uno R4 board (bijv., Arduino Uno R4 WiFi) en COM-poort.
- Open de Library Manager door te klikken op het Library Manager pictogram aan de linkerkant van de Arduino IDE.
- Zoek naar Web Server for Arduino Uno R4 WiFi en vind de Web Server library gemaakt door DIYables.
- Klik op de Install knop om de Web Server library toe te voegen.
- Maak in de Arduino IDE een nieuwe sketch en geef deze een naam, bijvoorbeeld newbiely.com.ino
- Kopieer de volgende code en open deze in Arduino IDE
/*
* Deze Arduino UNO R4 code is ontwikkeld door newbiely.nl
* Deze Arduino UNO R4 code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/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);
}
- Wijzig de WiFi-gegevens (SSID en wachtwoord) in de code naar die van u.
- Om het index.h bestand in Arduino IDE te maken:
- Klik op de knop onder het seriële monitor pictogram en selecteer New Tab, of druk op Ctrl+Shift+N toetsen.
- Geef het bestand de naam index.h en druk op de OK knop.
- Kopieer de volgende code en plak deze in het index.h bestand.
- U heeft nu de code in twee bestanden: newbiely.com.ino en index.h.
- Klik op de Upload knop in Arduino IDE om de code naar Arduino UNO R4 te uploaden.
- Open de Serial Monitor.
- Bekijk de resultaten op de Serial Monitor.
- Noteer het getoonde IP-adres en typ dit in de adresbalk van de webbrowser op uw smartphone of computer.
- De webpagina zal verschijnen zoals hieronder beschreven:
- Druk op de CONNECT knop om de webpagina te koppelen met Arduino UNO R4 via WebSocket.
- Voer wat tekst in en verstuur deze naar Arduino UNO R4.
- Bekijk het antwoord van Arduino UNO R4.
- Als u alleen de HTML wijzigt in het bestand genaamd index.h en het bestand genaamd newbiely.com.ino niet wijzigt, zal de Arduino IDE de HTML niet bijwerken wanneer u de code compileert en uploadt naar de Arduino UNO R4.
- Om de HTML-inhoud via de Arduino IDE bij te werken, maak een kleine wijziging in het newbiely.com.ino bestand, zoals het toevoegen van een lege regel of een commentaar.
/*
* Deze Arduino UNO R4 code is ontwikkeld door newbiely.nl
* Deze Arduino UNO R4 code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/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:
Regel-voor-regel Code Uitleg
Lees de commentaren in de code voor een regel-voor-regel uitleg van bovenstaande Arduino UNO R4 code.
Hoe het Systeem Werkt
De Arduino UNO R4 code richt een webserver en een WebSocket-server in. Hier is hoe het functioneert:
- Typ het IP-adres van de Arduino UNO R4 in een webbrowser.
- De webserver van de Arduino UNO R4 verstuurt de webpagina (gemaakt van HTML, CSS, JavaScript) naar uw browser.
- Uw browser toont de webpagina.
- Klik op de CONNECT knop op de webpagina. Deze actie start een WebSocket-verbinding met de server op de Arduino UNO R4.
- Als u tekst intypt en op de SEND knop klikt, verstuurt de JavaScript uw tekst naar de Arduino UNO R4 via de WebSocket.
- De WebSocket-server op de Arduino UNO R4 ontvangt uw tekst en stuurt een antwoord terug naar uw webpagina.
Hier zijn andere voorbeelden van Arduino UNO R4 WebSocket die u kunt leren:
Probleemoplossing Voor Arduino Uno R4
Als bovenstaande code niet werkt, werk dan de nieuwste versie bij voor de WiFi-module van Arduino UNO R4
- Verbind uw Arduino Uno R4 WiFi met uw PC
- Open Arduino IDE 2
- Ga naar Tools Firmware Updater
- Selecteer het Arduino Uno R4 WiFi board en poort
- Klik op de CHECK UPDATES knop
- Een lijst van beschikbare firmware-versies zal verschijnen
- Selecteer de nieuwste versie van firmware
- Klik op de INSTALL knop
- Wacht tot het klaar is
- Herstart uw Arduino Uno R4 WiFi
- Compileer opnieuw en upload uw code naar Arduino Uno R4 WiFi
- Controleer het resultaat