Mercurial > code > home > repos > light9
changeset 2311:a10f0f0e4dae
update web ui with one SSE, not repeated requests
author | drewp@bigasterisk.com |
---|---|
date | Wed, 31 May 2023 13:34:06 -0700 |
parents | 3d58c1c78f1f |
children | 3f0b889c8fa9 |
files | light9/ascoltami/main.py light9/ascoltami/main.ts light9/ascoltami/webapp.py |
diffstat | 3 files changed, 29 insertions(+), 49 deletions(-) [+] |
line wrap: on
line diff
--- a/light9/ascoltami/main.py Wed May 31 13:12:06 2023 -0700 +++ b/light9/ascoltami/main.py Wed May 31 13:34:06 2023 -0700 @@ -50,6 +50,7 @@ def main(): + logging.getLogger('sse_starlette.sse').setLevel(logging.INFO) Gst.init(None) graph = showconfig.getGraph()
--- a/light9/ascoltami/main.ts Wed May 31 13:12:06 2023 -0700 +++ b/light9/ascoltami/main.ts Wed May 31 13:34:06 2023 -0700 @@ -17,8 +17,15 @@ let currentHighlightedSong = ""; // let lastPlaying = false; - async function updateCurrent() { - const data: TimingUpdate = await (await fetch("api/time")).json(); + + const events = new EventSource("api/time/stream"); + events.addEventListener("message", (m)=>{ + const update = JSON.parse(m.data) as TimingUpdate + updateCurrent(update) + markUpdateTiming(); + }) + + async function updateCurrent(data:TimingUpdate) { byId("currentSong").innerText = data.song; if (data.song != currentHighlightedSong) { showCurrentSong(data.song); @@ -30,6 +37,24 @@ // document.querySelector("#timeSlider").slider({ value: data.t, max: data.duration }); timingUpdate(data); } + let recentUpdates: Array<number> = []; + function markUpdateTiming() { + recentUpdates.push(+new Date()); + recentUpdates = recentUpdates.slice(Math.max(recentUpdates.length - 5, 0)); + } + + function refreshUpdateFreqs() { + if (recentUpdates.length > 1) { + if (+new Date() - recentUpdates[recentUpdates.length - 1] > 1000) { + byId("updateActual").innerText = "(stalled)"; + return; + } + + var avgMs = (recentUpdates[recentUpdates.length - 1] - recentUpdates[0]) / (recentUpdates.length - 1); + byId("updateActual").innerText = "" + Math.round(1000 / avgMs); + } + } + setInterval(refreshUpdateFreqs, 2000); function showCurrentSong(uri: string) { document.querySelectorAll(".songs div").forEach((row: Element, i: number) => { @@ -72,50 +97,4 @@ document.querySelector(".songs")!.appendChild(dv); }); - // var pendingSlide = false; - // $("#timeSlider").slider({ - // step: 0.01, - // slide: function (event, ui) { - // if (pendingSlide) { - // return; - // } - // pendingSlide = true; - // $.post("time", '{"t" : ' + ui.value + "}", function (data, status, xhr) { - // pendingSlide = false; - // }); - // }, - // }); - - let recentUpdates: Array<number> = []; - function onUpdate() { - recentUpdates.push(+new Date()); - recentUpdates = recentUpdates.slice(Math.max(recentUpdates.length - 5, 0)); - refreshUpdateFreqs(); - } - - function refreshUpdateFreqs() { - if (recentUpdates.length > 1) { - if (+new Date() - recentUpdates[recentUpdates.length - 1] > 1000) { - byId("updateActual").innerText = "(stalled)"; - document.querySelectorAll(".dimStalled").forEach((el) => el.classList.add("stalled")); - return; - } - - var avgMs = (recentUpdates[recentUpdates.length - 1] - recentUpdates[0]) / (recentUpdates.length - 1); - byId("updateActual").innerText = "" + Math.round(1000 / avgMs); - } - } - setInterval(refreshUpdateFreqs, 2000); - - async function updateLoop() { - var whenDone = function () { - setTimeout(function () { - requestAnimationFrame(updateLoop); - }, 1000 / updateFreq); - }; - onUpdate(); - await updateCurrent(); - whenDone(); - } - updateLoop(); };