Arduino - WebSocket
In deze handleiding ontdekken we wat WebSocket is, waarom het nuttig is voor het effectief aansturen van Arduino, en hoe u WebSocket implementeert met Arduino. Met een praktijkvoorbeeld laten we zien hoe u een chatapplicatie bouwt die een webbrowser verbindt met Arduino, waarmee u kunt:
- Berichten typen en verzenden vanuit het chatvenster in uw webbrowser naar Arduino. Deze methode kan worden aangepast om Arduino aan te sturen.
- Direct berichten ontvangen van Arduino. Deze opzet kan worden aangepast om Arduino realtime te monitoren.
Benodigd Hardware
Of u kunt de volgende kits kopen:
| 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 WebSocket?
U vraagt zich misschien af: "Wat is WebSocket?" Het is eigenlijk heel simpel: WebSocket is een technologie die het een webbrowser mogelijk maakt om in realtime direct te communiceren met een webserver.
- Zonder WebSocket moet u de webpagina verversen om nieuwe updates te zien. Dat is niet erg praktisch.
- Met WebSocket blijft de webpagina continu verbonden met de server, waardoor ze direct informatie kunnen uitwisselen zonder de pagina te hoeven verversen.
Waarschijnlijk komt u WebSocket-technologie regelmatig tegen in alledaagse webapplicaties zoals online games, instant messaging en beurskoersen.
Waarom hebben we WebSocket nodig om Arduino soepel te besturen?
Stel u voor dat u uw op afstand bestuurbare auto wilt aansturen via een webinterface op uw telefoon of computer. Zonder WebSocket zou u bij elke verandering van richting of snelheid de webpagina moeten verversen. Het is alsof u elke keer op een 'herlaad'-knop moet drukken voordat de auto reageert.
Met WebSocket is er echter een doorlopende en directe verbinding tussen uw telefoon of computer en de auto. U hoeft de pagina niet te verversen om de auto te sturen of de snelheid aan te passen. Het is alsof de auto constant luistert naar uw commando’s in realtime, zonder vertragingen door vernieuwen.
Kortom maakt WebSocket het mogelijk om:
- Gegevens van de webbrowser naar Arduino te sturen zonder de pagina te verversen.
- Gegevens van Arduino terug te sturen naar de webbrowser zonder vernieuwen.
Dit maakt soepele tweerichtingscommunicatie in realtime mogelijk.
Voordelen van WebSocket met Arduino:
- Realtime Besturing: WebSocket zorgt voor directe communicatie met Arduino, waardoor commando’s snel worden verwerkt voor een naadloze gebruikerservaring.
- Persistente Verbinding: Houdt een continue verbinding zonder dat de bedieningspagina ververst hoeft te worden, wat zorgt voor een altijd-klaar communicatielijn voor onmiddellijke instructies.
- Efficiëntie: Ervaar snelle reacties zonder constant de pagina te herladen, wat het gebruiksgemak en de efficiëntie vergroot.
Web Chat met Arduino via WebSocket
De inhoud van de webpagina (HTML, CSS, JavaScript) wordt apart opgeslagen in een index.h bestand. We hebben dus twee codebestanden in de Arduino IDE:
- Een .ino-bestand dat de Arduino-code bevat, en hierin de webserver en WebSocket-server worden aangemaakt
- Een .h-bestand met de inhoud van de webpagina
Snelle Stappen
- Als dit de eerste keer is dat u Arduino Uno R4 gebruikt, bekijk dan hoe u de omgeving instelt voor Arduino Uno R4 in Arduino IDE.
- Verbind het Arduino-bord met uw pc via een micro USB-kabel.
- Open Arduino IDE op uw pc.
- Selecteer het juiste Arduino-bord (Arduino Uno R4 WiFi) en de COM-poort.
- Open de Library Manager door te klikken op het Library Manager-icoon in de linker navigatiebalk van Arduino IDE.
- Zoek naar Web Server for Arduino Uno R4 WiFi en vind de Web Server bibliotheek gemaakt door DIYables.
- Klik op de Install-knop om de Web Server bibliotheek te installeren.
- Maak in Arduino IDE een nieuw sketch aan, geef het een naam, bijvoorbeeld ArduinoGetStarted.com.ino
- Kopieer onderstaande code en open deze met Arduino IDE
/*
* Deze Arduino code is ontwikkeld door newbiely.nl
* Deze Arduino code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/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);
}
- Pas de WiFi-informatie (SSID en wachtwoord) in de code aan naar uw eigen netwerkgegevens.
- Maak het index.h bestand aan in Arduino IDE door:
- Ofwel te klikken op de knop net onder het serial monitor icoon en kiezen voor New Tab, of gebruik Ctrl+Shift+N.
- Geef het bestand de naam index.h en klik op OK.
- Kopieer onderstaande code en plak die in index.h.
- Nu heeft u code in twee bestanden: ArduinoGetStarted.com.ino en index.h.
- Klik op de Upload-knop in Arduino IDE om de code op de Arduino te zetten.
- Open de Serial Monitor.
- Bekijk het resultaat in de Serial Monitor.
- Noteer het weergegeven IP-adres en voer dit adres in de adresbalk van een webbrowser op uw smartphone of pc in.
- U ziet dan de volgende webpagina:
- Klik op de CONNECT-knop om de webpagina via WebSocket met Arduino te verbinden.
- Typ een bericht en verstuur dit naar Arduino.
- U ziet het antwoord van Arduino verschijnen.
- Als u de HTML-inhoud in index.h wijzigt zonder iets in het ArduinoGetStarted.com.ino bestand aan te passen, zal Arduino IDE bij compileren en uploaden de HTML-inhoud niet bijwerken.
- Om Arduino IDE te dwingen de HTML-inhoud toch bij te werken, maakt u een kleine wijziging in het ArduinoGetStarted.com.ino bestand (bijvoorbeeld een lege regel toevoegen of een commentaarregel invoegen).
/*
* Deze Arduino code is ontwikkeld door newbiely.nl
* Deze Arduino code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/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>
)=====";
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:
Code Regel-voor-Regel Uitleg
De Arduino-code hierboven bevat regel-voor-regel uitleg. Lees de opmerkingen in de code goed door!
Hoe werkt het systeem?
De Arduino-code zet zowel een webserver als een WebSocket-server op. Zo werkt het:
- Wanneer u het IP-adres van de Arduino in een webbrowser invoert, vraagt de browser om de webpagina (gebruikersinterface) van de Arduino.
- De webserver op Arduino verzendt de inhoud van de webpagina (HTML, CSS, JavaScript) naar uw browser.
- De webbrowser toont de webpagina.
- Als u op de CONNECT-knop op de webpagina klikt, start de JavaScript-code op de pagina een WebSocket-verbinding met de WebSocket-server op Arduino.
- Zodra de WebSocket-verbinding actief is, en u iets typt en op de SEND-knop drukt, verstuurt JavaScript uw tekst op de achtergrond via de WebSocket-verbinding naar Arduino.
- Na ontvangst stuurt de WebSocket-server op Arduino een reactie terug naar uw webpagina.
U kunt meer Arduino WebSocket-voorbeelden leren via de onderstaande links: