Arduino UNO R4 - WebSocket
Ce guide explique ce qu'est WebSocket, pourquoi il est utile pour utiliser l'Arduino UNO R4 et comment utiliser WebSocket avec l'Arduino UNO R4. Nous vous montrerons comment créer une application de chat qui permet à un navigateur Web de communiquer avec l'Arduino UNO R4, vous permettant de :
- Envoyez des messages depuis la fenêtre de chat de votre navigateur Web pour contrôler l'Arduino UNO R4.
- Recevez des messages instantanés de l'Arduino UNO R4. Vous pouvez modifier cette configuration pour voir l'Arduino UNO R4 en direct.
Préparation du matériel
Ou vous pouvez acheter les kits suivants:
| 1 | × | Kit de Démarrage DIYables STEM V4 IoT (Arduino inclus) | |
| 1 | × | Kit de Capteurs DIYables (30 capteurs/écrans) | |
| 1 | × | Kit de Capteurs DIYables (18 capteurs/écrans) |
Divulgation : Certains des liens fournis dans cette section sont des liens affiliés Amazon. Nous pouvons recevoir une commission pour tout achat effectué via ces liens, sans coût supplémentaire pour vous. Nous vous remercions de votre soutien.
Qu'est-ce que l'Arduino UNO R4 WebSocket ?
Vous pouvez vous demander : « Qu'est-ce que WebSocket ? » C'est simple : WebSocket est une technologie qui permet à un navigateur web de communiquer directement avec un serveur web instantanément.
- Sans WebSocket, vous devez recharger la page Web pour voir les nouvelles mises à jour. Ce n'est pas très pratique.
- Avec WebSocket, la page Web reste constamment connectée au serveur. Cela signifie qu'ils peuvent partager des informations immédiatement sans recharger la page.
Vous utilisez souvent la technologie WebSocket dans des applications web quotidiennes telles que les jeux en ligne, la messagerie instantanée et les mises à jour boursières.
Pourquoi avons-nous besoin de WebSocket pour contrôler l'Arduino UNO R4 de manière fluide ?
Supposons que vous vouliez contrôler une voiture télécommandée à l’aide de votre smartphone ou du navigateur Web de votre ordinateur. Si vous n’utilisez pas WebSocket, vous devrez actualiser la page Web à chaque fois que vous souhaitez changer la direction ou la vitesse de la voiture. C’est comme appuyer sur le bouton d’actualisation à chaque fois que vous donnez une commande à la voiture.
WebSocket permet une connexion constante et directe entre votre navigateur web et la voiture. Vous pouvez contrôler la direction et la vitesse de la voiture sans avoir besoin de rafraîchir la page. C'est comme si la voiture répondait instantanément à vos commandes en temps réel, sans délai lié au rechargement de la page.
WebSocket facilite :
- Envoyer des données du navigateur web vers l'Arduino UNO R4 sans avoir à recharger la page.
- Envoyer des données de retour au navigateur à partir de l'Arduino UNO R4 sans avoir besoin d'actualiser la page.
Cela permet une conversation fluide en temps réel.
Avantages de WebSocket avec l'Arduino UNO R4 :
- Contrôle en temps réel: WebSocket permet une interaction immédiate avec l'Arduino UNO R4, permettant des réponses rapides à vos commandes pour une expérience fluide.
- Connexion persistante: Maintenir une connexion constante sans avoir besoin d'actualiser la page de contrôle, assurant une ligne de communication toujours prête pour des instructions directes.
- Efficacité: Profitez de réponses rapides et d'une meilleure expérience sans avoir à recharger la page à plusieurs reprises, ce qui rend l'expérience plus efficace et agréable.
Chat Web avec Arduino UNO R4 via WebSocket
Les éléments de la page Web tels que le HTML, le CSS et le JavaScript sont conservés dans un fichier séparé nommé index.h. Ainsi, dans l’IDE Arduino, nous utiliserons deux fichiers de code.
- Un fichier .ino est le code Arduino UNO R4. Il configure un serveur Web et un serveur WebSocket.
- Un fichier .h contient le contenu de la page Web.
Étapes rapides
Suivez ces instructions étape par étape :
- Si c'est la première fois que vous utilisez l'Arduino Uno R4 WiFi/Minima, reportez-vous au tutoriel sur Arduino UNO R4 - Installation du logiciel..
- Connectez la carte Arduino Uno R4 à votre ordinateur à l'aide d'un câble USB.
- Lancez l'IDE Arduino sur votre ordinateur.
- Sélectionnez la carte Arduino Uno R4 appropriée (par exemple Arduino Uno R4 WiFi) et le port COM.
- Ouvrez le Gestionnaire de bibliothèques en cliquant sur l'icône Gestionnaire de bibliothèques sur le côté gauche de l'IDE Arduino.
- Recherchez Web Server for Arduino Uno R4 WiFi et localisez la bibliothèque Web Server créée par DIYables.
- Cliquez sur le bouton Install pour ajouter la bibliothèque Web Server.
- Dans l'IDE Arduino, créez un nouveau sketch et nommez-le, par exemple, newbiely.com.ino
- Copiez le code suivant et ouvrez-le dans l'IDE Arduino
/*
* Ce code Arduino UNO R4 a été développé par newbiely.fr
* Ce code Arduino UNO R4 est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/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);
}
- Modifiez les détails du WiFi (SSID et mot de passe) dans le code pour les remplacer par les vôtres.
- Pour créer le fichier index.h dans l'IDE Arduino:
- Cliquez sur le bouton situé sous l'icône du moniteur série et sélectionnez Nouvel onglet, ou appuyez sur Ctrl+Maj+N touches.
- Nommez le fichier comme index.h et appuyez sur le bouton OK.
- Copiez le code suivant et collez-le dans le fichier index.h.
- Vous avez désormais le code dans deux fichiers : newbiely.com.ino et index.h.
- Cliquez sur le bouton Upload dans l'IDE Arduino pour téléverser le code sur l'Arduino UNO R4.
- Ouvrez le moniteur série.
- Affichez les résultats sur le moniteur série.
- Notez l'adresse IP affichée et saisissez-la dans la barre d'adresse du navigateur sur votre smartphone ou votre ordinateur.
- La page Web apparaîtra comme décrite ci-dessous.
- Appuyez sur le bouton CONNECT pour relier la page Web à l'Arduino UNO R4 via WebSocket.
- Entrez du texte et envoyez-le à l'Arduino UNO R4.
- Observez la réponse de l'Arduino UNO R4.
- Si vous ne modifiez que le HTML dans le fichier nommé index.h et que vous ne modifiez pas le fichier nommé newbiely.com.ino, l'IDE Arduino ne mettra pas à jour le HTML lorsque vous compilerez et téléverserez le code sur l'Arduino UNO R4.
- Pour mettre à jour le contenu HTML via l'IDE Arduino, apportez une petite modification au fichier newbiely.com.ino, comme ajouter une ligne vide ou un commentaire.
/*
* Ce code Arduino UNO R4 a été développé par newbiely.fr
* Ce code Arduino UNO R4 est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/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
※ Note:
Explication du code ligne par ligne
Veuillez lire les commentaires dans le code pour une explication ligne par ligne du code Arduino UNO R4 ci-dessus.
Comment fonctionne le système
Le code Arduino UNO R4 met en place un serveur web et un serveur WebSocket. Voici comment il fonctionne :
- Tapez l'adresse IP de l'Arduino UNO R4 dans un navigateur web.
- Le serveur Web de l'Arduino UNO R4 envoie la page Web (conçue avec HTML, CSS et JavaScript) à votre navigateur.
- Votre navigateur affiche la page Web.
- Cliquez sur le bouton CONNECT sur la page Web. Cette action démarre une connexion WebSocket avec le serveur sur l'Arduino UNO R4.
- Si vous saisissez du texte et cliquez sur le bouton SEND, le JavaScript envoie votre texte à l'Arduino UNO R4 via le WebSocket.
- Le serveur WebSocket sur l'Arduino UNO R4 reçoit votre texte et renvoie une réponse à votre page Web.
Voici d'autres exemples de WebSocket Arduino UNO R4 que vous pouvez apprendre :
Dépannage pour Arduino Uno R4
Si le code ci-dessus fonctionne, veuillez mettre à jour la dernière version du module WiFi de l'Arduino UNO R4.
- Connectez votre Arduino Uno R4 WiFi à votre PC
- Ouvrez Arduino IDE 2
- Allez dans Outils Mise à jour du micrologiciel
- Sélectionnez la carte Arduino Uno R4 WiFi et le port
- Cliquez sur le bouton VÉRIFIER LES MISES À JOUR
- Une liste des versions de firmware disponibles apparaîtra
- Sélectionnez la dernière version du firmware
- Cliquez sur le bouton INSTALLER
- Attendez que cela soit terminé
- Redémarrez votre Arduino Uno R4 WiFi
- Recompilez et téléversez votre code sur l'Arduino Uno R4 WiFi
- Vérifiez le résultat