conectar un esp8266 o esp32 con una aplicacion en vuejs con vue native websockets 6010be13bf5b8 - Electrogeek

Conectar un ESP8266 o ESP32 con una aplicación en VueJS con Vue Native Websockets Deja un comentario

esp32 vue native websockets - Electrogeek

Continuamos con nuestra serie de entradas destinadas al ESP8266 y al ESP32 viendo cómo conectar una aplicación realizada en VueJS a través de Websockets gracias a Vue Native Websockets.

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.

En la entrada anterior llegamos a uno de nuestros objetivos, que era realizar una aplicación en VueJS y Vuetify, servida desde el ESP8266, y que se comunicara con el backend a través de llamadas Ajax con la librería Axios.

Ahora queremos, básicamente, hacer lo mismo pero a través de Websockets. Lo cual no debería ser demasiado problema porque ya vimos cómo usar Websockets en esta entrada, así como sus ventajas y desventajas y cuando usarlos en nuestro proyecto.

Pero la cosa es ¿Cómo integramos Websockets en nuestra aplicación de VueJS en el frontend? Pues, afortunadamente, no es demasiado difícil gracias a la librería Vue Native Websockets, disponible en https://github.com/nathantsoi/vue-native-websocket.

Anuncio:

Para ilustrarlo, vamos a empezar con un pequeño ejemplo, similar al que vimos en la entrada sobre Websockets. En la siguiente entrada pasaremos a mayores y lo integraremos con el resto del API. Pero de momento, empecemos por lo básico. Así que ¡manos a la obra!.

El código en el ESP8266 es básicamente el mismo que vimos en la entrada sobre AsyncWebSockets, que recordamos tenemos separado en ficheros por funcionalidades para que el código esté más ordenado y sea reusable.

El fichero ‘.ino’ principal simplemente tenemos la inicialización, y en el loop mandamos millis() sin ningún tipo de delay. Esto nos sirve como prueba de estrés y para comprobar la velocidad a la que podemos enviar un valor.

En el fichero “Server.hpp” tenemos el código relativo a la parte de servidor. En este ejemplo sólo necesitamos el código básico necesario para servir la página desde SPIFFS, al que ya estamos acostumbrados.

Mientras que la parte relativa a Websockets la tenemos separada en el fichero “Websockets.hpp”, que tiene la siguiente forma. Como vemos únicamente hemos definido que cuando reciba un mensaje de Websocket, devuelva el valor millis() al emisor original.

Nada nuevo hasta aquí y tampoco especialmente interesante. Los cambios llegan en la parte front donde tendremos que adaptar la aplicación de Vue para que funcione por websockets. En la página Html simplemente hemos añadido la referencia a Vue Native Websocket.

Y la parte más importante está en el fichero JavaScript de la aplicación, donde en el método “mounted” hemos definido una función de callback cuando recibimos un mensaje en el objeto $socket.

Tampoco ha sido tan difícil ¿no? Ahora cogemos todo esto, lo cargamos en nuestro ESP8266, y accedemos a la página web servida. Veremos el contador de la página incrementándose rápidamente a medida que el ESP8266 envía los datos de millis.

esp32 vue native websockets resultado - Electrogeek

Ya tenemos una aplicación en Vue comunicada con el ESP8266 como backend a través de Vue Native Websockets. En la próxima entrada veremos cómo usar todo esto para servir una aplicación en Vue que controle el estado de los GPIO del ESP8266 a través de Json enviado por Websocket. ¡Hasta la próxima! 

Descarga el código

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

github logo - Electrogeek

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

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

Si te ha gustado esta entrada y quieres leer más sobre ESP8266 o el ESP32 puedes consultar la sección tutoriales de ESP8266/32
0 0 vote
Article Rating

Anuncio:

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

0
    0
    Tu Carrito
    Tu carrito esta vacíoVolver a la tienda
    Enviar Whatsapp
    Hola 👋
    ¿En qué podemos ayudarte?