sábado, 5 de agosto de 2017

Tutorial #14 ESP8266 (Parte4) – Login en tu Dashboard MQTT

Este es el cuarto tutorial de IOT usando MQTT en un ESP8266; es un complemento del número 13, en el que les mostré cómo hacer sus propios dashboards (tableros).  En este video muestro cómo hacer un login previo de exactamente el mismo ejemplo anterior. En el tutorial muestro como hacer la aplicación web usando PHP (además de HTML y JavaScript), tanto en un servidor local como en un servidor externo.



index.html:

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Login - Tutorial 14</title>
</head>
<body>
  <form action="login.php" method="POST">
    <input type="text" name="user" placeholder="usuario">
    <input type="password" name="pass" placeholder="contraseña">
    <input type="submit" name="Enviar" >
  </form>
</body>
</body>
</html>

login.php:

<?php

$user = $_POST ['user'];
$pass = $_POST ['pass'];

require_once ('tutorial14A.html');
echo "      
  usuario = '$user';
  contrasena = '$pass';
";
require_once ('tutorial14B.html');

?>

tutorial14A.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Tutorial 14</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>

tutorial14B.html:


      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>

4 comentarios:

  1. Alejandro, por lo que veo el camino es MQTT?, Sí lo comparo con mysql/PHP, Firebase, etc...
    Saludos Ángel

    ResponderEliminar
    Respuestas
    1. El protocolo MQTT está pensado para la comunicación máquina a máquina, se pasan menos datos que usando HTTP y usa mensajes del tipo publicación suscripción/publicación; todo esto lo hace ideal para ser aplicado en internet de las cosas. En próximos videos voy a explicar como integrar MySQL con MQTT.

      Eliminar
    2. Gracias Ale.. a la espera de un nuevo súper tutorial...

      Entonces entiendo que cloudMQTT monte deja registró..

      Eliminar
    3. Lamentablemente CloudMQTT no deja registro, o si los deja, nosotros no tenemos acceso, esa solución sería la más profesional, se puede hacer montando nuestro propio Broker MQTT en forma local o en la nube (pero eso lo dejo para mucho más adelante), o buscando algún servicio que lo permita (no conozco ninguno). Pero eso no nos impide poder guardar los datos que queremos en una base de datos. Yo lo resuelvo con un script en Python que se conecta como un cliente más, y ese script se encarga de guardar en una base de datos todos los datos a los que se suscribe. Tené un poco de paciencia que no falta mucho para que lo explique. Saludos.

      Eliminar