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-24 17:57:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update the MQTT server

Browse Source
This commit is contained in:
Paulus Schoutsen 2017-07-30 00:08:57 -07:00
parent e38895c1f8
commit e6a46aaaf4
1 changed files with 92 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
source/mqtt/test_server.html
View File

@ -11,57 +11,90 @@ footer: true
<script src="https://unpkg.com/mqtt@2.9.3/dist/mqtt.min.js"></script> <script src="https://unpkg.com/mqtt@2.9.3/dist/mqtt.min.js"></script>
<form id='connection'> <style>
<table> .mqtt-form input {
<tr> margin-bottom: 24px;
<td> }
MQTT Websocket Server<br> </style>
<small>Default of Home Assistant embedded websocket server is <code>ws://localhost:8080</code>.</small>
</td> <form id='connection' class='mqtt-form'>
<td><input name='host' value="ws://localhost:8080" size="30" /></td> <div class="grid">
</tr>
<tr> <div class="grid__item one-half lap-one-half palm-one-whole">
<td></td> <label for="host">MQTT Websocket Server</label>
<td><button>Connect</button></td> <small>Default for the Home Assistant embedded websocket server is <code>ws://localhost:8080</code>.</small>
</tr> <br><br>
</table> </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. This is required to connect to the MQTT server. 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> </form>
<div id='connectionStatus' style='display: none'> <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>. 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> <button id='disconnectButton'>Disconnect</button>
</div>
</div> </div>
<form id='publisher' style='display: none;'> <form id='publisher' style='display: none;' class='mqtt-form'>
<table> <div class="grid">
<tr>
<td>Topic</td> <div class="grid__item one-half lap-one-half palm-one-whole">
<td> <label for="topic">Topic</label>
</div>
<div class="grid__item one-half lap-one-half palm-one-whole">
<input <input
name='topic' name='topic'
value="homeassistant/kitchen/temperature" value="homeassistant/kitchen/temperature"
size="30"
style='width: 100%' style='width: 100%'
/> />
</td> </div>
</tr>
<tr> <div class="grid__item one-half lap-one-half palm-one-whole">
<td>Payload</td> Payload
<td> </div>
<div class="grid__item one-half lap-one-half palm-one-whole">
<textarea name='payload'>23</textarea> <textarea name='payload'>23</textarea>
</td> </div>
</tr>
<tr> <div class="grid__item one-half lap-one-half palm-one-whole">
<td></td> </div>
<td><button>Publish</button></td> <div class="grid__item one-half lap-one-half palm-one-whole push--top">
</tr> <button>Publish</button>
</table> </div>
</div>
</form> </form>
<script> <script>
function updateStatus(status) { function updateStatus(status) {
document.getElementById('status').innerText = 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) { document.getElementById('connection').addEventListener('submit', function (ev) {
ev.preventDefault(); ev.preventDefault();
@ -70,27 +103,38 @@ document.getElementById('connection').addEventListener('submit', function (ev) {
window.client.end(); window.client.end();
} }
var host = ev.target.querySelector('input').value; var host = ev.target.querySelector('input[name=host]').value;
var password = ev.target.querySelector('input[name=password]').value;
var options = {};
window.client = mqtt.connect(host); if (password) {
options.username = 'homeassistant';
options.password = password;
}
window.client = mqtt.connect(host, options);
console.log('Connecting') console.log('Connecting')
document.getElementById('host').innerText = host; document.getElementById('host').innerText = host;
updateStatus("Connecting"); updateStatus("Connecting");
document.getElementById('connection').style.display = 'none'; hide('connection');
document.getElementById('connectionStatus').style.display = 'block'; show('connectionStatus');
window.client.on("connect", function () { window.client.on("connect", function () {
console.log('Connected') console.log('Connected')
updateStatus("Connected"); updateStatus("Connected");
document.getElementById('publisher').style.display = 'block';
hide('connection');
show('connectionStatus');
show('publisher');
}) })
window.client.on("close", function () { window.client.on("close", function () {
console.log('Connection closed') console.log('Connection closed')
updateStatus("Disconnected"); updateStatus("Disconnected");
document.getElementById('connection').style.display = 'block';
document.getElementById('connectionStatus').style.display = 'none'; show('connection');
document.getElementById('publisher').style.display = 'none'; hide('connectionStatus');
hide('publisher');
}) })
}); });