simonmorley/gist:b0f8f99257a8a5c1e8e5529b0769c798

## gistfile1.html
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Mosquitto Websockets</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="config.js" type="text/javascript"></script>

    <script type="text/javascript">
      var mqtt;
      var reconnectTimeout = 2000;

      function MQTTconnect() {
        mqtt = new Paho.MQTT.Client(
            host,
            port,
            "web_" + parseInt(Math.random() * 100,
              10));
        var options = {
          timeout: 3,
          useSSL: useTLS,
          cleanSession: cleansession,
          onSuccess: onConnect,
          onFailure: function (message) {
            $('#status').val("Connection failed: " + message.errorMessage + "Retrying");
            setTimeout(MQTTconnect, reconnectTimeout);
          }
        };

        mqtt.onConnectionLost = onConnectionLost;
        mqtt.onMessageArrived = onMessageArrived;

        if (username != null) {
          options.userName = username;
          options.password = password;
        }
        console.log("Host="+ host + ", port=" + port + " TLS = " + useTLS + " username=" + username + " password=" + password);
        mqtt.connect(options);
      }

function onConnect() {
  $('#status').val('Connected to ' + host + ':' + port);
  // Connection succeeded; subscribe to our topic
  mqtt.subscribe(topic, {qos: 0});
  $('#topic').val(topic);
}

function onConnectionLost(response) {
  setTimeout(MQTTconnect, reconnectTimeout);
  $('#status').val("connection lost: " + responseObject.errorMessage + ". Reconnecting");
};

function onMessageArrived(message) {
  var topic = message.destinationName;
  var payload = message.payloadString;
  p = JSON.parse(payload)
  console.log(p)

  // console.log(p)
  var msg;
  if (p.report && p.report.delivered) {
    msg = 'Message delivered';
  } else if (p.report && p.report.payload) {
    msg = p.report.payload
  } else if (p.report && p.report.online === "1")  {
    $('#status').html('Online');
  } else if (p.report && p.report.online === "0")  {
    $('#status').html('Offline');
  }

  if (msg) {
    $('#ws').append('<li>' + msg + '</li>');
  }
};


$(document).ready(function() {
  MQTTconnect();

  $("#target").submit(function( event ) {

    var data = $("#text").val();

    var sub = "ThimacEjomGWegukEJNNTHmliXvwvrfo/JCYVlGzCZfObUrpnVdLydpBISCYRdBwI/88-DC-96-13-02-E8";
    values = { cmd: data }
    values = JSON.stringify(values);

    message = new Paho.MQTT.Message(values);
    message.destinationName = sub;

    $('#ws').append('<li>' + data + '</li>');
    mqtt.send(message);
    event.preventDefault();
  });

});

    </script>
  </head>
  <body>
    <h1>Mosquitto Websockets</h1>
    <div>
      <h2 id="status"></h2>
      <div>Subscribed to <input type='text' id='topic' disabled />
        Status: <input type='text' id='status' size="80" disabled /></div>

      <ul id='ws' style="font-family: 'Courier New', Courier, monospace; white-space: pre-wrap;"></ul>
      <form id="target">
        <input type="text" id="text" value="uptime">
        <input type="submit" value="Go">
      </form>
    </div>
  </body>
</html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>Mosquitto Websockets</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="config.js" type="text/javascript"></script>

	<script type="text/javascript">
	var mqtt;
	var reconnectTimeout = 2000;

	function MQTTconnect() {
	mqtt = new Paho.MQTT.Client(
	host,
	port,
	"web_" + parseInt(Math.random() * 100,
	10));
	var options = {
	timeout: 3,
	useSSL: useTLS,
	cleanSession: cleansession,
	onSuccess: onConnect,
	onFailure: function (message) {
	$('#status').val("Connection failed: " + message.errorMessage + "Retrying");
	setTimeout(MQTTconnect, reconnectTimeout);
	}
	};

	mqtt.onConnectionLost = onConnectionLost;
	mqtt.onMessageArrived = onMessageArrived;

	if (username != null) {
	options.userName = username;
	options.password = password;
	}
	console.log("Host="+ host + ", port=" + port + " TLS = " + useTLS + " username=" + username + " password=" + password);
	mqtt.connect(options);
	}

	function onConnect() {
	$('#status').val('Connected to ' + host + ':' + port);
	// Connection succeeded; subscribe to our topic
	mqtt.subscribe(topic, {qos: 0});
	$('#topic').val(topic);
	}

	function onConnectionLost(response) {
	setTimeout(MQTTconnect, reconnectTimeout);
	$('#status').val("connection lost: " + responseObject.errorMessage + ". Reconnecting");
	};

	function onMessageArrived(message) {
	var topic = message.destinationName;
	var payload = message.payloadString;
	p = JSON.parse(payload)
	console.log(p)

	// console.log(p)
	var msg;
	if (p.report && p.report.delivered) {
	msg = 'Message delivered';
	} else if (p.report && p.report.payload) {
	msg = p.report.payload
	} else if (p.report && p.report.online === "1") {
	$('#status').html('Online');
	} else if (p.report && p.report.online === "0") {
	$('#status').html('Offline');
	}

	if (msg) {
	$('#ws').append('<li>' + msg + '</li>');
	}
	};


	$(document).ready(function() {
	MQTTconnect();

	$("#target").submit(function( event ) {

	var data = $("#text").val();

	var sub = "ThimacEjomGWegukEJNNTHmliXvwvrfo/JCYVlGzCZfObUrpnVdLydpBISCYRdBwI/88-DC-96-13-02-E8";
	values = { cmd: data }
	values = JSON.stringify(values);

	message = new Paho.MQTT.Message(values);
	message.destinationName = sub;

	$('#ws').append('<li>' + data + '</li>');
	mqtt.send(message);
	event.preventDefault();
	});

	});

	</script>
	</head>
	<body>
	<h1>Mosquitto Websockets</h1>
	<div>
	<h2 id="status"></h2>
	<div>Subscribed to <input type='text' id='topic' disabled />
	Status: <input type='text' id='status' size="80" disabled /></div>

	<ul id='ws' style="font-family: 'Courier New', Courier, monospace; white-space: pre-wrap;"></ul>
	<form id="target">
	<input type="text" id="text" value="uptime">
	<input type="submit" value="Go">
	</form>
	</div>
	</body>
	</html>