This reposity includes the basic information to mount a web server using **Node-RED** as a Dashboard and also working as a MQTT server using **Mosquitto**.
This reposity includes the basic information to mount a server using **Node-RED** as a Dashboard and also working as a MQTT server using **Mosquitto**. The MQTT server is tested with a ESP32 client to publish random numbers every two seconds.
*Again, thanks to Andrés Perez for the first version.*
The general scheme is shown below, the complete environment requires a client, mqtt server or broker, and a mqtt client that works like a user interface (dashboard).
# Servidor Web y comunicación con ESP32 por medio de un broker MQTT
The basic communication scheme could work like:
En este repositorio se presenta el proceso para montar un servidor web haciendo uso de Node-RED, y llevar a cabo su conexion con una tarjeta ESP32, haciendo uso del protocolo de comunicacion MQTT.
1. The ESP32 starts the communication chain by sending a text message to the broker, the broker can be public or local.
## Comunicacion
2. Depending on the code, the sending message can be replicated to all the connected clients in the *topic*.
1. La comunicacion comienza en el ESP32, el cual se encarga de enviar un texto al broker MQTT por medio de una conexion de red local.
3. Finally, a web server based on *Node-RED* will read the publicated data in the broker to be displayed in the *UI*.
2. El broker MQTT recibe el valor y permite que otros clientes lo lean a traves de el.
3. Un servidor web ejecutado por Node-RED lee el dato recibido por el broker y ejecuta una accion de acuerdo al dato leido, en este caso esa accion es mostrar el texto en un sitio web.
Este proyecto trabaja en conjunto con un programa creado para el esp32, el cual se encuentra en el siguiente repostorio:
The client code to test the environment is hosted in the [mqtt-client-esp32-v2](https://github.com/ss-jade/mqtt-client-esp32-v2).
*Thanks to Andrés Perez for the first version.*
# MQTT Server
@ -94,36 +93,20 @@ click on *Add new mqtt-brocker*, then, in the *Connection* tab: set *Name* to Ra
Finally, set the topic to `data/esp32` and the output to `a String` in the mqtt properties' node:
Next, click on the `Deploy` button to check if the process can connect to the Broker:
Next, connect the blocks as shows in the image and click on the `Deploy` button to check if the process can connect to the Broker:
## Creating the UI
Next, make double-click on the `dashboard-text` node and add a new `Group` by click on the pencil icon:
how to connect???
In the *Node-RED* App press the `import`button at the right-lower menu and upload the `flows.json` file in this repository.
Damos clic en el nodo de mqtt in (el morado con el texto prueba/xd), se desplegara un menu con las propiedades del nodo.
Damos clic en el lapiz, el cual nos desplegara un menu con la configuracion, en el apartado de server tecleamos la direccion de nuestro server mosquitto
Una vez configurado, corremos el proceso con boton **Deploy**, en caso de haber configurado correctamente el nodo mqtt, debajo de este habra un mensaje con el texto **connected**
Como se puede apreciar, uno de los nodos es una salida de insterfaz de usuario de tipo texto. Para acceder a ella nos dirijimos al navegador y escribimos la siguiente direccion: **localhost:1880/ui**
En esta interfaz se reciben los datos enviados por otros clientes al servidor mqtt
set the name *Project*, and add also a new `Dashboard tab`, do not change the default names:
## Recepcion de datos en DASHBOARD
Al entrar a la pagina del dashboard vemos como node-red recibe el dato y lo muestra en la interfaz de usuario
once the parameters have been configured click the add button twice; for the tabs and for the node properties. Next, click on the `Deploy` button and visit the `hostname-or-ip/ui` to see the output generated by the MQTT client:
**Note: you can also check the generated data on the Arduino IDE serial tools.**
