Server web simplu pe NodeMCU ESP8266

Proiectarea unui server web simplu care comandă un LED folosind placa de dezvoltare NodeMcu ESP8266.

ESP8266 este un microcontroller cu suport WiFi și TCP/IP produs de Espressif Systems (Shanghai). Prețul redus al dispozitivului l-a făcut foarte popular, fiind inclus în module, dar și în plăci de dezvoltare pentru aplicații IoT (Internet of Things). NodeMcu este o placă de dezvoltare ce folosește un modul cu ESP8266. Într-un articol anterior am configurat Arduino IDE pentru a putea programa această placă. Am început prin a aprinde intermitent un LED, fără a utiliza funcțiile WiFi ale modulului. E timpul să „conectăm” LED-ul la internet.

În acest articol, voi programa un server web minimal pe ESP8266. Prin accesarea interfeței web, vei putea porni și opri un LED. Butonul care acționează LED-ul își modifică acțiunea în funcție de starea LED-ului. Dacă acesta este oprit, butonul „on” îl pornește. După pornire, butonul își modifică denumirea și funcția în „off”. Deci, în acest exemplu, trimitem date către NodeMcu, dar și primim.

Realizarea practică a testului necesită un LED și un rezistor de 300 – 600 ohmi. Rezistorul unește pinul D0 cu anodul LED-ului. Catodul LED-ului este conectat evident, la masă.

Înainte de a începe, trebuie să precizez că ESP8266 se va conecta la rețeaua WiFi și va primi o adresă IP. Evident, serverul care rulează pe placa de dezvoltare poate fi accesat la această adresă. Schița trimite pe portul serial această adresă IP. Dar, ESP8266 suportă Multicast DNS (mDNS). Prin acest protocol, îi putem atribui un nume de domeniu în rețeaua proprie și putem accesa serverul la o adresă cu domeniu .local. În schița prezentată mai jos, poți accesa pagina web la adresa http://esp8266.local. Suportul pentru mDNS diferă. Pe distribuțiile Linux recente nu ar trebui să fie probleme (pachetul software necesar este avahi). În Windows poți instala Apple Bonjour. Conform Wikipedia, Windows 10 suportă mDNS doar pentru descoperirea imprimantelor în rețea. Poți obține Bonjour descărcând iTunes. Nu este nevoie să instalezi iTunes, poți deschide fișierul de instalare în 7-Zip (click dreapta – 7-Zip – Deschide arhiva). Vei vedea mai multe fișiere msi, printre care și Bonjour.msi. Extrage-l și rulează-l. Reține că instalarea Bonjour este opțională. Dacă preferi să accesezi serverul folosind adresa IP, nu ai nevoie de acest software.

Codul sursă începe cu includerea fișierelor necesare și definirea constantelor pentru numele și parola rețelei wireless și numele de domeniu local. Modifică ssid și password pentru rețeaua ta WiFi. Rețeaua trebuie să fie pe 2.4 GHz!

#include <ESP8266WiFi.h>
#include <ESP8266mDNS.h>
#include <ESP8266WebServer.h>

const char *ssid = "retea";
const char *password = "parola";
const char *dname = "esp8266";

ESP8266WebServer server(80);

Codul include o funcție de conectare la rețeaua WiFi. Această funcție încearcă conectarea, apoi verifică de maxim 50 de ori la fiecare 0,5 secunde dacă s-a reușit conectarea. Returnează true imediat după conectare sau false după 50 * 0.5 = 25 secunde de încercare.

În setup(), setăm pinul D0 ca ieșire, pornim portul serial, încercăm conectarea la WiFi și pornim serverul. În caz de întrerupere a conexiunii, acest cod nu încearcă reconectarea. Acest lucru nu este greu de implementat dacă adăugăm o verificare periodică a prezenței conexiunii în loop(). Reconectarea, cu codul actual, se poate face doar prin resetarea plăcii. Dacă prima încercare de conectare a fost fără succes, se resetează placa automat și se reîncearcă după 1 minut.

void setup() {
  pinMode(D0, OUTPUT);
  Serial.begin(115200);

  if (!connectToWifi()) {
    delay(60000);
    ESP.restart();
  }

  server.on("/", afisareSite);
  server.begin();
  Serial.println("Serverul a fost pornit");
}

