Introduction

Soyez sûr de comprendre la section sur comment écrire un sketch avant de poursuivre. Le code ci-dessous fait référence à des parties bien spécifiques, détaillées et expliquées dans la section suscitée.

La puce ESP8266 doit d'abord être connectée en Wi-Fi avant d'aller plus loin !

Création du serveur

Il est très rapide de créer un serveur web sur l'ESP8266. Pour cela il faut passer par les étapes suivantes:

import de la librairie ESP8266WebServer

#include <ESP8266WebServer.h>

création de l'objet serveur:

ESP8266WebServer server(80);

Ajout d'une route

Dans la fonction setup() on peut maintenant faire le lien entre une URL et une fonction grâce à la fonction on:

void setup(){
  ...
  server.on("/", maFonction);
}

void maFonction(){
  // code de maFonction
}

Démarrage du serveur

Maintenant que le serveur est configuré, il ne reste plus qu'à le démarrer puis lui dire de s'occuper des clients:

dans la fonction setup, après la déclaration des routes, il faut utilisé begin:

void setup(){
  ...
  server.begin();
}

dans la fonction loop, il faut dire au serveur de s'occuper des clients:

void loop(){
  ...
  server.handleClient();
}

Ce qui donne le sketch suivant:

#include <ESP8266WebServer.h>
ESP8266WebServer server(80);

void setup(){
  server.on("/", maFonction);
  server.begin();
}

void loop(){
  server.handleClient();
}

void maFonction(){
  // code de maFonction
}

Notre serveur est prêt à répondre !

Réponses HTTP

Dans la fonction maFonction il faut maintenant dire au serveur quoi répondre et cela se fait grâce à la fonction send qui prend trois paramètres:

le code http (200, 404, ...);
l'entête Content-Type (text/plain, text/html, ...);
le corps de la réponse;

text/plain

C'est le type de réponse le plus simple:

void maFonction(){
  server.send(200, "text/plain", "Coucou de l'ESP8266");
}

Ce qui nous donne l'échange suivant:

Esp8266 http plain text network frame.png

text/html

Pour afficher une page avec du HTML l'opération est un peu plus complexe.

Contenu statique

Le plus simple est de commencer avec une page qui ne change pas (contenu statique).

<!DOCTYPE html>
<html>
<head>
	<title>ESP8266</title>
</head>
<body>
	<h1>Coucou de l'ESP8266</h1>
</body>
</html>

Nous allons stocker la page dans une variable et pour cela nous allons devoir la minifier ! Il suffit de taper minify html sur google pour trouver des sites qui réalise cet opération gratuitement.

Une fois le contenu minifier, voici le résultat:

<!DOCTYPE html><html><head><title>ESP8266</title></head><body><h1>Coucou de l'ESP8266</h1></body></html>

On peut maintenant déclarer une variable globale html:

char html[] = "<!DOCTYPE html><html><head><title>ESP8266</title></head><body><h1>Coucou de l'ESP8266</h1></body></html>";

Le code HTML sus-mentionné ne contient pas de caractères " utilisés pour définir les valeurs des attributs HTML (eg. class="maclassecss").

Si c'est le cas de votre HTML vous devez échapper les caractères " en les faisant précéder du caractère d'échappement \.

Pour résumer: " devient \".

Pour effectuer les remplacement vous pouvez utiliser n'importe quel éditeur de texte (Notepad++, SublimeText, VSCode, ...) !

Voici le code de maFonction:

void maFonction(){
  server.send(200, "text/html", html);
}

Ce qui nous donne l'échange suivant:

Esp8266 http html text network frame.png

Si le contenu de votre page HTML dépasse 96 Kio (taille de la RAM de l'ESP8266) il faut dire à l'ESP8266 de ne pas faire transiter la variable par la RAM mais de la lire directement depuis la flash grâce à F():

server.send(200, "text/html", F("<!DOCTYPE html><html><head><title>ESP8266</title></head><body><h1>Coucou de l'ESP8266</h1></body></html>"));

L'inconvénient est que le HTML ne peut plus se trouver dans une variable global...

Contenu dynamique

Pour renvoyer du contenu dynamique, il suffit d'utiliser un tampon qui va nous permettre de stocker la ou les variables à renvoyer.

Imaginons que nous voulions renvoyer un tableau avec l'état des broches. Nous allons couper la page en deux:

<!DOCTYPE html>
<html>
<head>
	<title>ESP8266</title>
	<meta charset="utf-8">
</head>
<body>

</body>
</html>

Ce qui donnera:

char header[] = "<!DOCTYPE html><html><head><title>ESP8266</title><meta charset=\"utf-8\"></head><body>";
char footer[] = "</body></html>";

Il ne reste plus qu'à modifier notre fonction pour récupérer l'état des broches:

void maFonction(){
  char buffer[800];
  strcpy(buffer, header);
  sprintf(buffer, "%s<table border=\"1\"><tr><td>D0</td><td>%s</td></tr>", buffer, digitalRead(D0) == HIGH ? "HIGH" : "LOW");
  sprintf(buffer, "%s<tr><td>D1</td><td>%s</td></tr>", buffer, digitalRead(D1) == HIGH ? "HIGH" : "LOW");
  sprintf(buffer, "%s<tr><td>D2</td><td>%s</td></tr>", buffer, digitalRead(D2) == HIGH ? "HIGH" : "LOW");
  sprintf(buffer, "%s<tr><td>D3</td><td>%s</td></tr>", buffer, digitalRead(D3) == HIGH ? "HIGH" : "LOW");
  sprintf(buffer, "%s<tr><td>D4</td><td>%s</td></tr>", buffer, digitalRead(D4) == HIGH ? "HIGH" : "LOW");
  sprintf(buffer, "%s<tr><td>D5</td><td>%s</td></tr>", buffer, digitalRead(D5) == HIGH ? "HIGH" : "LOW");
  sprintf(buffer, "%s<tr><td>D6</td><td>%s</td></tr>", buffer, digitalRead(D6) == HIGH ? "HIGH" : "LOW");
  sprintf(buffer, "%s<tr><td>D7</td><td>%s</td></tr>", buffer, digitalRead(D7) == HIGH ? "HIGH" : "LOW");
  sprintf(buffer, "%s<tr><td>D8</td><td>%s</td></tr></table>", buffer, digitalRead(D8) == HIGH ? "HIGH" : "LOW");
  strcat(buffer, footer);
  server.send(200, "text/html", buffer);
}

strcpy permet de copier une chaîne dans une autre et va nous permettre de rajouter le terminateur de chaîne (\0) à la variable buffer;
sprintf permet de générer des chaîne à partir de n'importe quelle variable (int, bool, etc...) et nous permet de concaténer les lignes de notre tableau;
strcat permet de concaténer le footer à buffer;

NB: on pourrait faire tout avec un seul sprintf, mais le code perdrait en visibilité.

Ce qui donne le tableau suivant:

application/json

Esp8266 webserver

Sommaire