mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-23 17:27:19 +00:00
Update the MQTT server
This commit is contained in:
parent
e38895c1f8
commit
e6a46aaaf4
@ -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'>
|
||||||
Host <span id='host'></span>. Status: <span id='status'></span>.
|
<div class="grid__item one-half lap-one-half palm-one-whole">
|
||||||
<button id='disconnectButton'>Disconnect</button>
|
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>
|
</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>
|
||||||
<input
|
</div>
|
||||||
name='topic'
|
<div class="grid__item one-half lap-one-half palm-one-whole">
|
||||||
value="homeassistant/kitchen/temperature"
|
<input
|
||||||
size="30"
|
name='topic'
|
||||||
style='width: 100%'
|
value="homeassistant/kitchen/temperature"
|
||||||
/>
|
style='width: 100%'
|
||||||
</td>
|
/>
|
||||||
</tr>
|
</div>
|
||||||
<tr>
|
|
||||||
<td>Payload</td>
|
<div class="grid__item one-half lap-one-half palm-one-whole">
|
||||||
<td>
|
Payload
|
||||||
|
</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');
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user