Funcția loop() conține două rânduri de cod, pentru procesarea solicitărilor către server și actualizarea multicast DNS.

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

De interes este funcția afisareSite(), care procesează parametrii solicitării efectuate de clientul conectat la server și acționează LED-ul. Am ales să trimit starea LED-ului prin metoda HTTP GET. Mai exact, un parametru este adăugat la sfârșitul adresei URL în forma ?led=on. Aici led este parametrul și on este valoarea lui. Trimiterea acestui parametru se poate face printr-un formular HTML sau prin simple link-uri. Modul de compunere a unei pagini web nu reprezintă subiectul acestui articol. Pe scurt, formularul HTML care trimite acest parametru ar putea arăta cam așa:

<form action="/" method="get" >
 <p>LED:
  <input type="submit" value="on" name="led">
 </p>
</form>

Primul lucru pe care îl face funcția afisareSite() este să verifice starea LED-ului și parametrii trimiși de client. Parametrii pot fi obținuți prin metodele ESP8266WebServer.hasArg() și ESP8266WebServer.arg(name). Cea din urmă procedură returnează atât șiruri de caractere dar și numere, deci poți trimite valori numerice către server pe cale le obții prin această metodă.

  int ledStatus = digitalRead(D0);

  if (server.hasArg("led")) {
    String status = server.arg("led");
    if (status == "on") {
      digitalWrite(D0, HIGH);
      ledStatus = 1;
    }
    else if (status == "off") {
      digitalWrite(D0, LOW);
      ledStatus = 0;
    }
  }

Apoi, conținutul paginii web este pus într-o variabilă de tip String. Starea actuală a LED-ului și numele butonului sunt setate în funcție de ledStatus. Am adăugat și un favicon paginii web (acea pictogramă care apare în fila din browser lângă numele site-ului). În loc să folosesc un fișier, am pus imaginea în format base64, direct în HTML. Poți genera favicon-uri aici, apoi le convertești în base64.

  String content = "<!DOCTYPE html><html>";
  content += "<head><title>ESP8266 Test Server</title>";
  content += "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">";
  content += "<link rel=\"shortcut icon\" href=\"data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAA/4QAAAAA/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAARAiIgEQAiAQASAAEAEgAhABAgAQASACARAAIBEQIiAQASACAQACABABIAIAEAAgARACIAABAAIAAAAAAAAAAAAAAAAAAAAAEREAERAAEAAQAAAAAQAQABAAAAABABAAERAAARAAERAQAAAQAAAQARAAABAAABABEREAAREAERCQmQAAZ2YAAGtmAACdEQAAZrsAAGbdAACZ7gAA//8AAP//AAAMdwAAf7cAAH+3AAAecQAAffYAAH32AAAOMQAA\" />";
  content += "</head><body>";
  content += "<h1>Server ESP8266</h1><form action=\"/\" method=\"get\"><p>Stare LED conectat la pinul <b>D0</b>:";

  if (ledStatus)
    content += " <i>Pornit</i>";
  else
    content += " <i>Oprit</i>";

  content += "</p>";

  if (ledStatus) content += "<input type=\"submit\" value=\"off\" name=\"led\">";
  else content += "<input type=\"submit\" value=\"on\" name=\"led\">";
  
  content += "</form>";
  content += "</body></html>";

După completarea string-ului, este trimis clientului.

  server.send(200, "text/html", content);

Iată cum, în numai 100 de linii de cod ai realizat un server web care poate controla un LED. De acum înainte, LED-ul poate fi transformat în modul cu releu, iar în loc să citești starea unui pin, poți citi un senzor.

Codul sursă complet îl găsești pe GitHub. După încărcarea codului în placă, accesează monitorul serial pe baudrate 115200 pentru a vedea adresa IP locală. Dacă deja s-a realizat conexiunea când ai deschis Serial Monitor, resetează placa pentru a reafișa IP-ul.

Log pornire ESP8266

Introdu în bara de adrese a browser-ului adresa IP a plăcii sau accesează http://esp8266.local pentru a accesa pagina web. Poți schimba această adresă modificând variabila dname de la începutul codului.