51 lines
1.5 KiB
JavaScript
51 lines
1.5 KiB
JavaScript
window.onload = () => {
|
|
const data = document.getElementById("data");
|
|
const last_update = document.getElementById("last_update");
|
|
const connected = document.getElementById("connected");
|
|
|
|
const timeout_duration = 10*1000;
|
|
const retry_timeout = 5*1000;
|
|
|
|
let reconnect_timeout;
|
|
let ping_timeout;
|
|
let evtSource;
|
|
|
|
|
|
let connect_event_source = () => {
|
|
|
|
clearTimeout(reconnect_timeout);
|
|
clearTimeout(ping_timeout);
|
|
ping_timeout = setTimeout(connect_event_source, timeout_duration);
|
|
|
|
evtSource && evtSource.close && evtSource.close();
|
|
|
|
evtSource = new EventSource("/events");
|
|
evtSource.addEventListener("change", event => {
|
|
last_update.innerText = `last update at ${new Date(+event.data * 1000)}`;
|
|
|
|
fetch("/data")
|
|
.then(res => res.json())
|
|
.then(res => data.innerText = JSON.stringify(res, null, 1));
|
|
});
|
|
|
|
evtSource.addEventListener("ping", event => {
|
|
clearTimeout(ping_timeout);
|
|
ping_timeout = setTimeout(connect_event_source, timeout_duration);
|
|
|
|
|
|
last_update.innerText = `last update at ${new Date(+event.data * 1000)}`;
|
|
connected.className = "visible";
|
|
setTimeout(() => connected.className = "hidden", 1000);
|
|
});
|
|
|
|
|
|
evtSource.onerror = () => {
|
|
clearTimeout(reconnect_timeout);
|
|
reconnect_timeout = setTimeout(connect_event_source, retry_timeout);
|
|
};
|
|
}
|
|
|
|
|
|
connect_event_source();
|
|
|
|
}; |