Arduino Nano ESP32 - WebSocket
Dans ce tutoriel, nous apprendrons ce qu'est WebSocket, pourquoi nous devons l'utiliser pour contrôler en douceur l'ESP32, et comment utiliser WebSocket avec Arduino Nano ESP32. Dans un exemple pratique, nous apprendrons à créer une application de chat entre le navigateur web et l'ESP32, vous permettant de :
- Tapez un message dans la fenêtre de chat sur le navigateur web et envoyez-le à Arduino Nano ESP32. Vous pouvez adapter cela pour contrôler l'Arduino Nano ESP32.
- Recevez des messages en temps réel de l'Arduino Nano ESP32. Vous pouvez adapter cela pour surveiller l'Arduino Nano ESP32 en temps réel.
Préparation du matériel
| 1 | × | Arduino Nano ESP32 | |
| 1 | × | USB Cable Type-C | |
| 1 | × | (Recommended) Screw Terminal Adapter for Arduino Nano |
Or you can buy the following sensor kits:
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
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 Nano ESP32 Websocket ?
Maintenant, vous pourriez vous demander, "Qu'est-ce que WebSocket ?" C'est assez simple : WebSocket est une technologie qui permet à un navigateur web de communiquer directement avec un serveur web en temps réel.
- Sans WebSocket, vous devez actualiser la page Web pour obtenir des mises à jour. Ce n'est pas très pratique.
- Avec WebSocket, la page Web et le serveur restent connectés en permanence. Cela signifie qu'ils peuvent partager des informations instantanément sans avoir à recharger la page.
Vous rencontrez probablement WebSocket dans les applications web quotidiennes telles que les jeux en ligne, la messagerie instantanée et les mises à jour du marché boursier.
Pourquoi avons-nous besoin de WebSocket pour contrôler l'ESP32 de manière fluide ?
Imaginez que vous souhaitiez contrôler votre voiture télécommandée via une interface web sur votre téléphone ou votre ordinateur. Sans WebSocket, chaque fois que vous voudriez changer la direction ou la vitesse de la voiture, vous devriez rafraîchir la page web. C'est comme si vous deviez appuyer sur un bouton "recharger" chaque fois que vous voulez que votre commande atteigne la voiture.
Désormais, avec WebSocket, c'est comme avoir une connexion continue et directe entre votre téléphone ou votre ordinateur et la voiture. Vous n'avez plus besoin de rafraîchir la page chaque fois que vous voulez diriger la voiture ou ajuster sa vitesse. C'est comme si la voiture écoutait toujours vos commandes en temps réel, sans aucun délai causé par le rechargement constant de la page.
En général, WebSocket vous permet de :
- Envoyer des données du navigateur web vers l'Arduino Nano ESP32 sans recharger la page web.
- Envoyer des données de l'Arduino Nano ESP32 vers le navigateur web sans recharger la page web.
Cela permet une communication bidirectionnelle en temps réel.
Avantages de WebSocket avec ESP32 :
- Contrôle en temps réel : WebSocket permet une communication instantanée avec l'ESP32, garantissant des réponses rapides aux commandes pour une expérience utilisateur fluide.
- Connexion persistante : Maintenez un lien continu sans avoir à rafraîchir la page de contrôle, créant ainsi une ligne de communication toujours prête pour les instructions immédiates.
- Efficacité : Bénéficiez de réponses rapides sans nécessiter de rechargement constant de la page, améliorant ainsi le plaisir et l'efficacité globale de l'utilisateur.
Discussion par web avec Arduino Nano ESP32 via WebSocket
Le contenu de la page Web (HTML, CSS, JavaScript) est stocké séparément dans un fichier index.h. Nous aurons donc deux fichiers de code sur Arduino IDE :
- Un fichier .ino qui est un code Arduino Nano ESP32, permettant de créer un serveur web et un serveur WebSocket
- Un fichier .h contenant le contenu de la page web.
Étapes rapides
- Si c'est la première fois que vous utilisez Arduino Nano ESP32, consultez comment configurer l'environnement pour Arduino Nano ESP32 sur Arduino IDE.
- Connectez la carte Arduino Nano ESP32 à votre PC via un câble USB.
- Ouvrez Arduino IDE sur votre PC.
- Sélectionnez la bonne carte Arduino Nano ESP32 (par exemple, Arduino Nano ESP32) et le port COM.
- Ouvrez le gestionnaire de bibliothèques en cliquant sur l'icône Gestionnaire de bibliothèques dans la barre de navigation gauche de Arduino IDE.
- Recherchez “ESPAsyncWebServer”, puis trouvez ESPAsyncWebServer créé par lacamera.
- Cliquez sur le bouton Install pour installer la bibliothèque ESPAsyncWebServer.
- On vous demandera d'installer la dépendance. Cliquez sur le bouton Install All.
- Recherchez « WebSockets », puis trouvez les WebSockets créés par Markus Sattler.
- Cliquez sur le bouton Install pour installer la bibliothèque WebSockets.
- Sur l'IDE Arduino, créez un nouveau sketch, donnez-lui un nom, par exemple, newbiely.fr.ino
- Copiez le code ci-dessous et ouvrez-le avec l'IDE Arduino
/*
* Ce code Arduino Nano ESP32 a été développé par newbiely.fr
* Ce code Arduino Nano ESP32 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-nano-esp32/arduino-nano-esp32-websocket
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <WebSocketsServer.h>
#include "index.h"
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
AsyncWebServer server(80);
WebSocketsServer webSocket = WebSocketsServer(81); // WebSocket server on port 81
void webSocketEvent(uint8_t num, WStype_t type, uint8_t* payload, size_t length) {
switch (type) {
case WStype_DISCONNECTED:
Serial.printf("[%u] Disconnected!\n", num);
break;
case WStype_CONNECTED:
{
IPAddress ip = webSocket.remoteIP(num);
Serial.printf("[%u] Connected from %d.%d.%d.%d\n", num, ip[0], ip[1], ip[2], ip[3]);
}
break;
case WStype_TEXT:
Serial.printf("[%u] Received text: %s\n", num, payload);
// Send a response back to the client
webSocket.sendTXT(num, "Received: " + String((char*)payload));
break;
}
}
void setup() {
Serial.begin(9600);
delay(1000);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
// Initialize WebSocket server
webSocket.begin();
webSocket.onEvent(webSocketEvent);
// Serve a basic HTML page with JavaScript to create the WebSocket connection
server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) {
Serial.println("Web Server: received a web page request");
String html = HTML_CONTENT; // Use the HTML content from the index.h file
request->send(200, "text/html", html);
});
server.begin();
Serial.print("Arduino Nano ESP32 Web Server's IP address: ");
Serial.println(WiFi.localIP());
}
void loop() {
webSocket.loop();
// TODO: Your code here
}
- Créez le fichier index.h sur Arduino IDE en :
- Cliquant soit sur le bouton juste en dessous de l'icône du moniteur série et en choisissant Nouvel Onglet, soit en utilisant les touches Ctrl+Shift+N.
- Nommez le fichier index.h et cliquez sur le bouton OK
- Copiez le code ci-dessous et collez-le dans index.h.
- Vous avez maintenant le code dans deux fichiers : newbiely.fr.ino et index.h
- Cliquez sur le bouton Upload dans l'IDE Arduino pour téléverser le code sur l'Arduino Nano ESP32.
- Ouvrez le moniteur série
- Consultez le résultat sur le moniteur série.
- Prenez note de l'adresse IP affichée et saisissez cette adresse dans la barre d'adresse d'un navigateur web sur votre smartphone ou PC.
- Vous verrez la page web comme ci-dessous :
- Cliquez sur le bouton CONNECTER pour connecter la page Web à Arduino Nano ESP32 via WebSocket.
- Tapez quelques mots et envoyez-les à Arduino Nano ESP32.
- Vous verrez la réponse de l'Arduino Nano ESP32.
- Si vous modifiez le contenu HTML dans le fichier index.h et que vous ne touchez à rien dans le fichier newbiely.fr.ino, lorsque vous compilez et téléchargez le code sur l'ESP32, l'IDE Arduino ne mettra pas à jour le contenu HTML.
- Pour que l'IDE Arduino mette à jour le contenu HTML dans ce cas, apportez une modification dans le fichier newbiely.fr.ino (par exemple, ajouter une ligne vide, ajouter un commentaire...)
/*
* Ce code Arduino Nano ESP32 a été développé par newbiely.fr
* Ce code Arduino Nano ESP32 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-nano-esp32/arduino-nano-esp32-websocket
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<!-- saved from url=(0019)http://192.168.0.2/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Arduino Nano ESP32 WebSocket</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<link rel="icon" href="https://diyables.io/images/page/diyables.svg">
<style>
/* Add some basic styling for the chat window */
body {
font-size: 16px;
}
.chat-container {
width: 400px;
margin: 0 auto;
padding: 10px;
}
.chat-messages {
height: 250px;
overflow-y: auto;
border: 1px solid #444;
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;
}
</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 += text + '<br>';
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('<span style="color:navy">' + message + '</span>');
// 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('<span style="color:blue">' + e_msg.data + '</span>');
}
</script>
</head>
<body>
<div class="chat-container">
<h2>Arduino Nano ESP32 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
Connecting to WiFi...
Connected to WiFi
Arduino Nano ESP32 Web Server's IP address IP address: 192.168.0.2
Autoscroll
Clear output
9600 baud
Newline
※ NOTE THAT:
Explication du code ligne par ligne
Le code Arduino Nano ESP32 ci-dessus contient des explications ligne par ligne. Veuillez lire les commentaires dans le code !
Comment fonctionne le système
Le code Arduino Nano ESP32 fonctionne en créant à la fois un serveur Web et un serveur WebSocket. Le processus se déroule comme suit :
- Lorsque vous saisissez l'adresse IP de l'ESP32 dans un navigateur web, une demande est faite pour la page web (Interface Utilisateur) depuis l'Arduino Nano ESP32.
- Le serveur web de l'ESP32 répond en transmettant le contenu de la page web (HTML, CSS, JavaScript).
- Ensuite, votre navigateur web affiche la page web.
- Lorsque vous cliquez sur le bouton CONNECTER, le code JavaScript intégré dans la page web établit une connexion WebSocket avec le serveur WebSocket sur l'Arduino Nano ESP32.
- Avec la connexion WebSocket établie, lorsque vous tapez quelque chose et cliquez sur le bouton ENVOYER, le code JavaScript envoie ce texte à l'Arduino Nano ESP32 via la connexion WebSocket en arrière-plan.
- Lors de la réception de la valeur d'angle, le serveur WebSocket renvoie une réponse à la page web.
Vous pouvez découvrir d'autres exemples de WebSocket Arduino Nano ESP32 ci-dessous :