Conectar un ESP8266 o ESP32 con una aplicación en VueJS con Vue Native Websockets Deja un comentario
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.
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
#include
#include
#include
#include
#include “config.h” // Sustituir con datos de vuestra red
#include “Websockets.hpp”
#include “Server.hpp”
#include “ESP8266_Utils.hpp”
#include “ESP8266_Utils_AWS.hpp”
void setup(void)
{
Serial.begin(115200);
SPIFFS.begin();
ConnectWiFi_STA();
InitWebSockets();
InitServer();
}
void loop(void)
{
// Ejemplo 2, llamada desde servidor
ws.textAll(GetMillis());
}
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
AsyncWebServer server(80);
void InitServer()
{
server.serveStatic(“/”, SPIFFS, “/”).setDefaultFile(“index.html”);
server.onNotFound([](AsyncWebServerRequest *request) {
request->send(400, “text/plain”, “Not found”);
});
server.begin();
Serial.println(“HTTP server started”);
}
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
AsyncWebSocket ws(“/ws”);
String GetMillis()
{
return String(millis(), DEC);
}
void ProcessRequest(AsyncWebSocketClient * client, String request)
{
String response = GetMillis();
client->text(response);
}
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
charset=“utf-8”>
http-equiv=“x-ua-compatible” content=“ie=edge”>
name=“description” content=“”>
name=“viewport” content=“width=device-width, initial-scale=1”>
id=“app”>
This is a counter {{counter}}
|