Dans ce guide, vous apprendrez à créer un serveur WebSocket avec l’ESP32 pour afficher les lectures des capteurs sur une page Web. Chaque fois que l’ESP32 a de nouvelles lectures disponibles, la page Web est mise à jour automatiquement sans qu’il soit nécessaire de l’actualiser manuellement.
Pour en savoir plus sur la création de serveurs Web avec l’ESP32 à partir de zéro, consultez notre eBook : Créer des serveurs Web avec l’ESP32 et l’ESP8266.
Table des matières
Tout au long de ce didacticiel, nous aborderons les principaux sujets suivants :
Présentation du protocole WebSocket
Un WebSocket est une connexion persistante entre un client et un serveur qui permet une communication bidirectionnelle entre les deux parties à l’aide d’une connexion TCP. Cela signifie que vous pouvez envoyer des données du client au serveur et du serveur au client à tout moment.
Le client établit une connexion WebSocket avec le serveur via un processus appelé poignée de main WebSocket. La poignée de main commence par une requête/réponse HTTP, permettant aux serveurs de gérer les connexions HTTP ainsi que les connexions WebSocket sur le même port. Une fois la connexion établie, le client et le serveur peuvent envoyer des données WebSocket en mode full duplex.
Grâce au protocole WebSockets, le serveur (carte ESP32) peut envoyer des informations au client ou à tous les clients sans qu’il soit sollicité. Cela nous permet également d’envoyer des informations au navigateur Web lorsqu’un changement se produit.
Ce changement peut être quelque chose qui s’est produit sur la page Web (vous avez cliqué sur un bouton) ou quelque chose qui s’est produit du côté ESP32, comme appuyer sur un bouton physique sur un circuit, ou de nouvelles lectures de capteur disponibles.
Apprenez à contrôler les sorties ESP32 via le protocole WebSocket : ESP32 WebSocket Server : Control Outputs (Arduino IDE).
Aperçu du projet
Voici la page Web que nous allons créer pour ce projet.
- Nous allons créer une page Web qui affiche la température, l’humidité et la pression.
- La page Web affiche les dernières lectures du capteur lorsque vous ouvrez ou actualisez la page Web.
- Les lectures du capteur sont mises à jour automatiquement chaque fois qu’une nouvelle lecture est disponible sur l’ESP32 sans qu’il soit nécessaire d’actualiser la page Web.
- Le serveur Web fonctionne parfaitement sur plusieurs clients (plusieurs onglets de navigateur Web sur le même appareil ou sur différents appareils).
Comment ça marche?
- L’ESP héberge un serveur Web qui affiche une page Web avec trois cartes pour les lectures des capteurs.
- Lorsque vous ouvrez la page Web, elle envoie un message (getReadings) à l’ESP via le protocole WebSocket. Le serveur (ESP) reçoit ce message. Lorsque cela se produit, il obtient de nouvelles lectures des capteurs et les renvoie au client (navigateur Web), également via le protocole de socket Web. De cette façon, chaque fois que vous ouvrez un nouvel onglet, il affiche toujours les valeurs actuelles et mises à jour.
- Toutes les 30 secondes, l’ESP obtient de nouvelles lectures et les envoie à tous les clients connectés (tous les onglets du navigateur Web ouverts) via le protocole WebSocket. Le client reçoit ce message et affiche les lectures sur la page Web.
Conditions préalables
Avant de poursuivre ce didacticiel, assurez-vous de vérifier toutes les conditions préalables suivantes.
1) Pièces requises
Pour suivre ce projet, vous avez besoin de :
Pour cet exemple, nous utiliserons un capteur BME280, mais vous pouvez utiliser n’importe quel autre capteur que vous connaissez.
Vous pouvez utiliser les liens précédents ou accéder directement à MakerAdvisor.com/tools pour trouver toutes les pièces pour vos projets au meilleur prix !
2) Complément pour les cartes Arduino IDE et ESP32
Nous allons programmer l’ESP32 à l’aide de l’IDE Arduino. Donc, vous devez avoir installé le module complémentaire ESP32. Suivez le tutoriel suivant si vous ne l’avez pas déjà fait :
Si vous souhaitez utiliser VS Code avec l’extension PlatformIO, suivez plutôt le tutoriel suivant pour apprendre à programmer l’ESP32 :
3) Plugin de téléchargement de système de fichiers
Pour télécharger les fichiers HTML, CSS et JavaScript nécessaires à la création de ce projet dans la mémoire flash ESP32 (SPIFFS), nous utiliserons un plug-in pour Arduino IDE : SPIFFS Filesystem Uploader. Suivez le tutoriel suivant pour installer le plugin filesystem uploader si vous ne l’avez pas déjà fait :
Si vous utilisez VS Code avec l’extension PlatformIO, lisez le didacticiel suivant pour savoir comment télécharger des fichiers sur le système de fichiers :
4) Bibliothèques
Pour compiler ce projet, vous devez installer les bibliothèques suivantes :
Vous pouvez installer les deux premières bibliothèques à l’aide du gestionnaire de bibliothèque Arduino. Accédez à Esquisse > Inclure la bibliothèque > Gérer les bibliothèques et recherchez le nom de la bibliothèque.
Les bibliothèques ESPAsyncWebServer et AsynTCP ne peuvent pas être installées via le gestionnaire de bibliothèque Arduino, vous devez donc copier les fichiers de bibliothèque dans le dossier Bibliothèques d’installation Arduino. Alternativement, dans votre IDE Arduino, vous pouvez aller dans Sketch> Inclure la bibliothèque> Ajouter une bibliothèque .zip et sélectionner les bibliothèques que vous venez de télécharger.
Installation de bibliothèques (VS Code + PlatformIO)
Si vous programmez l’ESP32 à l’aide de PlatformIO, vous devez ajouter les lignes suivantes au fichier platformio.ini pour inclure les bibliothèques (modifiez également la vitesse du moniteur série à 115200) :
platform = [email protected]
board = esp32doit-devkit-v1
framework = arduino
monitor_speed = 115200
lib_deps = ESP Async WebServer
arduino-libraries/Arduino_JSON @ 0.1.0
adafruit/Adafruit BME280 Library @ ^2.1.0
adafruit/Adafruit Unified Sensor @ ^1.1.4Construire le circuit
Pour illustrer comment afficher les lectures de capteur sur un serveur Web avec l’ESP32, nous enverrons les lectures de capteur d’un capteur BME280 au navigateur. Vous devez donc câbler un capteur BME280 à votre ESP32. Vous pouvez également utiliser n’importe quel autre capteur que vous connaissez.
Vous pouvez utiliser les liens précédents ou accéder directement à MakerAdvisor.com/tools pour trouver toutes les pièces pour vos projets au meilleur prix !
Diagramme schématique
Nous allons utiliser la communication I2C avec le module de capteur BME280. Pour cela, câblez le capteur aux broches ESP32 SCL (GPIO 22) et SDA (GPIO 21) par défaut, comme indiqué dans le schéma suivant.
Lecture recommandée : Référence de brochage ESP32 : Quelles broches GPIO devez-vous utiliser ?
Organisation de vos fichiers
Pour garder le projet organisé et le rendre plus facile à comprendre, nous allons créer quatre fichiers pour construire le serveur Web :
- Croquis Arduino : pour obtenir les lectures des capteurs et gérer le serveur Web ;
- index.html : pour définir le contenu de la page web pour afficher les lectures des capteurs ;
- style.css : pour styliser la page Web ;
- script.js : pour programmer le comportement de la page Web : gérez ce qui se passe lorsque vous ouvrez la page Web et affichez les lectures reçues via le protocole WebSocket.
Vous devez enregistrer les fichiers HTML, CSS et JavaScript dans un dossier appelé data dans le dossier d’esquisse Arduino, comme indiqué dans le diagramme précédent. Nous allons télécharger ces fichiers sur le système de fichiers ESP32 (SPIFFS).
Vous pouvez télécharger tous les fichiers du projet :
Fichier HTML
Copiez ce qui suit dans le fichier index.html.
<!DOCTYPE html>
<html>
<head>
<title>ESP IOT DASHBOARD</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="https://www.raspberryme.com/esp32-websocket-server-sensor/favicon.png">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="topnav">
<h1>SENSOR READINGS (WEBSOCKET)</h1>
</div>
<div class="content">
<div class="card-grid">
<div class="card">
<p class="card-title"><i class="fas fa-thermometer-threequarters" style="color:#059e8a;"></i> Temperature</p>
<p class="reading"><span id="temperature"></span> °C</p>
</div>
<div class="card">
<p class="card-title"> Humidity</p>
<p class="reading"><span id="humidity"></span> %</p>
</div>
<div class="card">
<p class="card-title"> Pressure</p>
<p class="reading"><span id="pressure"></span> hpa</p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Nous n’entrerons pas dans les détails du contenu du fichier HTML. Juste les parties pertinentes.
Les lignes suivantes affichent une carte pour la température.
<div class="card">
<p class="card-title"><i class="fas fa-thermometer-threequarters" style="color:#059e8a;"></i> Temperature</p>
<p class="reading"><span id="temperature"></span> °C</p>
</div>La température apparaîtra dans le paragraphe suivant entre les balises . Notez que vous avez besoin d’un identifiant unique pour cette balise HTML afin que nous sachions plus tard comment faire référence à cet élément HTML. Dans ce cas, l’identifiant unique est la température.
<span id="temperature"></span>Nous faisons une procédure similaire pour l’humidité et la pression. Les identifiants uniques pour les éléments HTML où nous afficherons l’humidité et la pression sont l’humidité et la pression.
<div class="card">
<p class="card-title"> Humidity</p>
<p class="reading"><span id="humidity"></span> %</p>
</div>
<div class="card">
<p class="card-title"> Pressure</p>
<p class="reading"><span id="pressure"></span> hpa</p>
</div>Fichier CSS
Copiez ce qui suit dans le fichier style.css. N’hésitez pas à le modifier pour que la page Web s’affiche comme vous le souhaitez. Nous n’expliquerons pas le fonctionnement du CSS de cette page Web car il n’est pas pertinent pour ce didacticiel.
html {
font-family: Arial, Helvetica, sans-serif;
display: inline-block;
text-align: center;
}
h1 {
font-size: 1.8rem;
color: white;
}
.topnav {
overflow: hidden;
background-color: #0A1128;
}
body {
margin: 0;
}
.content {
padding: 50px;
}
.card-grid {
max-width: 800px;
margin: 0 auto;
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.card {
background-color: white;
box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5);
}
.card-title {
font-size: 1.2rem;
font-weight: bold;
color: #034078
}
.reading {
font-size: 1.2rem;
color: #1282A2;
}Fichier JavaScript
Copiez ce qui suit dans le fichier script.js.
var gateway = `ws://${window.location.hostname}/ws`;
var websocket;
// Init web socket when the page loads
window.addEventListener('load', onload);
function onload(event) {
initWebSocket();
}
function getReadings(){
websocket.send("getReadings");
}
function initWebSocket() {
console.log('Trying to open a WebSocket connection…');
websocket = new WebSocket(gateway);
websocket.onopen = onOpen;
websocket.onclose = onClose;
websocket.onmessage = onMessage;
}
// When websocket is established, call the getReadings() function
function onOpen(event) {
console.log('Connection opened');
getReadings();
}
function onClose(event) {
console.log('Connection closed');
setTimeout(initWebSocket, 2000);
}
// Function that receives the message from the ESP32 with the readings
function onMessage(event) {
console.log(event.data);
var myObj = JSON.parse(event.data);
var keys = Object.keys(myObj);
for (var i = 0; i < keys.length; i++){
var key = keys[i];
document.getElementById(key).innerHTML = myObj[key];
}
}Voici une liste de ce que fait ce code :
- initialise une connexion WebSocket avec le serveur ;
- envoie un message au serveur pour obtenir les lectures actuelles du capteur ;
- utilise la réponse pour mettre à jour les lectures du capteur sur la page Web ;
- gère l’échange de données via le protocole WebSocket.
Jetons un coup d’œil à ce code JavaScript pour voir comment cela fonctionne.
La passerelle est le point d’entrée de l’interface WebSocket. window.location.hostname obtient l’adresse de la page actuelle (l’adresse IP du serveur Web).
var gateway = ws://${window.location.hostname}/ws;Créez une nouvelle variable globale appelée websocket.
var websocket;Ajoutez un écouteur d’événement qui appellera la fonction onload lors du chargement de la page Web.
window.addEventListener('load', onload);La fonction onload() appelle la fonction initWebSocket() pour initialiser une connexion WebSocket avec le serveur.
function onload(event) {
initWebSocket();
}La fonction initWebSocket() initialise une connexion WebSocket sur la passerelle définie précédemment. Nous attribuons également plusieurs fonctions de rappel lorsque la connexion WebSocket est ouverte, fermée ou lorsqu’un message est reçu.
function initWebSocket() {
console.log('Trying to open a WebSocket connection…');
websocket = new WebSocket(gateway);
websocket.onopen = onOpen;
websocket.onclose = onClose;
websocket.onmessage = onMessage;
}Notez que lorsque la connexion WebSocket est ouverte, nous appellerons la fonction getReadings.
function onOpen(event) {
console.log('Connection opened');
getReadings();
}La fonction getReadings() envoie un message au serveur getReadings pour obtenir les lectures actuelles du capteur. Ensuite, nous devons gérer ce qui se passe lorsque nous recevons ce message côté serveur (ESP32).
function getReadings(){
websocket.send("getReadings");
}Nous traitons les messages reçus via le protocole WebSocket sur la fonction onMessage().
// Function that receives the message from the ESP32 with the readings
function onMessage(event) {
console.log(event.data);
var myObj = JSON.parse(event.data);
var keys = Object.keys(myObj);
for (var i = 0; i < keys.length; i++){
var key = keys[i];
document.getElementById(key).innerHTML = myObj[key];
}
}Le serveur envoie les lectures au format JSON, par exemple :
{
temperature: 20;
humidity: 50;
pressure: 1023;
}La fonction onMessage() parcourt simplement toutes les valeurs clés (température, humidité et pression) et les place aux endroits correspondants sur la page HTML. Dans ce cas, les clés ont le même nom que les identifiants que nous avons définis sur la page HTML. Donc, nous pouvons simplement faire quelque chose comme ceci:
for (var i = 0; i < keys.length; i++){
var key = keys[i];
document.getElementById(key).innerHTML = myObj[key];
}Code pour ESP32 WebSocket Server (lectures de capteur)
Copiez le code suivant dans votre IDE Arduino.
/*********
Rui Santos
Complete instructions at https://Raspberryme.com/esp32-websocket-server-sensor/
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*********/
#include <Arduino.h>
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include "SPIFFS.h"
#include <Arduino_JSON.h>
#include <Adafruit_BME280.h>
#include <Adafruit_Sensor.h>
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
// Create a WebSocket object
AsyncWebSocket ws("/ws");
// Json Variable to Hold Sensor Readings
JSONVar readings;
// Timer variables
unsigned long lastTime = 0;
unsigned long timerDelay = 30000;
// Create a sensor object
Adafruit_BME280 bme;
// Init BME280
void initBME(){
if (!bme.begin(0x76)) {
Serial.println("Could not find a valid BME280 sensor, check wiring!");
while (1);
}
}
// Get Sensor Readings and return JSON object
String getSensorReadings(){
readings["temperature"] = String(bme.readTemperature());
readings["humidity"] = String(bme.readHumidity());
readings["pressure"] = String(bme.readPressure()/100.0F);
String jsonString = JSON.stringify(readings);
return jsonString;
}
// Initialize SPIFFS
void initSPIFFS() {
if (!SPIFFS.begin(true)) {
Serial.println("An error has occurred while mounting SPIFFS");
}
Serial.println("SPIFFS mounted successfully");
}
// Initialize WiFi
void initWiFi() {
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.print("Connecting to WiFi ..");
while (WiFi.status() != WL_CONNECTED) {
Serial.print('.');
delay(1000);
}
Serial.println(WiFi.localIP());
}
void notifyClients(String sensorReadings) {
ws.textAll(sensorReadings);
}
void handleWebSocketMessage(void *arg, uint8_t *data, size_t len) {
AwsFrameInfo *info = (AwsFrameInfo*)arg;
if (info->final && info->index == 0 && info->len == len && info->opcode == WS_TEXT) {
//data[len] = 0;
//String message = (char*)data;
// Check if the message is "getReadings"
//if (strcmp((char*)data, "getReadings") == 0) {
//if it is, send current sensor readings
String sensorReadings = getSensorReadings();
Serial.print(sensorReadings);
notifyClients(sensorReadings);
//}
}
}
void onEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type, void *arg, uint8_t *data, size_t len) {
switch (type) {
case WS_EVT_CONNECT:
Serial.printf("WebSocket client #%u connected from %s\n", client->id(), client->remoteIP().toString().c_str());
break;
case WS_EVT_DISCONNECT:
Serial.printf("WebSocket client #%u disconnected\n", client->id());
break;
case WS_EVT_DATA:
handleWebSocketMessage(arg, data, len);
break;
case WS_EVT_PONG:
case WS_EVT_ERROR:
break;
}
}
void initWebSocket() {
ws.onEvent(onEvent);
server.addHandler(&ws);
}
void setup() {
Serial.begin(115200);
initBME();
initWiFi();
initSPIFFS();
initWebSocket();
// Web Server Root URL
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(SPIFFS, "/index.html", "text/html");
});
server.serveStatic("/", SPIFFS, "/");
// Start server
server.begin();
}
void loop() {
if ((millis() - lastTime) > timerDelay) {
String sensorReadings = getSensorReadings();
Serial.print(sensorReadings);
notifyClients(sensorReadings);
lastTime = millis();
}
ws.cleanupClients();
}
Comment fonctionne le code
Continuez à lire pour savoir comment le code fonctionne, ou passez à la manifestation section.
Y compris les bibliothèques
Les bibliothèques Adafruit_Sensor et Adafruit_BME280 sont nécessaires pour s’interfacer avec le capteur BME280.
#include <Adafruit_BME280.h>
#include <Adafruit_Sensor.h>Les librairies WiFi, ESPAsyncWebServer et AsyncTCP sont utilisées pour créer le serveur web.
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>Nous enregistrerons les fichiers HTML, CSS et JavaScript sur le système de fichiers ESP32, nous devons donc également inclure la bibliothèque SPIFFS.h.
#include "SPIFFS.h"Pour créer des objets JSON, nous utiliserons la bibliothèque Arduino_JSON.
#include <Arduino_JSON.h>Informations d’identification réseau
Insérez vos informations d’identification réseau dans les variables suivantes, afin que l’ESP32 puisse se connecter à votre réseau local en utilisant le Wi-Fi.
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";AsyncWebServer et AsyncWebSocket
Créez un objet AsyncWebServer sur le port 80.
AsyncWebServer server(80);La ligne suivante crée un nouvel objet websocket sur /ws.
// Create a WebSocket object
AsyncWebSocket ws("/ws");Variables de minuterie
Les variables suivantes sont utilisées pour créer des minuteries dans notre code. Dans notre cas, nous enverrons les lectures des capteurs au client via le protocole WebSocket toutes les 30 000 millisecondes (30 secondes). Vous pouvez remplacer la variable timerDelay par toute autre valeur pertinente pour votre projet.
// Timer variables
unsigned long lastTime = 0;
unsigned long timerDelay = 30000;Initialisation du capteur BME280
La ligne suivante crée un objet Adafruit_BME280 pour faire référence au capteur appelé bme.
// Create a sensor object
Adafruit_BME280 bme;La fonction initBME() initialise le capteur. Il sera appelé plus tard dans le setup().
// Init BME280
void initBME(){
if (!bme.begin(0x76)) {
Serial.println("Could not find a valid BME280 sensor, check wiring!");
while (1);
}
}Obtenir des lectures de capteur (chaîne JSON)
La fonction getSensorreadings() crée une chaîne JSON avec les lectures actuelles du capteur.
// Get Sensor Readings and return JSON object
String getSensorReadings(){
readings["temperature"] = String(bme.readTemperature());
readings["humidity"] = String(bme.readHumidity());
readings["pressure"] = String(bme.readPressure()/100.0F);
String jsonString = JSON.stringify(readings);
return jsonString;
}Initialisation du système de fichiers
La fonction initSPIFFS() initialise SPIFFS, le système de fichiers ESP32 que nous utilisons dans ce projet pour enregistrer les fichiers HTML, CSS et Javascript.
// Initialize SPIFFS
void initSPIFFS() {
if (!SPIFFS.begin(true)) {
Serial.println("An error has occurred while mounting SPIFFS");
}
Serial.println("SPIFFS mounted successfully");
}Initialisation du Wi-Fi
La fonction suivante initialise le Wi-Fi et se connecte à votre réseau à l’aide des informations d’identification que vous avez utilisées précédemment. Cette fonction sera appelée plus tard dans le setup().
// Initialize WiFi
void initWiFi() {
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.print("Connecting to WiFi ..");
while (WiFi.status() != WL_CONNECTED) {
Serial.print('.');
delay(1000);
}
Serial.println(WiFi.localIP());
}Notifier tous les clients via WebSocket
La fonction notifyClients() informe tous les clients des relevés de capteur actuels. L’appel de cette fonction nous permet de notifier les changements dans tous les clients chaque fois que nous obtenons de nouvelles lectures de capteur (toutes les 30 secondes).
void notifyClients(String sensorReadings) {
ws.textAll(sensorReadings);
}Gestion des messages WebSocket
Le handleWebSocketMessage(), comme son nom l’indique, gère ce qui se passe lorsque le serveur reçoit un message du client via le protocole WebSocket. Nous avons vu dans le fichier JavaScript, que le serveur peut recevoir le message getReadings.
Lorsque l’ESP32 reçoit le message getReadings, il envoie les lectures actuelles du capteur.
void handleWebSocketMessage(void *arg, uint8_t *data, size_t len) {
AwsFrameInfo *info = (AwsFrameInfo*)arg;
if (info->final && info->index == 0 && info->len == len && info->opcode == WS_TEXT) {
data[len] = 0;
String message = (char*)data;
//Check if the message is "getReadings"
if (strcmp((char*)data, "getReadings") == 0) {
if it is, send current sensor readings
String sensorReadings = getSensorReadings();
Serial.print(sensorReadings);
notifyClients(sensorReadings);
}
}
}Gestion des événements WebSocket
La fonction onEvent() gère d’autres événements WebSocket.
void onEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type, void *arg, uint8_t *data, size_t len) {
switch (type) {
case WS_EVT_CONNECT:
Serial.printf("WebSocket client #%u connected from %s\n", client->id(), client->remoteIP().toString().c_str());
break;
case WS_EVT_DISCONNECT:
Serial.printf("WebSocket client #%u disconnected\n", client->id());
break;
case WS_EVT_DATA:
handleWebSocketMessage(arg, data, len);
break;
case WS_EVT_PONG:
case WS_EVT_ERROR:
break;
}
}Initialisation du protocole WebSocket
La fonction initWebSocket() initialise le protocole WebSocket.
void initWebSocket() {
ws.onEvent(onEvent);
server.addHandler(&ws);
}installation()
Dans le setup (), nous initialisons le moniteur série, le capteur BME280, le Wi-Fi, le système de fichiers et le protocole WebSocket en appelant les fonctions que nous avons créées précédemment.
Serial.begin(115200);
initBME();
initWiFi();
initSPIFFS();
initWebSocket();Les lignes suivantes serviront le fichier index.html et les autres fichiers statiques référencés enregistrés sur SPIFFS (style.css et script.js) lorsque vous accéderez au serveur Web.
// Web Server Root URL
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(SPIFFS, "/index.html", "text/html");
});
server.serveStatic("/", SPIFFS, "/");Enfin, démarrez le serveur.
// Start server
server.begin();boucle()
Dans la boucle (), nous obtenons et envoyons de nouvelles lectures de capteur toutes les 30 000 millisecondes (30 secondes).
void loop() {
if ((millis() - lastTime) > timerDelay) {
String sensorReadings = getSensorReadings();
Serial.print(sensorReadings);
notifyClients(sensorReadings);
lastTime = millis();
}
ws.cleanupClients();
}Télécharger le code et les fichiers
Après avoir inséré vos informations d’identification réseau, enregistrez le code. Accédez à Sketch > Show Sketch Folder et créez un dossier appelé data.
Dans ce dossier, vous devez placer les fichiers HTML, CSS et JavaScript.
Téléchargez ces fichiers dans le système de fichiers : accédez à Outils > Téléchargement de croquis de données ESP32 et attendez que les fichiers soient téléchargés.
Ensuite, téléchargez le code sur votre carte ESP32. Assurez-vous d’avoir modifié le code avec vos informations d’identification réseau.
Lorsque tout est téléchargé avec succès, ouvrez le moniteur série à un débit en bauds de 115200. Appuyez sur le bouton ESP32 EN/RST, et il devrait imprimer l’adresse IP ESP32.
Manifestation
Ouvrez un navigateur sur votre réseau local et collez l’adresse IP ESP32. Vous devriez avoir accès à la page du serveur Web qui affiche les lectures du capteur.
Les lectures sont mises à jour automatiquement sur la page Web toutes les 30 secondes.
Vous pouvez avoir plusieurs clients sur différents onglets ou appareils de navigateur Web et il se mettra à jour automatiquement sur tous les clients.
Conclusion
Dans ce didacticiel, vous avez appris à créer un serveur Websocket avec l’ESP32 qui sert une page Web pour afficher les lectures des capteurs. Les lectures du capteur sont mises à jour automatiquement sur la page Web sans qu’il soit nécessaire de l’actualiser manuellement.
Nous espérons que vous avez beaucoup appris de ce tutoriel. Faites-nous savoir dans les commentaires ci-dessous si vous avez suivi avec succès ce tutoriel et que le projet fonctionne.
Pour en savoir plus sur la création de serveurs Web avec l’ESP32, nous vous recommandons vivement de consulter notre eBook :
En savoir plus sur l’ESP32 avec nos ressources :
Merci pour la lecture.
Cette vidéo vous emmène dans l’histoire de Raspberry Pi :
