109 lines
2.7 KiB
HTML
109 lines
2.7 KiB
HTML
---
|
|
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>
|