Voir la source de Esp8266 webserver

=Introduction=
{|style="width:650px" align="center"
|
[[Fichier:Warning manual.jpg|centré|300px]]
|valign="top"|
Soyez sûr de comprendre la section sur [[Arduino_sketch_writing| 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 [[Esp8266_wifi | 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''
<source lang="c">
#include <ESP8266WebServer.h>
</source>
* création de ''l'objet'' serveur:
<source lang="c">
ESP8266WebServer server(80);
</source>

= 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'':
<source lang="c">
void setup(){
  ...
  server.on("/", maFonction);
}

void maFonction(){
  // code de maFonction
}
</source>
= 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'':
<source lang="c">
void setup(){
  ...
  server.begin();
}
</source>
* dans la fonction ''loop'', il faut dire au serveur de s'occuper des clients:
<source lang="c">
void loop(){
  ...
  server.handleClient();
}
</source>
Ce qui donne le sketch suivant:
<source lang="c">
#include <ESP8266WebServer.h>
ESP8266WebServer server(80);

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

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

void maFonction(){
  // code de maFonction
}
</source>
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:
<source lang="c">
void maFonction(){
  server.send(200, "text/plain", "Coucou de l'ESP8266");
}
</source>
Ce qui nous donne l'échange suivant:
[[Fichier:Esp8266 http plain text network frame.png|centré]]
==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). 
<source lang="html">
<!DOCTYPE html>
<html>
<head>
	<title>ESP8266</title>
</head>
<body>
	<h1>Coucou de l'ESP8266</h1>
</body>
</html>
</source>

Nous allons ''stocker'' la page dans une variable et pour cela nous allons devoir la [https://fr.wikipedia.org/wiki/Minification minifier] !
Il suffit de taper ''minify html'' sur google pour trouver des sites qui réalise cet opération gratuitement.
[[Fichier:Minify html google search.png|centré|500px]]
Une fois le contenu minifier, voici le résultat:
<source lang="html>
<!DOCTYPE html><html><head><title>ESP8266</title></head><body><h1>Coucou de l'ESP8266</h1></body></html>
</source>
On peut maintenant déclarer une variable globale ''html'':
<source lang="c">
char html[] = "<!DOCTYPE html><html><head><title>ESP8266</title></head><body><h1>Coucou de l'ESP8266</h1></body></html>";
</source>
{|style="width:650px" align="center"
|
[[Fichier:Warning-icon.png|centré|50px]]
|width=5px|
|valign=top|
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:

<source lang="c">
void maFonction(){
  server.send(200, "text/html", html);
}
</source>
Ce qui nous donne l'échange suivant:
[[Fichier:Esp8266 http html text network frame.png|centré]]

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()'':
<source lang="c">
server.send(200, "text/html", F(html));
</source>

==application/json==