Cómo servir contenido dinámico desde ESP32

3 min
Iniciación

Servir contenido dinámico desde una placa ESP consiste en generar una respuesta distinta en función del estado del dispositivo o de la petición recibida.

El ejemplo está orientado a ESP32. En muchos casos también puede adaptarse a ESP8266 cambiando librerías y algunos detalles de pines.

Esto es justo lo que necesitamos cuando queremos mostrar el valor de un sensor, el estado de un relé, una configuración actual o cualquier información que no puede quedar escrita fija en un fichero HTML.

Hasta ahora, estábamos devolviendo un contenido “más o menos” estático, es decir, que siempre el mismo. Pero en muchas ocasiones vamos a querer devolver contenidos que varían, como por ejemplo el estado de una variable, o una entrada analógica o digital, la medición de un sensor.

En un proyecto real normalmente serviremos un cierto contenido estático (típicamente html) y este se actualizará mediante algún mecanismo (Ajax, Websocket) haciendo peticiones a ciertos Endpoints. Veremos todo esto en su momento.

En esta entrada vamos a aprender a servir contenido que varía dinámicamente. Para ello, partimos del programa de servidor del ejemplo anterior

Aqui únicamente hemos añadido una variable ‘ledStatus’ que representa una variable cualquier que quisiéramos devolver

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

bool ledStatus = false;  // Variable de ejemplo

#include "config.h"  // Sustituir con datos de vuestra red
#include "Server.hpp"
#include "ESP32_Utils.hpp"

void setup(void) 
{
   Serial.begin(115200);

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

Copied!

Por su parte, en el fichero ‘Server.hpp’ hemos definido un único routeo desde la raíz ’/’. En la respuesta generamos un String que contiene el texto que queremos. En este ejemplo, únicamente devolvemos ‘LED: ON’ o ‘LED: OFF’, en función del estado de la variable.

WebServer server(80);

void handleRoot() {
   String response = "LED: ";
   response.concat(ledStatus ? "OFF" : "ON");
  
   server.send(200, "text/plain", response);
}

void handleNotFound() {
  server.send(404, "text/plain", "Not found");
}

void InitServer()
{
   server.on("/", handleRoot);
   server.onNotFound(handleNotFound);
   server.begin();
   Serial.println("HTTP server started");
}

Copied!

Resultado

Si ejecutamos el código veremos que, efectivamente, estamos devolviendo el contenido dinámico correctamente. ¡Así de fácil!

esp8266-contenido-dinamico

Por supuesto, este es un ejemplo muy sencillo. Pero conviene entenderlo bien porque constituye la base para montar nuestro propio API.

El principal problema de esta forma de proceder es que supone una carga para el procesador porque tiene que generar la información en cada petición, y que el tratamiento de los String de la respuesta puede llegar a ocupar mucha memoria si esta es larga.

Con esto ya podemos generar respuestas dinámicas desde el dispositivo. Para contenido grande o estático, en cambio, conviene usar la memoria Flash o un sistema de ficheros como SPIFFS o LittleFS.