Web Server

Realizzare un Web Server con ESP32 per accedere da locale con DNS personalizzato

Come visto già per ESP8266, adopereremo una ESP32 per realizzare un Web Server per visualizzare su browser informazioni che possiamo rilevare da un sensore o altre informazioni utili, facilitandoci con un DNS personalizzato. Per questo tutorial adopereremo solamente la ESP32 TTGO T-Display con integrato un display con chip ST7789V, già vista in precedenza[LINK]. Tale guida sarà attuabile su qualsiasi dev-board ESP32.

Codice

Iniziamo la guida rammentandovi che per il momento non adopereremo sensori o attuatori, ma ci limiteremo a predisporre la dev-board al generico funzionamento. Pertanto, per il Web Server ci limiteremo a scrivere il codice e caricarlo sulla ESP32. Se volete acquistare anche voi la ESP32 TTGO, eccovi i link utili:



Per la configurazione del Web Server iniziamo ad includere le librerie necessaria al suo funzionamento. La libreria Wifi.h serve per attivare la connessione omonima della ESP32, mentre le librerie WiFiClient.h e la WebServer.h saranno utili per l’accesso dei client e la configurazione del lato server. Infine, la libreria ESPmDNS.h ci aiuterà a creare un DNS personalizzato, più semplice da ricordare di un IP. Potete scaricare l’intero sketch a questo LINK.


#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include <ESPmDNS.h>

Passiamo poi alla connessione alla rete WiFi, dichiarando il nome della rete WiFi e la relativa password, la porta 80 per la connessione a protocollo HTTP e creiamo anche una stringa che adopereremo per il nostro codice d’esempio.


const char* SSID = "nomerete";
const char* PASSWORD = "passwordrete";

WebServer server(80);

String stringa = "Hello World!";

Passando al VOID SETUP, avviamo il monitor seriale e la connessione alla rete WiFi, impostando la modalità STATION, attenendo la connessione e stampando su monitor seriale l’Indirizzo IP assegnatoci quando la ESP32 si sarà connessa.


Serial.begin(9600);
WiFi.mode(WIFI_STA);
WiFi.begin(SSID, PASSWORD);
Serial.println("");

while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("Connettiti a ");
Serial.println(SSID);
Serial.print("IP address: ");
Serial.println(WiFi.localIP());

Creiamo ora il DNS per il nostro Web Server, chiamandolo semplicemente esp32 e stampando su monitor seriale l’indirizzo completo a cui collegarci, nel nostro esempio http://esp32.local/


if (MDNS.begin("esp32")) {
Serial.print("ESP32 online: ");
Serial.println("http://esp32.local/");
}

Il VOID SETUP si conclude con la chiamata del WebServer alla funzione handleRoot, che visioneremo a breve, e con l’avvio del WebServer per ricevere le richieste da parte dei Client che si collegheranno.


server.on("/", handleRoot);
server.begin();

Passiamo a questo punto al VOID LOOP ci limiteremo a controllare le richieste al Web Server, permettendo ad ogni Client di accedere tramite browser.


server.handleClient();

Concludiamo analizzando la funzione handleRoot, menzionata all’interno del VOID SETUP. Essa è fondamentale per l’utilizzo del WebServer. Grazie ad essa possiamo stampare un messaggio su browser o decidere di mostrare i dati prelevati dai sensori. Procediamo prima stampando un semplice testo non formattato. Ogni volta che entreremo all’indirizzo creato pocanzi, il browser ci mostrerà la scritta Hello World senza alcuna formattazione (text/plain).


void handleRoot() {
server.send(200, "text/plain", "Hello World");
}



Invece, nel caso di un testo formattato, basta sostituire text/plain con text/html e adoperare anche conoscenze minimali in HTML per scrivere un testo formattato. Noterete che abbiamo adoperato non solo il doppio apice per il testo, ma che abbiamo anche aggiunto all’interno una stringa chiamata appunto stringa. In contenuto di questa stringa possiamo personalizzarlo o associarlo a dei valori prelevati da un sensore. Così facendo potremo consultare dal browser il nostro sistema che aggiorna costantemente i valori rilevati.


void handleRoot() {
server.send(200, "text/html","<h1>ESP32:" + stringa + "</h1>");
}