En la tercera parte de los tutoriales de IOT usando MQTT en
ESP8266, explico cómo hacer nuestros propios dashboards (tableros), valiéndonos
de HTML y JavaScript; lo que nos permite controlar y monitorear nuestros
dispositivos mediante una aplicación web, ya sea desde una PC, tablet,
smartphone, etc. Si bien el ejemplo es muy sencillo y carece de diseño, es
perfectamente funcional, ya que le idea del video es que se entiendan los
conceptos y en futuros videos contemplaremos el diseño, la seguridad, etc.
tutorial13.html:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Tutorial 13</title> <script src='mqttws31.js' type='text/javascript'></script> <!-- https://api.cloudmqtt.com/sso/js/mqttws31.js --> </head> <body> <div> <h2>Suscripciones:</h2> </div> <div> <a>Temperatura: </a> <a id ="temperatura">-</a> </div> <div> <a>Pulsador: </a> <a id ="pulsador">-</a> </div> <div> <a>Salida Digital: </a> <a id ="salidaDigital">-</a> </div> <div> <a>Salida Analógica: </a> <a id ="salidaAnalogica">-</a> </div> <div> <h2>Publicaciones:</h2> </div> <div> <a>Salida Digital: </a> <button type='button' onclick='OnOff("ON")'>ON</button> <button type='button' onclick='OnOff("OFF")'>OFF</button> </div> <div> <a>Salida Analógica: </a> <input type="range" id="myRange" min="0" max="1023" onmouseup="enviarSalidaAnalogica()"> </div> <script> usuario = 'placa1'; contrasena = '12345678'; function OnOff(dato){ message = new Paho.MQTT.Message(dato); message.destinationName = '/' + usuario + '/salidaDigital' client.send(message); }; function enviarSalidaAnalogica(){ var dato = document.getElementById("myRange").value; message = new Paho.MQTT.Message(dato); message.destinationName = '/' + usuario + '/salidaAnalogica' client.send(message); }; // called when the client connects function onConnect() { // Once a connection has been made, make a subscription and send a message. console.log("onConnect"); client.subscribe("#"); } // called when the client loses its connection function onConnectionLost(responseObject) { if (responseObject.errorCode !== 0) { console.log("onConnectionLost:", responseObject.errorMessage); setTimeout(function() { client.connect() }, 5000); } } // called when a message arrives function onMessageArrived(message) { if (message.destinationName == '/' + usuario + '/' + 'temperatura') { //acá coloco el topic document.getElementById("temperatura").textContent = message.payloadString + " ºC"; } if (message.destinationName == '/' + usuario + '/' + 'pulsador') { //acá coloco el topic document.getElementById("pulsador").textContent = message.payloadString; } if (message.destinationName == '/' + usuario + '/' + 'salidaDigital') { //acá coloco el topic document.getElementById("salidaDigital").textContent = message.payloadString; } if (message.destinationName == '/' + usuario + '/' + 'salidaAnalogica') { //acá coloco el topic document.getElementById("salidaAnalogica").textContent = message.payloadString; } } function onFailure(invocationContext, errorCode, errorMessage) { var errDiv = document.getElementById("error"); errDiv.textContent = "Could not connect to WebSocket server, most likely you're behind a firewall that doesn't allow outgoing connections to port 39627"; errDiv.style.display = "block"; } var clientId = "ws" + Math.random(); // Create a client instance var client = new Paho.MQTT.Client("m11.cloudmqtt.com", 30722, clientId); // set callback handlers client.onConnectionLost = onConnectionLost; client.onMessageArrived = onMessageArrived; // connect the client client.connect({ useSSL: true, userName: usuario, password: contrasena, onSuccess: onConnect, onFailure: onFailure }); </script> </body> </html>