Add test embedded MQTT server page

source/mqtt/test_server.html

@@ -0,0 +1,109 @@
+---
+layout: page
+title: "Test the embedded MQTT server"
+description: "This allows you to test the Home Assistant embedded MQTT server."
+date: 2017-07-29 13:35
+sidebar: false
+comments: false
+sharing: true
+footer: true
+---
+
+<script src="https://unpkg.com/mqtt@2.9.3/dist/mqtt.min.js"></script>
+
+<form id='connection'>
+  <table>
+    <tr>
+      <td>
+        MQTT Websocket Server<br>
+        <small>Default of Home Assistant embedded websocket server is <code>ws://localhost:8080</code>.</small>
+      </td>
+      <td><input name='host' value="ws://localhost:8080" size="30" /></td>
+    </tr>
+    <tr>
+      <td></td>
+      <td><button>Connect</button></td>
+    </tr>
+  </table>
+</form>
+
+<div id='connectionStatus' style='display: none'>
+  Host <span id='host'></span>. Status: <span id='status'></span>.
+  <button id='disconnectButton'>Disconnect</button>
+</div>
+
+<form id='publisher' style='display: none;'>
+  <table>
+    <tr>
+      <td>Topic</td>
+      <td>
+        <input
+          name='topic'
+          value="homeassistant/kitchen/temperature"
+          size="30"
+          style='width: 100%'
+        />
+      </td>
+    </tr>
+    <tr>
+      <td>Payload</td>
+      <td>
+      <textarea name='payload'>23</textarea>
+      </td>
+    </tr>
+    <tr>
+      <td></td>
+      <td><button>Publish</button></td>
+    </tr>
+  </table>
+</form>
+
+<script>
+function updateStatus(status) {
+  document.getElementById('status').innerText = status;
+}
+
+document.getElementById('connection').addEventListener('submit', function (ev) {
+  ev.preventDefault();
+
+  if (window.client) {
+    window.client.end();
+  }
+
+  var host = ev.target.querySelector('input').value;
+
+  window.client = mqtt.connect(host);
+  console.log('Connecting')
+  document.getElementById('host').innerText = host;
+  updateStatus("Connecting");
+  document.getElementById('connection').style.display = 'none';
+  document.getElementById('connectionStatus').style.display = 'block';
+
+  window.client.on("connect", function () {
+    console.log('Connected')
+    updateStatus("Connected");
+    document.getElementById('publisher').style.display = 'block';
+  })
+
+  window.client.on("close", function () {
+    console.log('Connection closed')
+    updateStatus("Disconnected");
+    document.getElementById('connection').style.display = 'block';
+    document.getElementById('connectionStatus').style.display = 'none';
+    document.getElementById('publisher').style.display = 'none';
+  })
+});
+
+document.getElementById('publisher').addEventListener('submit', function (ev) {
+  ev.preventDefault();
+
+  var topic = ev.target.querySelector('input').value;
+  var payload = ev.target.querySelector('textarea').value;
+
+  client.publish(topic, payload);
+});
+
+document.getElementById('disconnectButton').addEventListener('click', function () {
+  window.client.end();
+});
+</script>