mirror of
https://github.com/ChuckBuilds/LEDMatrix.git
synced 2026-05-26 14:03:32 +00:00
fix(web-ui): support multiple browser tabs via SSE broadcaster (#349)
* fix(web-ui): support multiple browser tabs via SSE broadcaster pattern Each SSE stream (stats, display preview, logs) previously ran a separate generator per connected client, so two open tabs meant double the PIL image encodes per second and double the journalctl subprocesses. Under load or on reconnect storms the tight "20 per minute" rate limit was easily exhausted, silently breaking tabs without any user-facing explanation. - Replace per-client sse_response generators with _StreamBroadcaster: one background thread per stream type fans data to all subscribed client queues, keeping CPU/subprocess work constant regardless of how many tabs are open - Add 30-second SSE heartbeat comments to keep idle connections alive through proxies - Raise SSE rate limit from "20/min" to "200/min" to prevent reconnect storms from exhausting the limit - Assign statsSource/displaySource to window.* so reconnectSSE() in app.js can actually reach them (was dead code due to const scoping) - Add displaySource error handler so display preview failures are no longer completely silent - Improve connection status badge: shows "Reconnecting…" on first few errors, "Disconnected" with tooltip hint after persistent failure - Complete the empty displaySource.onmessage stub in reconnectSSE() Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(web-ui): harden SSE broadcaster — drop-oldest on full queue, exit on no subscribers, reattach reconnect handlers - _broadcast: on queue.Full drop the oldest item and retry the put instead of removing the client from _clients — a slow tab now stays subscribed and receives the latest data rather than being silently ejected - _broadcast: break instead of continue when _clients is empty so the background generator thread exits rather than spinning indefinitely; subscribe() already restarts it on the next connection - base.html: expose _statsOpenHandler, _statsErrorHandler, and _displayErrorHandler as window properties so reconnectSSE() can reattach them after replacing the EventSource instances - app.js: reconnectSSE() now reattaches those handlers after creating each new EventSource so the status badge and display-stream console logging survive a manual reconnect Heartbeat path (~line 646) is a queue read (q.get), not a write; no queue.Full can occur there so no change needed. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(lint): declare updateDisplayPreview in ESLint global comment Codacy flagged 'updateDisplayPreview is not defined' at app.js:73. The function is defined in base.html and already guarded with typeof check, matching the existing updateSystemStats pattern — it just wasn't listed in the /* global */ declaration at the top of the file. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Chuck <chuck@example.com> Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Chuck
@@ -1370,34 +1370,64 @@
|
||||
|
||||
<!-- SSE connection for real-time updates -->
|
||||
<script>
|
||||
// Connect to SSE streams
|
||||
const statsSource = new EventSource('/api/v3/stream/stats');
|
||||
const displaySource = new EventSource('/api/v3/stream/display');
|
||||
// Assign to window so reconnectSSE() in app.js can reach them.
|
||||
window.statsSource = new EventSource('/api/v3/stream/stats');
|
||||
window.displaySource = new EventSource('/api/v3/stream/display');
|
||||
|
||||
statsSource.onmessage = function(event) {
|
||||
window.statsSource.onmessage = function(event) {
|
||||
const data = JSON.parse(event.data);
|
||||
updateSystemStats(data);
|
||||
};
|
||||
|
||||
displaySource.onmessage = function(event) {
|
||||
window.displaySource.onmessage = function(event) {
|
||||
const data = JSON.parse(event.data);
|
||||
updateDisplayPreview(data);
|
||||
};
|
||||
|
||||
// Connection status
|
||||
statsSource.addEventListener('open', function() {
|
||||
document.getElementById('connection-status').innerHTML = `
|
||||
<div class="w-2 h-2 bg-green-500 rounded-full"></div>
|
||||
<span class="text-gray-600">Connected</span>
|
||||
`;
|
||||
});
|
||||
function _setConnectionStatus(connected, reconnecting) {
|
||||
const el = document.getElementById('connection-status');
|
||||
if (!el) return;
|
||||
if (connected) {
|
||||
el.innerHTML = `
|
||||
<div class="w-2 h-2 bg-green-500 rounded-full"></div>
|
||||
<span class="text-gray-600">Connected</span>
|
||||
`;
|
||||
} else if (reconnecting) {
|
||||
el.innerHTML = `
|
||||
<div class="w-2 h-2 bg-yellow-500 rounded-full animate-pulse"></div>
|
||||
<span class="text-gray-600">Reconnecting…</span>
|
||||
`;
|
||||
} else {
|
||||
el.innerHTML = `
|
||||
<div class="w-2 h-2 bg-red-500 rounded-full"></div>
|
||||
<span class="text-gray-600" title="Connection lost — try refreshing the page">Disconnected</span>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
statsSource.addEventListener('error', function() {
|
||||
document.getElementById('connection-status').innerHTML = `
|
||||
<div class="w-2 h-2 bg-red-500 rounded-full"></div>
|
||||
<span class="text-gray-600">Disconnected</span>
|
||||
`;
|
||||
});
|
||||
var _statsErrorCount = 0;
|
||||
|
||||
// Named on window so reconnectSSE() in app.js can reattach them after
|
||||
// replacing the EventSource instances.
|
||||
window._statsOpenHandler = function() {
|
||||
_statsErrorCount = 0;
|
||||
_setConnectionStatus(true, false);
|
||||
};
|
||||
window._statsErrorHandler = function() {
|
||||
_statsErrorCount++;
|
||||
// EventSource readyState 0 = CONNECTING (auto-retrying), 2 = CLOSED
|
||||
var reconnecting = window.statsSource.readyState === EventSource.CONNECTING;
|
||||
_setConnectionStatus(false, reconnecting && _statsErrorCount <= 3);
|
||||
};
|
||||
window._displayErrorHandler = function() {
|
||||
// Display stream errors don't change the status badge but log to console
|
||||
// so failures aren't completely silent.
|
||||
console.warn('LEDMatrix: display preview stream error (readyState=' + window.displaySource.readyState + ')');
|
||||
};
|
||||
|
||||
window.statsSource.addEventListener('open', window._statsOpenHandler);
|
||||
window.statsSource.addEventListener('error', window._statsErrorHandler);
|
||||
window.displaySource.addEventListener('error', window._displayErrorHandler);
|
||||
|
||||
function updateSystemStats(data) {
|
||||
// Update CPU in header
|
||||
|
||||
Reference in New Issue
Block a user