Comunicar una página web con AsyncWebsockets en el ESP8266


Seguimos con los tutoriales del ESP8266 viendo cómo emplear Websockets asíncronos para comunicarnos desde una página web servida.

En la entrada anterior vimos cómo emplear Websockets como una alternativa a las peticiones Ajax para proyectos que requieren bajo lag o comunicación del servidor al cliente.

Pues bien, igual que vimos como configurar un servidor, y después vimos cómo configurar un servidor asíncrono con la librería AsyncWebServer, la misma librería incorpora un plugin para Async Websockets.

Las ventajas de los Async Websockets respecto a los Websockets "normales" implementados en las librerías del ESP8266 es que podemos atender varios clientes sin necesidad de emplear una nueva dirección o puerto.

Anuncio:

Por tanto, podríamos considerarlos "una versión mejorada" de la implementación de Websockets en el ESP8266. Por lo demás, los fundamentos de funcionamiento son iguales.

Vamos a ver su uso con el mismo ejemplo que vimos con Ajax y Websockets, es decir, actualizar un contador con el valor de 'millis()' recibido del servidor. Que, nuevamente, en realidad son 2 ejemplos.

    • Ejemplo 1: El cliente enviará datos periódicamente, y recibe 'millis()' como respuesta
    • Ejemplo 2: El servidor usa un broadcast para informar a los clientes del valor de 'millis()'
El ejemplo 1 está comentado en el código. Tal cuál está, el código ejecuta el ejemplo 2, que emplea broadcast.

Sencillo, pero suficiente para ilustrar la conexión sin "enmascararlo" con elementos adicionales. ¡Vamos al trabajo!

Por un lado, nuestro programa principal es básicamente idéntico a los Websockets "normales" simplemente adaptando el nombre de los métodos a la librería.

Sólo destacar el uso de la función de broadcast, que usamos en el ejemplo 2 (igual que hicimos en la entrada anterior).

Por otro lado, nuestro fichero 'server.hpp' queda de la siguiente forma.

Que es idéntico al caso de Websockets "normales" solo que estamos usando el propio puerto 80 para servir la página web y enviar el Websockets, en lugar de usar el puerto 81.

Respecto a nuestro fichero con funciones reusables para Websockets pasa a llamarse 'ESP8266_Utils_AWS.hpp' y sí ha cambiado considerablemente respecto al anterior, quedando,

Afortunadamente, encapsulando esta parte del código en este fichero no tendremos que lidiar frecuentemente con él. Básicamente, recibimos los eventos de Async Websocket y, cuando recibimos un paquete entero, lanzamos la función 'ProcessRequest()'

Finalmente, tenemos el fichero 'Websocket.hpp', donde definimos la lógica de nuestro "API" para Websockets.

En este ejemplo sencillo, únicamente enviamos el valor de 'Millis()' codificado como texto cada vez que recibimos una petición. Solo la usaremos en el Ejemplo 1 (pero no hace falta comentarla porque ni siquiera la llamamos desde la web).  

Por otro lado, el fichero 'index.html' que servimos al cliente queda exactamente igual a la entrada anterior.

Lo que sí se modifica, pero levemente, es el Javascript 'main.js', siendo la única modificación que lanzamos el websocket contra el propio puerto 80, en lugar del 81 que hicimos en la entrada anterior.

Recordamos que el código, tal cual está, corresponde con el ejemplo 2, en el que el servidor hace un broadcast a todos los clientes.

Mientras que el código comentado es para el ejemplo 1, en el que el cliente realiza periódicamente peticiones al servidor, y recibe el contenido de 'millis()' como respuesta.

Si ahora cargamos la página web veremos nuestro contador incrementándose (y es la última vez, os lo prometo) correctamente y a toda velocidad.

Y hasta aqui la entrada sobre Async Websockets en el ESP8266, con lo que hemos terminado de presentar las formas más habituales de comunicación entre frontend y backend.

En el próximo tutorial del ESP8266 haremos una pequeña pausa para presentar la comunicación mediante UDP. Y después volveremos a la comunicación cliente servidor ampliando lo que hemos visto sobre Ajax y Websockets con ficheros Json y API Rest. ¡Hasta pronto!

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 Librería de Arduino Easing
Next Cómo instalar MariaDB en Raspberry Pi
1000