Dans ce tutoriel, nous allons voir comment créer une interface sous la forme d’une page web dont les fichiers sont stockés dans la mémoire flash de l’ESP32. Pour cela nous allons utiliser un serveur asynchrone et une websocket pour rafraichir la page.
Matériel
- NodeMcu ESP32
- Ordinateur
Installation
Pour ce projet, nous avons utiliser Arduino IDE mais il est tout à fait possible d’utiliser VS code avec les extensions adéquates.
Bibliothèque à installer à partir de l’IDE
- #include <ESPAsyncWebServer.h>
- #include <AsyncTCP.h>
Enregistrer les fichiers en SPIFF
Tout d’abord nous allons créer l’arborescence de fichiers suivantes avec les fichiers web dans un dossier data à la racine du code .ino. Ces fichiers sont le coeur de l’interface web servit par le serveur.
Architecture de fichier
ESP32_WebSocket_HelloWorld
│
├── ESP32_WebSocket_HelloWorld.ino
│
└── data
├── index.html
├── style.css
└── app.js
Le fichier html contient la description de la page web
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESP32 WebSocket Demo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>ESP32 WebSocket</h1>
<div id="time">
0 s
</div>
</div>
<script src="app.js"></script>
</body>
</html>
le fichier css contient le style de la page html
body
{
margin:0;
padding:0;
background:#f5f5f5;
font-family:Arial, Helvetica, sans-serif;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.container
{
background:white;
width:350px;
padding:30px;
border-radius:10px;
box-shadow:0 0 15px rgba(0,0,0,0.2);
text-align:center;
}
h1
{
color:#1565C0;
}
#time
{
margin-top:30px;
font-size:48px;
font-weight:bold;
color:#2E7D32;
}
le fichier javascript contient le code de la partie dynamique de la page
let gateway =
`ws://${window.location.hostname}/ws`;
let websocket = null;
function initWebSocket()
{
console.log("Opening WebSocket...");
websocket = new WebSocket(gateway);
websocket.onopen = onOpen;
websocket.onclose = onClose;
websocket.onmessage = onMessage;
websocket.onerror = onError;
}
function onOpen(event)
{
console.log("WebSocket Connected");
}
function onClose(event)
{
console.log("WebSocket Closed");
setTimeout(initWebSocket, 2000);
}
function onError(event)
{
console.log("WebSocket Error");
}
function onMessage(event)
{
let data = JSON.parse(event.data);
document.getElementById("time").innerHTML =
data.uptime + " s";
}
window.addEventListener("load", function()
{
initWebSocket();
});
Charger les fichier en Flash
Pour charger les fichiers en mémoire flash, il faut qu’il soit présent dans le dossier data à la racine. Ensuite dans Outils, sélectionnez ESP32 Sketch Data Upload.
Appuyer longuement sur le bouton BOOT ou EN lorsque « Connecting …. » apparait
Code de gestion d’un interface web avec websocket
Dans le code de l’ESP32 nous allons confgurer le serveur asynchrone ainsi que la websocket qui permet de communiquer entre l’interface et le serveur.
- async_apws_esp32.ino
#include <WiFi.h>
#include <SPIFFS.h>
#include <ESPAsyncWebServer.h>
#include <AsyncTCP.h>
const char* ssid = "ESP32-AP";
const char* password = "12345678";
AsyncWebServer server(80);
AsyncWebSocket ws("/ws");
// update websocket
unsigned long lastUpdate = 0;
void notifyClients()
{
String json = "{\"uptime\":" + String(millis()/1000) + "}";
ws.textAll(json);
}
void onWebSocketEvent(AsyncWebSocket *server,
AsyncWebSocketClient *client,
AwsEventType type,
void *arg,
uint8_t *data,
size_t len)
{
switch(type)
{
case WS_EVT_CONNECT:
Serial.printf("Client %u connected\n", client->id());
client->text(
"{\"uptime\":" +
String(millis()/1000) +
"}"
);
break;
case WS_EVT_DISCONNECT:
Serial.printf("Client %u disconnected\n", client->id());
break;
case WS_EVT_DATA:
break;
case WS_EVT_PONG:
break;
case WS_EVT_ERROR:
break;
}
}
// main code
void setup()
{
Serial.begin(115200);
WiFi.softAP(ssid, password);
Serial.print("AP IP: ");
Serial.println(WiFi.softAPIP());
if (!SPIFFS.begin(true))
{
Serial.println("SPIFFS Error");
return;
}
ws.onEvent(onWebSocketEvent);
server.addHandler(&ws);
server.serveStatic("/", SPIFFS, "/")
.setDefaultFile("index.html");
server.begin();
}
void loop()
{
ws.cleanupClients();
if(millis() - lastUpdate >= 1000)
{
lastUpdate = millis();
notifyClients();
}
}
Résultat
Pour afficher l’interface web, connecté vous au réseau de l’ESP32 : « ESP32-AP » via l’outil de connexion votre ordinateur. Puis entrée l’adresse 192.168.4.1 dans un navigateur
N.B.: les navigateur garde en cache mémoire les pages internet ouvertes. Si vous mettez à jour l’un des fichier de l’interface, elle peut ne pas se mettre à jour tant que l’historique n’est pas effacé.
Bonus: réseau local
Plutôt que d’utiliser l’ESP32 en point d’accès et se connecter à son réseau, il est possible de le connecter à un réseau existant afin qu’il soit accessible des appareils de ce réseau.
Dans ce cas, il vous suffit de remplacer
WiFi.softAP(ssid, password);
Serial.print("AP IP: ");
Serial.println(WiFi.softAPIP());
par
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED)
{
delay(500);
Serial.print(".");
}
Serial.println();
Serial.println(WiFi.localIP());
Ainsi que le ssid et password correspondant au réseau.
