---
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>

<style>
.mqtt-form input {
  margin-bottom: 24px;
}
</style>

<form id='connection' class='mqtt-form'>
  <div class="grid">

    <div class="grid__item one-half lap-one-half palm-one-whole">
        <label for="host">MQTT Websocket Server</label>
        <small>Default for the Home Assistant embedded websocket server is <code>ws://localhost:8080</code>.</small>
        <br><br>
    </div>
    <div class="grid__item one-half lap-one-half palm-one-whole">
      <input name='host' value="ws://localhost:8080" style='width: 100%' />
    </div>

    <div class="grid__item one-half lap-one-half palm-one-whole">
        <label for="password">API Password</label>
        <small>Enter your Home Assistant password if you have set one. This password will not be stored!</small>
    </div>
    <div class="grid__item one-half lap-one-half palm-one-whole">
      <input type='password' name='password' value="" style='width: 100%' />
    </div>

    <div class="grid__item one-half lap-one-half palm-one-whole">
    </div>
    <div class="grid__item one-half lap-one-half palm-one-whole">
      <button>Connect</button>
    </div>

  </div>
</form>

<div id='connectionStatus' class="grid push--bottom" style='display: none'>
  <div class="grid__item one-half lap-one-half palm-one-whole">
    Host <span id='host'></span>. Status: <span id='status'></span>.
  </div>
  <div class="grid__item one-half lap-one-half palm-one-whole">
    <button id='disconnectButton'>Disconnect</button>
  </div>
</div>

<form id='publisher' style='display: none;' class='mqtt-form'>
  <div class="grid">

    <div class="grid__item one-half lap-one-half palm-one-whole">
        <label for="topic">Topic</label>
    </div>
    <div class="grid__item one-half lap-one-half palm-one-whole">
      <input
        name='topic'
        value="homeassistant/kitchen/temperature"
        style='width: 100%'
      />
    </div>

    <div class="grid__item one-half lap-one-half palm-one-whole">
        Payload
    </div>
    <div class="grid__item one-half lap-one-half palm-one-whole">
      <textarea name='payload'>23</textarea>
    </div>

    <div class="grid__item one-half lap-one-half palm-one-whole">
    </div>
    <div class="grid__item one-half lap-one-half palm-one-whole push--top">
      <button>Publish</button>
    </div>

  </div>
</form>

<script>
function updateStatus(status) {
  document.getElementById('status').innerText = status;
}
function show(el) {
  document.getElementById(el).style.display = 'block';
}
function hide(el) {
  document.getElementById(el).style.display = 'none';
}

document.getElementById('connection').addEventListener('submit', function (ev) {
  ev.preventDefault();

  if (window.client) {
    window.client.end();
  }

  var host = ev.target.querySelector('input[name=host]').value;
  var password = ev.target.querySelector('input[name=password]').value;
  var options = {};

  if (password) {
    options.username = 'homeassistant';
    options.password = password;
  }

  window.client = mqtt.connect(host, options);
  console.log('Connecting')
  document.getElementById('host').innerText = host;
  updateStatus("Connecting");
  hide('connection');
  show('connectionStatus');

  window.client.on("connect", function () {
    console.log('Connected')
    updateStatus("Connected");

    hide('connection');
    show('connectionStatus');
    show('publisher');
  })

  window.client.on("close", function () {
    console.log('Connection closed')
    updateStatus("Disconnected");

    show('connection');
    hide('connectionStatus');
    hide('publisher');
  })
});

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>