smartyellow/status
1
0
Fork 0
mirror of https://github.com/smartyellow/status.git synced 2025-02-21 20:49:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dashboard socket: reconnect on close

Browse Source
This commit is contained in:
Romein van Buren 2022-08-06 18:52:37 +02:00
parent 232c8a73d5
commit e973d4dfea
Signed by: romein
GPG Key ID: 0EFF8478ADDF6C49
2 changed files with 50 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
gui/dashboard/apiclient.js Normal file
View File

@ -0,0 +1,40 @@
import { ringBell } from './lib';
const socketUrl = window.location.href.replace('http', 'ws') + '/socket';
let reconnectAttempts = 0;
let ws;
export async function connect({ onData }) {
ws = new WebSocket(socketUrl);
ws.onmessage = async evt => {
const data = JSON.parse(evt.data || 'false');
switch (data.cmd) {
case 'data':
onData(data);
break;
case 'bell':
ringBell();
break;
default:
break;
}
};
ws.onopen = () => {
if (reconnectAttempts) {
window.location.reload();
}
};
ws.onclose = async () => {
console.error(`Websocket closed, trying to reconnect... (#${reconnectAttempts++})`);
await new Promise(res => setTimeout(res, reconnectAttempts * 500));
await connect({ onData });
};
ws.onerror = err => console.error('Connection error', err);
}

34
gui/dashboard/app.svelte
View File

@ -3,7 +3,8 @@
import TileRawValue from './tile-rawvalue.svelte'; import TileRawValue from './tile-rawvalue.svelte';
import Settings from './settings.svelte'; import Settings from './settings.svelte';
import { flip } from 'svelte/animate'; import { flip } from 'svelte/animate';
import { settings, shuffle, ringBell } from './lib'; import { settings, shuffle } from './lib';
import { connect } from './apiclient';
const [ send, receive ] = shuffle; const [ send, receive ] = shuffle;
let size = ($settings.cols || 4) * ($settings.rows || 3); let size = ($settings.cols || 4) * ($settings.rows || 3);
@ -69,29 +70,14 @@
tiles = servicesTemp; tiles = servicesTemp;
} }
onMount(() => { onMount(async () => {
const ws = new WebSocket( await connect({
window.location.href.replace('http', 'ws') + '/socket' onData: data => {
); globalData = data;
organiseGrid();
ws.onmessage = async evt => { hasData = true;
const data = JSON.parse(evt.data || '""'); },
});
switch (data.cmd) {
case 'data':
globalData = data;
organiseGrid();
hasData = true;
break;
case 'bell':
ringBell();
break;
default:
break;
}
}
const clockInterval = setInterval(() => { const clockInterval = setInterval(() => {
time = new Date().toLocaleTimeString('en-GB', { time = new Date().toLocaleTimeString('en-GB', {