Cómo servir una página web con el ESP8266 desde SPIFFS


En esta entrada vamos a ver cómo configurar un servidor Web que sirva contenido estático desde el sistema de ficheros ESP8266 desde el sistema de archivos SPIFFS.

Recordar que llevamos varias entradas dedicadas a hacer un servidor con el ESP8266. Por su parte, en la entrada anterior presentamos el sistema de ficheros SPIFFS.

Por fin nos toca juntar ambas cosas para, ahora sí, empezar a jugar de verdad con este Soc. Y es que, aunque aún nos queda mucho por delante, vamos a empezar a sacar el potenciar y disfrutar del ESP8266.

Desde el SPIFFS podemos servir únicamente contenido estático. Es decir, contenido que no varía entre peticiones. Pero eso no significa, ni mucho menos, que sea un simple fichero de texto. De hecho, muchas web modernas son así.

Anuncio:

Lo que vamos a hacer va a ser servir ficheros (html, css, js) de forma similar a como hacemos en un servidor "convencional". Normalmente, el cliente carga este contenido y el funcionamiento dinámico se consigue mediante el código JavaScript servido, y llamadas al Backend.

Pero bueno, no nos adelantemos. Veremos todo eso en su momento. De momento ¿Cómo empezamos? Pues, en primer lugar, nuestro fichero 'Server.hpp' es similar al que vimos en la entrada anterior, con la salvedad de que hemos añadido una referencia a 'FS.h'.

Por otro lado, hemos modificado el fichero 'Server.hpp' para tener el siguiente contenido.

Veréis que hemos definido un ruteo cuando la dirección no se encuentra. Como no tenemos ningún otro ruteo a un Endpoint, se dará en todos los casos.

En la función de Callback, en primer lugar, comprobamos si existe un fichero en el SPIFFS que coincida con la petición, con la función 'HandleFileRead'. Si no existe, devolvemos un error de 404, not found.

Finalmente, hemos incluido el fichero 'ESP8266_Utils_Server', que contiene la función 'HandleFileRead', y las funciones necesarias para servir el fichero desde el SPIFFS.

Compilamos el código y lo subimos a nuestro ESP8266. Por otro lado, creamos una carpeta llamada 'data' dentro de la carpeta donde tengamos alojados los ficheros anteriores.

En esta carpeta, llamamos un fichero llamado 'index.html' con el siguiente contenido.

Si accedemos desde el navegador al ESP8266 veremos nuestra sencilla (y a la vez que flamante) página web servida desde el SPIFFS del ESP8266. ¡Enhorabuena!

Mientras que en el puerto serie podemos comprobar que efectivamente hemos recibido la petición.

¿Esto ha acabado aquí? No, ni mucho menor ¡Acabamos de empezar! En la próxima entrada veremos cómo mejorar nuestro código sirviendo ficheros comprimidos en Gzip. ¡Esta la próxima entrada!

Descarga el código

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

Si te ha gustado esta entrada y quieres leer más sobre ESP8266 puedes consultar la sección
tutoriales de ESP8266

Anuncio:

Previous Cómo usar el SPIFFS del ESP8266 con el Arduino IDE
Next Cómo servir contenido comprimido en Gzip con ESP8266
1000