deps/rabbitmq_web_mqtt_examples/priv/echo.html

<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <title>RabbitMQ Web MQTT Example</title>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="mqttws31.js" type="text/javascript"></script>
  <style>
      .box {
          width: 440px;
          float: left;
          margin: 0 20px 0 20px;
      }

      .box div, .box input {
          border: 1px solid;
          -moz-border-radius: 4px;
          border-radius: 4px;
          width: 100%;
          padding: 5px;
          margin: 3px 0 10px 0;
      }

      .box div {
          border-color: grey;
          height: 300px;
          overflow: auto;
      }

      div code {
          display: block;
      }

      #first div code {
          -moz-border-radius: 2px;
          border-radius: 2px;
          border: 1px solid #eee;
          margin-bottom: 5px;
      }

      #second div {
          font-size: 0.8em;
      }
  </style>
  <link href="main.css" rel="stylesheet" type="text/css"/>
  </head>
  <body lang="en">
    <h1><a href="index.html">RabbitMQ Web MQTT Examples</a> > Echo Server</h1>

    <div id="first" class="box">
      <h2>Received</h2>
      <div></div>
      <form><input autocomplete="off" value="Type here..."></input></form>
    </div>

    <div id="second" class="box">
      <h2>Logs</h2>
      <div></div>
    </div>

    <script>
        var has_had_focus = false;
        var pipe = function(el_name, send) {
            var div  = $(el_name + ' div');
            var inp  = $(el_name + ' input');
            var form = $(el_name + ' form');

            var print = function(m, p) {
                p = (p === undefined) ? '' : JSON.stringify(p);
                div.append($("<code>").text(m + ' ' + p));
                div.scrollTop(div.scrollTop() + 10000);
            };

            if (send) {
                form.submit(function() {
                    send(inp.val());
                    inp.val('');
                    return false;
                });
            }
            return print;
        };

        var print_first = pipe('#first', function(data) {
            message = new Paho.MQTT.Message(data);
            message.destinationName = "test";
            debug("SEND ON " + message.destinationName + " PAYLOAD " + data);
            client.send(message);
        });

        var debug = pipe('#second');

        var wsbroker = location.hostname;  //mqtt websocket enabled broker
        var wsport = 15675; // port for above

        var client = new Paho.MQTT.Client(wsbroker, wsport, "/ws",
            "myclientid_" + parseInt(Math.random() * 100, 10));

        client.onConnectionLost = function (responseObject) {
            debug("CONNECTION LOST - " + responseObject.errorMessage);
        };

        client.onMessageArrived = function (message) {
            debug("RECEIVE ON " + message.destinationName + " PAYLOAD " + message.payloadString);
            print_first(message.payloadString);
        };

        var options = {
            timeout: 3,
            keepAliveInterval: 30,
            onSuccess: function () {
                debug("CONNECTION SUCCESS");
                client.subscribe("test", {qos: 1});
            },
            onFailure: function (message) {
                debug("CONNECTION FAILURE - " + message.errorMessage);
            }
        };

        if (location.protocol == "https:") {
            options.useSSL = true;
        }

        debug("CONNECT TO " + wsbroker + ":" + wsport);
        client.connect(options);

        $('#first input').focus(function() {
            if (!has_had_focus) {
                has_had_focus = true;
                $(this).val("");
            }
        });
    </script>
  </body>
</html>