ctbk/dmx-interface
1
0
Fork 0
mirror of https://github.com/HendrikRauh/dmx-interface.git synced 2025-07-05 05:38:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add WebSocket support for real-time status updates

Browse source
This commit is contained in:
RaffaelW 2025-04-17 22:35:26 +02:00
parent c0da3a6af1
commit e256d16f8d
8 changed files with 112 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

1
data/index.html
View file

@ -13,6 +13,7 @@
<script type="module" src="/reset.js" defer></script>
<script type="module" src="/range-input.js" defer></script>
<script type="module" src="/status.js" defer></script>
<script type="module" src="/websocket.js" defer></script>
</head>
<body>
<main>

24
data/status.js
View file

@ -1,4 +1,5 @@
import { data } from "./load-data.js";
import { initWebSocket, registerCallback } from "./websocket.js";
const statusDialog = document.querySelector(".dialog-status");
const expandButton = document.querySelector(".expand-status");
@ -7,24 +8,8 @@ expandButton.addEventListener("click", () => {
statusDialog.showModal();
});
async function loadStatus() {
try {
const res = await fetch("/status");
if (!res.ok) {
throw new Error(
`Response status: ${res.status}\n${await res.text()}`
);
}
const data = await res.json();
console.log(data);
return data;
} catch (e) {
console.error(e);
return null;
}
}
registerCallback("status", setStatus);
initWebSocket();
function setStatus(status) {
setValue("model", status.chip.model);
@ -70,7 +55,6 @@ function setValue(className, value) {
function parseDuration(ms) {
const date = new Date(ms);
console.log(date);
const time =
date.getUTCHours().toString().padStart(2, "0") +
":" +
@ -126,5 +110,3 @@ function selectConnectionIcon(signalStrength) {
}
return "signal1.svg";
}
setStatus(await loadStatus());

37
data/websocket.js Normal file
View file

@ -0,0 +1,37 @@
const gateway = `ws://${window.location.hostname}/ws`;
let ws;
let callbacks = {};
export function initWebSocket() {
if (ws) return;
ws = new WebSocket(gateway);
ws.onopen = () => {
console.info("WebSocket connection opened");
};
ws.onclose = (event) => {
console.info("WebSocket connection closed, reason:", event.reason);
ws = null;
};
ws.onerror = (event) => {
console.warn("WebSocket encountered error, closing socket.", event);
ws.close();
ws = null;
};
ws.onmessage = (event) => {
const message = JSON.parse(event.data);
console.log("received websocket data", message);
if (message.type in callbacks) {
callbacks[message.type](message.data);
}
};
}
export function registerCallback(type, callback) {
callbacks[type] = callback;
}