biggy/samsung-tv-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(debug): replace HTTP polling with WebSocket for real-time debug updates

Browse Source
This commit is contained in:
biggy
2026-05-13 08:42:50 +02:00
parent 94141e928c
commit 1aca866459
2 changed files with 170 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+56 -34
View File
@@ -528,15 +528,15 @@
<h2>🔍 Live Debug</h2>
<div style="display: flex; align-items: center; gap: 8px">
<div class="live-dot"></div>
<span style="font-size: 12px; color: var(--muted)">polling every</span>
<select id="debug-interval" onchange="onDebugIntervalChange()"
style="font-size: 12px; background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px;">
<option value="500">0.5s</option>
<span style="font-size:12px;color:var(--muted);">every</span>
<select id="debug-interval" onchange="setDebugInterval(parseInt(this.value))"
style="font-size:12px;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:2px 6px;margin:0 4px;">
<option value="100">100ms</option>
<option value="250">250ms</option>
<option value="500">500ms</option>
<option value="1000" selected>1s</option>
<option value="2000">2s</option>
<option value="5000">5s</option>
<option value="10000">10s</option>
<option value="30000">30s</option>
</select>
<button class="btn btn-ghost btn-xs" onclick="toggleDebug()">✕</button>
</div>
@@ -636,7 +636,8 @@
// ═══════════════════════════════════════════════
let views = [];
let debugPollTimer = null;
let debugSocket = null;
let debugReconnectTimer = null;
let debugVisible = false;
let debugIntervalMs = 1000;
const { origin } = location;
@@ -970,9 +971,54 @@
}
// ═══════════════════════════════════════════════
// DEBUG PANEL
// DEBUG PANEL (WebSocket)
// ═══════════════════════════════════════════════
function connectDebugSocket() {
if (debugSocket) return;
const protocol = location.protocol === "https:" ? "wss:" : "ws:";
const wsUrl = `${protocol}//${location.host}/ws?interval=${debugIntervalMs}`;
debugSocket = new WebSocket(wsUrl);
debugSocket.onopen = () => {
if (debugReconnectTimer) { clearTimeout(debugReconnectTimer); debugReconnectTimer = null; }
};
debugSocket.onmessage = (event) => {
try {
lastDebugData = JSON.parse(event.data);
renderDebug(lastDebugData);
} catch { /* ignore */ }
};
debugSocket.onclose = () => {
debugSocket = null;
if (debugVisible) {
debugReconnectTimer = setTimeout(connectDebugSocket, 2000);
}
};
debugSocket.onerror = () => {
debugSocket?.close();
};
}
function disconnectDebugSocket() {
if (debugReconnectTimer) { clearTimeout(debugReconnectTimer); debugReconnectTimer = null; }
if (debugSocket) {
debugSocket.onclose = null; // prevent auto-reconnect
debugSocket.close();
debugSocket = null;
}
}
function setDebugInterval(ms) {
debugIntervalMs = ms;
if (debugSocket && debugSocket.readyState === WebSocket.OPEN) {
debugSocket.send(JSON.stringify({ type: "debug-interval", interval: ms }));
}
}
function toggleDebug() {
debugVisible = !debugVisible;
const panel = document.getElementById("debug-panel");
@@ -980,39 +1026,15 @@
if (debugVisible) {
panel.classList.add("visible");
btn.textContent = "🔍 Hide Debug";
pollDebug();
debugPollTimer = setInterval(pollDebug, debugIntervalMs);
connectDebugSocket();
} else {
panel.classList.remove("visible");
btn.textContent = "🔍 Debug";
if (debugPollTimer) {
clearInterval(debugPollTimer);
debugPollTimer = null;
}
}
}
function onDebugIntervalChange() {
debugIntervalMs = parseInt(document.getElementById("debug-interval").value);
if (debugPollTimer) {
clearInterval(debugPollTimer);
debugPollTimer = setInterval(pollDebug, debugIntervalMs);
disconnectDebugSocket();
}
}
let lastDebugData = null;
async function pollDebug() {
if (!debugVisible) return;
try {
const res = await fetch(origin + "/api/debug");
lastDebugData = await res.json();
renderDebug(lastDebugData);
} catch {
/* silent */
}
}
let debugTickInterval = null;
function renderDebug(data) {
src/server.ts
+114 -34
View File
@@ -236,6 +236,45 @@ function devicesSnapshot(): DeviceEntry[] {
return [...devices.values()].sort((a, b) => b.lastSeen - a.lastSeen);
}
// ═══════════════════════════════════════════════════════════════
// DEBUG DATA HELPER (used by both REST and WebSocket)
// ═══════════════════════════════════════════════════════════════
function getDebugData() {
const viewsDebug = viewCacheAll().map(v => {
const idx = getCurrentURLIndex(v);
return {
id: v.id,
name: v.name,
urls: v.urls,
method: v.method,
metaRefreshEnabled: v.metaRefreshEnabled,
cacheTtlSec: v.cacheTtlSec,
viewportWidth: v.viewportWidth,
viewportHeight: v.viewportHeight,
currentUrlIndex: idx,
currentUrl: v.urls[idx]?.url ?? "",
remainingSec: getRemainingSec(v),
totalCycleSec: v.urls.reduce((s, u) => s + u.durationSec, 0),
cacheEntries: cacheStats().filter(c => c.viewId === v.id),
};
});
return {
server: {
uptime: Math.round(process.uptime()),
activeRenders: pagePool?.activeRenders ?? 0,
queueLength: renderQueue.length,
cacheEntries: renderCache.size,
browsers: CONFIG.BROWSER_COUNT,
pagesPerBrowser: CONFIG.PAGES_PER_BROWSER,
maxConcurrentRenders: CONFIG.MAX_CONCURRENT_RENDERS,
},
views: viewsDebug,
devices: devicesSnapshot(),
};
}
// ═══════════════════════════════════════════════════════════════
// BROWSER + PAGE POOL
// ═══════════════════════════════════════════════════════════════
@@ -390,6 +429,17 @@ class PagePool {
let pagePool: PagePool;
// ═══════════════════════════════════════════════════════════════
// WEBSOCKET DEBUG CLIENTS
// ═══════════════════════════════════════════════════════════════
const debugClients = new Map<
any,
{ interval: number; timer: ReturnType<typeof setInterval> }
>();
const DEBUG_DEFAULT_INTERVAL_MS = 1000;
const DEBUG_MIN_INTERVAL_MS = 100;
// ═══════════════════════════════════════════════════════════════
// RENDER CACHE + QUEUE
// ═══════════════════════════════════════════════════════════════
@@ -907,38 +957,7 @@ async function handleAPI(req: Request, path: string): Promise<Response> {
// GET /api/debug
if (path === "/api/debug" && method === "GET") {
const viewsDebug = viewCacheAll().map((v) => {
const idx = getCurrentURLIndex(v);
return {
id: v.id,
name: v.name,
urls: v.urls,
method: v.method,
metaRefreshEnabled: v.metaRefreshEnabled,
cacheTtlSec: v.cacheTtlSec,
viewportWidth: v.viewportWidth,
viewportHeight: v.viewportHeight,
currentUrlIndex: idx,
currentUrl: v.urls[idx]?.url ?? "",
remainingSec: getRemainingSec(v),
totalCycleSec: v.urls.reduce((s, u) => s + u.durationSec, 0),
cacheEntries: cacheStats().filter((c) => c.viewId === v.id),
};
});
return json({
server: {
uptime: Math.round(process.uptime()),
activeRenders: pagePool?.activeRenders ?? 0,
queueLength: renderQueue.length,
cacheEntries: renderCache.size,
browsers: CONFIG.BROWSER_COUNT,
pagesPerBrowser: CONFIG.PAGES_PER_BROWSER,
maxConcurrentRenders: CONFIG.MAX_CONCURRENT_RENDERS,
},
views: viewsDebug,
devices: devicesSnapshot(),
});
return json(getDebugData());
}
// POST /api/views
@@ -1064,13 +1083,69 @@ async function serveStatic(path: string): Promise<Response | null> {
// SERVER
// ═══════════════════════════════════════════════════════════════
const server = Bun.serve({
const server = Bun.serve<{ interval: number }>({
port: CONFIG.PORT,
websocket: {
open(ws) {
const interval = ws.data?.interval ?? DEBUG_DEFAULT_INTERVAL_MS;
const timer = setInterval(() => {
try {
ws.send(JSON.stringify(getDebugData()));
} catch {
clearInterval(timer);
debugClients.delete(ws);
}
}, interval);
debugClients.set(ws, { interval, timer });
// Send initial payload immediately
try { ws.send(JSON.stringify(getDebugData())); } catch {}
},
message(ws, msg) {
try {
const data = JSON.parse(msg as string);
if (data.type === "debug-interval" && typeof data.interval === "number") {
const client = debugClients.get(ws);
if (!client) return;
const interval = Math.max(DEBUG_MIN_INTERVAL_MS, data.interval);
clearInterval(client.timer);
client.interval = interval;
client.timer = setInterval(() => {
try { ws.send(JSON.stringify(getDebugData())); } catch {
clearInterval(client.timer);
debugClients.delete(ws);
}
}, interval);
// Push immediately after rate change
try { ws.send(JSON.stringify(getDebugData())); } catch {}
}
} catch { /* ignore malformed messages */ }
},
close(ws) {
const client = debugClients.get(ws);
if (client) {
clearInterval(client.timer);
debugClients.delete(ws);
}
},
},
async fetch(req) {
const url = new URL(req.url);
const path = url.pathname;
// ── WebSocket upgrade for debug panel ──
if (path === "/ws") {
const qInterval = parseInt(url.searchParams.get("interval") ?? "");
const wsInterval = Math.max(
DEBUG_MIN_INTERVAL_MS,
Number.isFinite(qInterval) ? qInterval : DEBUG_DEFAULT_INTERVAL_MS,
);
if (server.upgrade(req, { data: { interval: wsInterval } })) {
return; // upgraded — Bun will call websocket.open
}
return new Response("WebSocket upgrade failed", { status: 500 });
}
// View serving — /v/:id
const viewMatch = path.match(/^\/v\/([a-f0-9-]+)$/);
if (viewMatch) {
@@ -1089,7 +1164,12 @@ const server = Bun.serve({
});
}
deviceTrack(ip, view.id, view.name, req.headers.get("User-Agent") ?? "unknown");
deviceTrack(
ip,
view.id,
view.name,
req.headers.get("User-Agent") ?? "unknown",
);
return serveView(view);
}