Hi,
falls ihr euch fragt wie das mit dem Status des Shelly4ProPM über Websockets (Ersatz für Coap) funktioniert, hier mal ein kleines Beispiel (Javascript & HTML)
die IP-Adresse in Zeile 18 müsst ihr durch die IP eures Shelly4Pro tauschen, danach die Seite einfach im Browser aufrufen..
Kurz zur Erläuterung:
newWebsocket erzeugt den Socket. Sobald die Verbindung offen ist (socket.onopen) senden wir einmalig ein Shelly.GetStatus .. wichtig ist hier der JSON-Parameter src, darüber erhält der Shelly die Info Notifications zu schicken.
Sobald eine neue Benachrichtigung eingeht wird die Funktion socket.onmessage aufgerufen und wertet die Rückgaben aus..
In dem Beispiel schaue ich lediglich auf den Zustand des Relais, der wird mit an oder aus im Browser angezeigt und dynamisch aktualisiert sobald er sich ändert.
Viel Spaß beim "Selber Tüfteln"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Websocket Client</title>
</head>
<body>
<h3>Websocket Beispiel</h3>
<div>Relay 0: <span id="sw0"></span></div>
<div>Relay 1: <span id="sw1"></span></div>
<div>Relay 2: <span id="sw2"></span></div>
<div>Relay 3: <span id="sw3"></span></div>
<script>
let socket = new WebSocket("ws://192.168.178.93/rpc");
socket.onopen = function (e) {
socket.send('{"id":1, "src":"user_1", "method":"Shelly.GetStatus"}');
};
socket.onmessage = function (event) {
let message = event.data;
//console.log("WebSocket message received:", message);
obj = JSON.parse(event.data);
if (obj.result !== undefined && obj.result['switch:0'] !== undefined && obj.result['switch:0'].output !== undefined) {
if (obj.result['switch:0'].output === false)
document.getElementById("sw0").innerHTML = 'aus';
else
document.getElementById("sw0").innerHTML = 'an';
}
if (obj.result !== undefined && obj.result['switch:1'] !== undefined && obj.result['switch:1'].output !== undefined) {
if (obj.result['switch:1'].output === false)
document.getElementById("sw1").innerHTML = 'aus';
else
document.getElementById("sw1").innerHTML = 'an';
}
if (obj.result !== undefined && obj.result['switch:2'] !== undefined && obj.result['switch:2'].output !== undefined) {
if (obj.result['switch:2'].output === false)
document.getElementById("sw2").innerHTML = 'aus';
else
document.getElementById("sw2").innerHTML = 'an';
}
if (obj.result !== undefined && obj.result['switch:3'] !== undefined && obj.result['switch:3'].output !== undefined) {
if (obj.result['switch:3'].output === false)
document.getElementById("sw3").innerHTML = 'aus';
else
document.getElementById("sw3").innerHTML = 'an';
}
// Switch 0
if (obj.params !== undefined && obj.params['switch:0'] !== undefined && obj.params['switch:0'].output !== undefined) {
if (obj.params['switch:0'].output === false)
document.getElementById("sw0").innerHTML = 'aus';
else
document.getElementById("sw0").innerHTML = 'an';
}
// Switch 1
if (obj.params !== undefined && obj.params['switch:1'] !== undefined && obj.params['switch:1'].output !== undefined) {
if (obj.params['switch:1'].output === false)
document.getElementById("sw1").innerHTML = 'aus';
else
document.getElementById("sw1").innerHTML = 'an';
}
// Switch 2
if (obj.params !== undefined && obj.params['switch:2'] !== undefined && obj.params['switch:2'].output !== undefined) {
if (obj.params['switch:2'].output === false)
document.getElementById("sw2").innerHTML = 'aus';
else
document.getElementById("sw2").innerHTML = 'an';
}
// Switch 3
if (obj.params !== undefined && obj.params['switch:3'] !== undefined && obj.params['switch:3'].output !== undefined) {
if (obj.params['switch:3'].output === false)
document.getElementById("sw3").innerHTML = 'aus';
else
document.getElementById("sw3").innerHTML = 'an';
}
}
</script>
</body>
</html>
Alles anzeigen