como-servir-contenido-dinamico-desde-el-esp8266

Cómo servir contenido dinámico desde el ESP8266 o ESP32

Continuamos con los tutoriales del ESP8266 y el ESP32 viendo un servidor que devuelva información que cambie dinámicamente en cada petición.

Haremos referencia al ESP8266, pero el mismo código es compatible para el ESP32, ajustando el nombre de las librerías. Al final tenéis el código tanto para el ESP8266 como para el ESP32.

Anteriormente vimos cómo montar un servidor básico con un ESP8266, y en la entrada anterior vimos cómo distinguir entre tipos de llamadas y recibir argumentos.

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 <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

bool ledStatus = false;  // Variable de ejemplo

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

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

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

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.

ESP8266WebServer 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");
}

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 que lo aprendáis muy bien porque, junto con la entrada anterior, constituye la base para montarnos 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.

En la próxima entrada veremos cómo mejorar esto sirviendo el contenido desde la memoria Flash, y en la próxima veremos cómo emplear los sistemas de ficheros disponibles (SPIFFS y LittleFS) para servir contenidos estáticos. ¡Hasta pronto!

Descarga el código

Todo el código de esta entrada está disponible para su descarga en Github.

github-full

Versión para el ESP8266: https://github.com/luisllamasbinaburo/ESP8266-Examples

Versión para el ESP32: https://github.com/luisllamasbinaburo/ESP32-Examples