Untitled

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <title>Dashboard MQTT</title>
    <link rel="shortcut icon" type="image/x-icon" href="Imagenes/iot.png">
    <script src='https://api.cloudmqtt.com/js/mqttws31.js' type='text/javascript'>
    </script>
    <!-- https://api.cloudmqtt.com/sso/js/mqttws31.js -->
  </head>

  <body>

    <header>

    </header>
    <br/>
    <h1>WEBSOCKET</h1><br />

        <div class="table"><form action="" method="post">
                <h2>Ingrese los datos</h2>
        <label for="host">Host:</label>
        <input type="text" id="host" name="host"><br/>
        <label for="puerto">Puerto:</label>
        <input type="text" id="puerto" name="puerto"><br/>
        <input type="submit" onclick="leerdatosformulario()" value="ENVIAR">
        </form>
</div>
<script>

      function leerdatosformulario(){
        ls = document.getElementById("host").value;
        lss = document.getElementById("puerto").value;
      }

      usuario = 'Prueba';
      contrasena = '123';
      puerto = 33848;
      host = 'm12.cloudmqtt.com';

      function onConnect() {
        // Once a connection has been made, make a subscription and send a message.
        console.log("Conexion realizada con el servidor");
        client.subscribe("#");
        console.log("Conectado como " + usuario + " a través del puerto 8083");
      }

      // 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) {

        var topico = document.getElementsByName("topico-pub")[0].value;
        if (message.destinationName == '/' + usuario + '/' + topico) { //acá coloco el topic
            document.getElementById("mensaje-pub").textContent = message.payloadString;
            console.log("Mensaje recibido:"+ '/' + usuario + '/' + topico + " : " + 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 33848";
        errDiv.style.display = "block";
      }

      var clientId = "ws" + Math.random();
      // Create a client instance
      var client = new Paho.MQTT.Client(host, puerto, 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>