jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-07-19 15:26:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add test embedded MQTT server page

Browse Source
This commit is contained in:
Paulus Schoutsen 2017-07-29 23:44:59 -07:00
parent d42e638151
commit e38895c1f8
1 changed files with 109 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
source/mqtt/test_server.html Normal file
View File

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