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>
maestro realmente me quede sorprendido por la explicacion clara y sencilla. Seguí los pasos y lo probé y si fuciona. Entiendo que arduino publica los datos de temperatura y de los botones hacia el broker pero me gustaria verlo desde un navegador en forma externa no solo desde el navegador en forma local con este mismo esquema. He visto el tutorial #9 pero yo no deseo almacenar en una base de datos sino interactuar desde fuera de mi casa con este mismo esquema que es la base por supuesto mejorar los graficos como el tutorial #16. por favor me podrias ayudar entiendo poco de programacion. mi correo es freedbg32@gmail.com. Gracias por ser tan explicito hasta un novato como yo lo entendió. :)
ResponderEliminarHola de nuevo. subí este codigo html a un pagina web que he creado de practica http://tunc2mk.260mb.org pero no interactua con cloudmqtt solo en mi navegador de mi pc si hace todos los cambios, que crees que le falte? podrias ayudarme por favor? o tal vez hacer un tutorial al respecto? seria muy interesante. De nuevo gracias por compartir tus conocimientos. gracias a tu canal he entendido cosas que no hubiera entendido asi no mas y me anime a hacer pequeños proyectos. sigue adelante.
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarhola estimado como hago para conectar 20 placas arduino?
ResponderEliminarha cambiado el sitio de la api
ResponderEliminarahora esta en https://api.cloudmqtt.com/js/mqttws31.js
sacaron sso
tambien es necesario cambiar "new Paho.MQTT.Client" por "new Paho.Client" y "new Paho.MQTT.Message" por "new Paho.Message"
ResponderEliminar