---
title: "Module 8 — Serveur Web embarqué"
---

## Objectifs du module

- Comprendre le rôle d'un serveur web embarqué et son intérêt pour piloter une carte sans application dédiée.
- Créer un serveur HTTP avec WebServer.h et définir des routes.
- Construire une page HTML de contrôle simple.
- Découvrir le WebSocket pour une communication en temps réel bidirectionnelle.

## 1. Pourquoi un serveur web embarqué ?

Plutôt que de développer une application mobile dédiée, l'ESP32-S3 peut lui-même héberger une page web accessible depuis n'importe quel navigateur (smartphone, ordinateur) connecté au même réseau. C'est une solution rapide et universelle pour créer une interface de contrôle ou de supervision d'un projet.

## 2. Serveur web basique avec WebServer.h

La bibliothèque WebServer (incluse dans le core Arduino-ESP32) permet de définir des routes (URL) et la réponse associée à chacune.

```cpp
#include <WiFi.h>
#include <WebServer.h>

const char* ssid = "NomDuReseau";
const char* motDePasse = "MotDePasse";

WebServer serveur(80);

void gererRacine() {
  serveur.send(200, "text/plain", "Serveur ESP32-S3 operationnel !");
}

void setup() {
  Serial.begin(115200);
  WiFi.begin(ssid, motDePasse);
  while (WiFi.status() != WL_CONNECTED) { delay(500); }

  Serial.print("Serveur accessible sur : http://");
  Serial.println(WiFi.localIP());

  serveur.on("/", gererRacine);
  serveur.begin();
}

void loop() {
  serveur.handleClient();  // A appeler en permanence, sans delay() bloquant
}
```

::: {.callout-note title="handleClient() et delay()"}
`serveur.handleClient()` doit être appelée le plus souvent possible dans `loop()`. Évitez tout `delay()` long dans votre boucle principale, sous peine de rendre le serveur peu réactif — reprenez la technique `millis()` vue au Module 6 si vous devez gérer d'autres tâches périodiques en parallèle.
:::

## 3. Page HTML de contrôle de la LED NeoPixel

Construisons une page avec des boutons permettant de changer la couleur de la LED NeoPixel intégrée, directement depuis un navigateur.

```cpp
#include <WiFi.h>
#include <WebServer.h>
#include <Adafruit_NeoPixel.h>

#define NEOPIXEL_PIN 48
Adafruit_NeoPixel pixel(1, NEOPIXEL_PIN, NEO_GRB + NEO_KHZ800);
WebServer serveur(80);

const char pageHTML[] PROGMEM = R"rawliteral(
<!DOCTYPE html><html><head><meta charset='UTF-8'>
<title>Controle LED ESP32-S3</title></head>
<body style='font-family:sans-serif;text-align:center;margin-top:50px;'>
<h1>Controle de la LED NeoPixel</h1>
<a href='/rouge'><button style='padding:15px 30px;margin:5px;'>Rouge</button></a>
<a href='/vert'><button style='padding:15px 30px;margin:5px;'>Vert</button></a>
<a href='/bleu'><button style='padding:15px 30px;margin:5px;'>Bleu</button></a>
<a href='/off'><button style='padding:15px 30px;margin:5px;'>Eteindre</button></a>
</body></html>
)rawliteral";

void changerCouleur(int r, int g, int b) {
  pixel.setPixelColor(0, pixel.Color(r, g, b));
  pixel.show();
}

void setup() {
  pixel.begin();
  WiFi.begin("NomDuReseau", "MotDePasse");
  while (WiFi.status() != WL_CONNECTED) { delay(500); }

  serveur.on("/", []() { serveur.send(200, "text/html", pageHTML); });
  serveur.on("/rouge", []() { changerCouleur(255,0,0); serveur.send(200,"text/html",pageHTML); });
  serveur.on("/vert",  []() { changerCouleur(0,255,0); serveur.send(200,"text/html",pageHTML); });
  serveur.on("/bleu",  []() { changerCouleur(0,0,255); serveur.send(200,"text/html",pageHTML); });
  serveur.on("/off",   []() { changerCouleur(0,0,0);   serveur.send(200,"text/html",pageHTML); });
  serveur.begin();
}

void loop() {
  serveur.handleClient();
}
```

::: {.callout-note title="PROGMEM"}
Le mot-clé PROGMEM place la chaîne de caractères HTML directement en mémoire Flash plutôt qu'en RAM, économisant une ressource précieuse lorsque la page grandit en taille.
:::

## 4. Introduction au WebSocket

Le modèle utilisé ci-dessus (rechargement de page à chaque clic) fonctionne mais reste rudimentaire. Le WebSocket établit une connexion persistante entre le navigateur et la carte, permettant un échange de données en temps réel sans recharger la page — idéal pour afficher en continu une mesure de capteur ou réagir instantanément à une action utilisateur.

Cette technique nécessite la bibliothèque tierce « ESPAsyncWebServer » couplée à « AsyncTCP », plus avancée que WebServer.h. Elle sera abordée en détail dans le cadre du projet final (Module 12) si le projet choisi le nécessite (ex : dashboard de supervision en direct).

## 5. Exercice : dashboard de supervision

En combinant les modules précédents, créez une page web affichant :

- La température et l'humidité actuelles (capteur BME280 du Module 5).
- Un bouton pour changer la couleur de la LED NeoPixel.
- L'adresse IP et le temps de fonctionnement (uptime, via `millis()`) de la carte.

## Checklist de fin de module

- [ ] Je sais créer un serveur web basique avec des routes définies.
- [ ] Je sais renvoyer une page HTML complète avec des boutons d'action.
- [ ] Je comprends la différence entre le modèle HTTP classique et le WebSocket.
- [ ] J'ai réalisé le dashboard de supervision combinant capteur, LED et informations système.