Panel web con React y MQTT sobre AWS IoT Core
Publicado originalmente en iot.gripe , como parte 10 de la serie "Domótica con ESP32 y AWS desde cero". Un panel web que muestra cada luz con un interruptor, y que se actualiza al instante cuando la luz cambia, necesita una conexión en tiempo real. Con AWS IoT Core, el navegador puede conectarse directamente al broker por MQTT sobre WebSocket , sin ningún servidor en medio. En esta parte…
La publicación "Panel web con React y MQTT sobre AWS IoT Core" describe cómo crear una interfaz web con React que se conecta a AWS IoT Core utilizando MQTT sobre WebSocket para obtener actualizaciones en tiempo real de los estados de las luces. Para lograrlo, se sigue un proceso de dos pasos:
1. Obtención de credenciales temporales a través de AWS Cognito. Cuando el usuario se loguea con el User Pool, la Identity Pool cambia el token del usuario por credenciales temporales de AWS, que luego se utilizan para firmar la URL del WebSocket. Esto permite que el navegador se conecte directamente a la instancia MQTT sin necesidad de un certificado X.509 como el ESP32.
2. Firma de la URL del WebSocket utilizando AWS SignatureV4. En lugar de incluir el token de sesión en la firma, se agrega después de la firma, lo que evita que el WebSocket se cierre inmediatamente con un código de error (1006). La URL firmada es luego utilizada para crear una conexión MQTT con el SDK de AWS.
En el código, se hace uso de las bibliotecas mqtt.js para la interacción MQTT, aws-sdk para obtener las credenciales y la firma, y Vite + TypeScript para el desarrollo del front-end. La aplicación React se suscribe a los tópicos reservados del Device Shadow de AWS IoT Core para recibir actualizaciones en tiempo real del estado de la luz.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
