klubhaus/klubhaus-doorbell
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

snapshot

Browse Source
This commit is contained in:
David Gwilliam
2026-02-12 12:36:56 -08:00
parent 29a4832894
commit 14e774acc1
1 changed files with 281 additions and 381 deletions
Download Patch File Download Diff File Expand all files Collapse all files

662
sketches/doorbell/doorbell.html
View File

@@ -112,6 +112,8 @@
margin-bottom: 15px; margin-bottom: 15px;
letter-spacing: 1px; letter-spacing: 1px;
font-family: monospace; font-family: monospace;
white-space: pre-wrap;
line-height: 1.4;
} }
#backoffInfo { #backoffInfo {
@@ -244,66 +246,6 @@
#toast.error { #toast.error {
background: #f890e7; background: #f890e7;
} }
/* Admin panel styles */
.admin-toggle {
text-align: center;
margin-top: 20px;
padding: 10px;
font-size: 10px;
color: #555;
cursor: pointer;
letter-spacing: 1px;
text-transform: uppercase;
}
.admin-toggle:hover {
color: #888;
}
#adminPanel {
display: none;
background: #111;
border: 1px solid #333;
border-radius: 8px;
padding: 15px;
margin-top: 10px;
}
#adminPanel.visible {
display: block;
}
.admin-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.admin-btn {
padding: 12px;
font-size: 11px;
background: #1a1a1a;
border: 1px solid #444;
color: #888;
border-radius: 6px;
cursor: pointer;
}
.admin-btn:hover {
border-color: #0bd3d3;
color: #0bd3d3;
}
.admin-btn.danger {
border-color: #f890e7;
color: #f890e7;
}
.admin-btn.danger:hover {
background: #f890e7;
color: #000;
}
</style> </style>
</head> </head>
<body> <body>
@@ -328,43 +270,21 @@
<button id="silence" onclick="sendSilence()">Silence</button> <button id="silence" onclick="sendSilence()">Silence</button>
</div> </div>
<!-- Admin Panel -->
<div class="admin-toggle" onclick="toggleAdmin()">⚙ Admin</div>
<div id="adminPanel">
<div class="admin-grid">
<button class="admin-btn" onclick="sendAdmin('MODE_SCREEN')">Screen Mode</button>
<button class="admin-btn" onclick="sendAdmin('MODE_LED')">LED Mode</button>
<button class="admin-btn" onclick="sendAdmin('SILENCE')">Force Silence</button>
<button class="admin-btn" onclick="sendAdmin('PING')">Ping Device</button>
<button class="admin-btn danger" onclick="sendAdmin('REBOOT')">Reboot</button>
<button class="admin-btn" onclick="setLogLevel('DEBUG')">Log: Debug</button>
<button class="admin-btn" onclick="setLogLevel('INFO')">Log: Info</button>
<button class="admin-btn" onclick="setLogLevel('WARN')">Log: Warn</button>
<button class="admin-btn" onclick="setLogLevel('ERROR')">Log: Error</button>
<button class="admin-btn" onclick="setLogLevel('NONE')">Log: Off</button> <button class="admin-btn" onclick="showHelp()">Help</button>
</div>
</div>
<div id="toast">Sent</div> <div id="toast">Sent</div>
<script> <script>
// ============== TOPIC URLS ============== // ============== CONFIG ==============
const COMMAND_POST_URL = 'https://ntfy.sh/ALERT_klubhaus_topic'; const COMMAND_POST_URL = 'https://ntfy.sh/ALERT_klubhaus_topic';
const SILENCE_POST_URL = 'https://ntfy.sh/SILENCE_klubhaus_topic'; const SILENCE_POST_URL = 'https://ntfy.sh/SILENCE_klubhaus_topic';
const METRICS_POST_URL = 'https://ntfy.sh/METRICS_klubhaus_topic'; const METRICS_POST_URL = 'https://ntfy.sh/METRICS_klubhaus_topic';
const ADMIN_POST_URL = 'https://ntfy.sh/ADMIN_klubhaus_topic'; // NEW
const STATUS_WS_URL = 'wss://ntfy.sh/STATUS_klubhaus_topic/ws'; const STATUS_WS_URL = 'wss://ntfy.sh/STATUS_klubhaus_topic/ws';
// ============== BACKOFF CONFIGURATION ============== const ACTIVE_DURATION = 180000; // 3 min full speed after interaction
const ACTIVE_DURATION = 180000; const BASE_INTERVAL = 5000; // 5s when active
const BASE_INTERVAL = 5000; const BACKOFF_INTERVALS = [10000, 30000, 60000, 120000, 300000]; // 10s, 30s, 1m, 2m, 5m
const BACKOFF_INTERVALS = [ const LATENCY_WINDOW_SIZE = 100;
10000, const METRICS_MIN_INTERVAL = 5000; // Never faster than 5s
30000, const METRICS_MAX_INTERVAL = 300000; // Never slower than 5m
60000,
120000,
300000
];
// ============== CLIENT ID ============== // ============== CLIENT ID ==============
function getOrCreateClientId() { function getOrCreateClientId() {
@@ -378,7 +298,6 @@
new Date().getTimezoneOffset(), new Date().getTimezoneOffset(),
Math.random().toString(36).substring(2, 8) Math.random().toString(36).substring(2, 8)
].join('|'); ].join('|');
id = 'web-' + hashString(seed).substring(0, 12); id = 'web-' + hashString(seed).substring(0, 12);
localStorage.setItem('klubhaus_client_id', id); localStorage.setItem('klubhaus_client_id', id);
} }
@@ -396,69 +315,85 @@
const CLIENT_ID = getOrCreateClientId(); const CLIENT_ID = getOrCreateClientId();
// ============== METRICS ============== // ============== PROMETHEUS-STYLE METRICS ==============
function loadMetrics() { const counters = { sent: 0, success: 0, confirmed: 0 };
const saved = localStorage.getItem('klubhaus_metrics'); const latencies = { success: [], confirmed: [] };
const inFlight = new Map();
function loadCounters() {
const saved = localStorage.getItem('klubhaus_counters');
if (saved) { if (saved) {
try { try {
const parsed = JSON.parse(saved); const parsed = JSON.parse(saved);
return { counters.sent = parsed.sent || 0;
totalPosted: parsed.totalPosted || 0, counters.success = parsed.success || 0;
totalConfirmed: parsed.totalConfirmed || 0, counters.confirmed = parsed.confirmed || 0;
totalReceived: parsed.totalReceived || 0,
totalErrors: parsed.totalErrors || 0,
roundTripMs: parsed.roundTripMs || [],
sessionStart: parsed.sessionStart || Date.now()
};
} catch (e) { } catch (e) {
console.error('Failed to load metrics:', e); console.error('Failed to load counters:', e);
} }
} }
}
function saveCounters() {
localStorage.setItem('klubhaus_counters', JSON.stringify(counters));
}
function recordLatency(window, ms) {
if (ms <= 0 || ms > 60000) return;
latencies[window].push(ms);
if (latencies[window].length > LATENCY_WINDOW_SIZE) {
latencies[window].shift();
}
}
function getLatencyStats(window) {
const arr = latencies[window];
if (arr.length === 0) return { count: 0, avg: 0, p50: 0, p95: 0, min: 0, max: 0 };
const sorted = [...arr].sort((a, b) => a - b);
const sum = arr.reduce((a, b) => a + b, 0);
return { return {
totalPosted: 0, count: arr.length,
totalConfirmed: 0, avg: Math.round(sum / arr.length),
totalReceived: 0, p50: sorted[Math.floor(sorted.length * 0.5)],
totalErrors: 0, p95: sorted[Math.floor(sorted.length * 0.95)] || sorted[sorted.length - 1],
roundTripMs: [], min: sorted[0],
sessionStart: Date.now() max: sorted[sorted.length - 1]
}; };
} }
function saveMetrics() { function generateMessageId() {
localStorage.setItem('klubhaus_metrics', JSON.stringify(metrics)); return CLIENT_ID + '-' + Date.now().toString(36) + '-' + Math.random().toString(36).substring(2, 6);
} }
const metrics = loadMetrics();
// ============== BACKOFF STATE ============== // ============== BACKOFF STATE ==============
let lastInteraction = Date.now(); let lastInteraction = Date.now();
let currentInterval = BASE_INTERVAL;
let ws = null; let ws = null;
let isProcessing = false; let isProcessing = false;
let lastConfirmedMessage = ''; let metricsTimerId = null;
let metricsIntervalId = null; let metricsNextScheduledTime = 0;
function recordInteraction() { function recordInteraction() {
const wasIdle = (Date.now() - lastInteraction) >= ACTIVE_DURATION;
lastInteraction = Date.now(); lastInteraction = Date.now();
currentInterval = BASE_INTERVAL;
if (wasIdle) {
console.log('[BACKOFF] Reset to active mode (interaction detected)');
rescheduleMetrics(); // Immediate reschedule to faster interval
}
updateBackoffDisplay(); updateBackoffDisplay();
console.log('Interaction recorded, speed: 100%');
} }
function getCurrentInterval() { function getCurrentInterval() {
const idleTime = Date.now() - lastInteraction; const idleTime = Date.now() - lastInteraction;
if (idleTime < ACTIVE_DURATION) return BASE_INTERVAL;
if (idleTime < ACTIVE_DURATION) {
return BASE_INTERVAL;
}
const idleMinutes = (idleTime - ACTIVE_DURATION) / 60000; const idleMinutes = (idleTime - ACTIVE_DURATION) / 60000;
if (idleMinutes < 5) return BACKOFF_INTERVALS[0]; // 10s
if (idleMinutes < 5) return BACKOFF_INTERVALS[0]; if (idleMinutes < 10) return BACKOFF_INTERVALS[1]; // 30s
if (idleMinutes < 10) return BACKOFF_INTERVALS[1]; if (idleMinutes < 20) return BACKOFF_INTERVALS[2]; // 60s
if (idleMinutes < 20) return BACKOFF_INTERVALS[2]; if (idleMinutes < 40) return BACKOFF_INTERVALS[3]; // 120s
if (idleMinutes < 40) return BACKOFF_INTERVALS[3]; return BACKOFF_INTERVALS[4]; // 300s
return BACKOFF_INTERVALS[4];
} }
function updateBackoffDisplay() { function updateBackoffDisplay() {
@@ -468,31 +403,29 @@
if (idleTime < ACTIVE_DURATION) { if (idleTime < ACTIVE_DURATION) {
const remaining = Math.ceil((ACTIVE_DURATION - idleTime) / 1000); const remaining = Math.ceil((ACTIVE_DURATION - idleTime) / 1000);
el.textContent = `Active mode: ${remaining}s remaining`; el.textContent = `ACTIVE: ${remaining}s | interval: ${interval/1000}s`;
el.style.color = '#64e8ba'; el.style.color = '#64e8ba';
} else { } else {
const minutes = Math.floor((idleTime - ACTIVE_DURATION) / 60000); const minutes = Math.floor((idleTime - ACTIVE_DURATION) / 60000);
el.textContent = `Idle ${minutes}min | Poll: ${interval/1000}s`; el.textContent = `idle:${minutes}m | interval:${interval/1000}s`;
el.style.color = '#555'; el.style.color = '#555';
} }
} }
// Update display every 10s to show countdown
setInterval(updateBackoffDisplay, 10000); setInterval(updateBackoffDisplay, 10000);
// ============== WEBSOCKET ============== // ============== WEBSOCKET ==============
function connectWebSocket() { function connectWebSocket() {
const connEl = document.getElementById('connection'); const connEl = document.getElementById('connection');
const interval = getCurrentInterval();
connEl.className = 'connecting'; connEl.className = 'connecting';
connEl.textContent = `WebSocket: connecting (poll: ${interval/1000}s)...`; connEl.textContent = 'WebSocket: connecting...';
ws = new WebSocket(STATUS_WS_URL); ws = new WebSocket(STATUS_WS_URL);
ws.onopen = () => { ws.onopen = () => {
connEl.className = 'connected'; connEl.className = 'connected';
connEl.textContent = 'WebSocket: connected'; connEl.textContent = 'WebSocket: connected';
console.log('WebSocket connected');
}; };
ws.onmessage = (event) => { ws.onmessage = (event) => {
@@ -504,27 +437,23 @@
} }
}; };
ws.onerror = (err) => { ws.onerror = () => {
connEl.className = 'error'; connEl.className = 'error';
connEl.textContent = 'WebSocket: error'; connEl.textContent = 'WebSocket: error';
console.error('WebSocket error:', err);
}; };
ws.onclose = () => { ws.onclose = () => {
connEl.className = 'backoff'; connEl.className = 'backoff';
const nextInterval = getCurrentInterval(); connEl.textContent = 'WebSocket: reconnecting...';
connEl.textContent = `WebSocket: reconnect in ${nextInterval/1000}s...`; setTimeout(connectWebSocket, getCurrentInterval());
console.log(`WebSocket closed, reconnecting in ${nextInterval}ms...`);
setTimeout(connectWebSocket, nextInterval);
}; };
} }
function handleStatusMessage(data) { // ============== MESSAGE LIFECYCLE ==============
if (data.event === 'open') { let lastSentMessage = '';
console.log('Subscription confirmed');
return;
}
function handleStatusMessage(data) {
if (data.event === 'open') return;
if (data.event !== 'message' || !data.message) return; if (data.event !== 'message' || !data.message) return;
let payload; let payload;
@@ -535,220 +464,140 @@
return; return;
} }
metrics.totalReceived++; const deviceState = payload.state;
saveMetrics(); const deviceMessage = payload.message || '';
updateStatusDisplay(payload); if (deviceState === 'ALERTING' && deviceMessage) {
updateMetricsDisplay(); for (const [msgId, tracking] of inFlight) {
if (tracking.message === deviceMessage && tracking.state === 'sent') {
const now = performance.now();
const successMs = Math.round(now - tracking.sentAt);
if (isProcessing && payload.state === 'ALERTING' && payload.message === lastConfirmedMessage) { tracking.state = 'success';
finishConfirmation(true, payload.message); tracking.successAt = now;
counters.success++;
recordLatency('success', successMs);
console.log(`[METRICS] success: ${msgId} latency=${successMs}ms`);
if (!tracking.confirmed) {
tracking.confirmed = true;
const confirmMs = Math.round(now - tracking.sentAt);
counters.confirmed++;
recordLatency('confirmed', confirmMs);
console.log(`[METRICS] confirmed: ${msgId} latency=${confirmMs}ms`);
if (isProcessing && tracking.message === lastSentMessage) {
finishConfirmation(true, tracking.message, confirmMs);
}
}
saveCounters();
updateMetricsDisplay();
break;
}
}
} }
} }
function updateStatusDisplay(data) {
const statusEl = document.getElementById('status');
const state = data.state || 'UNKNOWN';
const message = data.message || '';
if (isProcessing && state === 'ALERTING') return;
if (state === 'ALERTING') {
statusEl.className = 'alerting';
statusEl.innerHTML = `<span>ALERTING</span><span class="status-detail">${escapeHtml(message)}</span>`;
} else if (state === 'SILENT') {
statusEl.className = 'silent';
statusEl.innerHTML = `<span>SILENT</span><span class="status-detail">System Ready</span>`;
} else if (state === 'CONFIG') {
statusEl.className = 'confirming';
statusEl.innerHTML = `<span>CONFIG</span><span class="status-detail">${escapeHtml(message)}</span>`;
setTimeout(() => updateStatusDisplay({state: 'SILENT'}), 2000);
} else {
statusEl.className = 'offline';
statusEl.innerHTML = `<span>UNKNOWN</span>`;
}
}
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
// ============== ALERT SENDING ============== // ============== ALERT SENDING ==============
async function sendAlert(message) { async function sendAlert(message) {
recordInteraction(); recordInteraction();
if (isProcessing) return; if (isProcessing) return;
isProcessing = true; isProcessing = true;
lastConfirmedMessage = message; lastSentMessage = message;
const statusEl = document.getElementById('status'); const statusEl = document.getElementById('status');
const startTime = performance.now(); const msgId = generateMessageId();
const sentAt = performance.now();
inFlight.set(msgId, {
message: message,
sentAt: sentAt,
state: 'sent',
confirmed: false
});
if (inFlight.size > 50) {
const oldest = inFlight.keys().next().value;
inFlight.delete(oldest);
}
counters.sent++;
saveCounters();
statusEl.className = 'sending'; statusEl.className = 'sending';
statusEl.innerHTML = `<span>SENDING</span><span class="status-detail">Posting...</span>`; statusEl.innerHTML = `<span>SENDING</span><span class="status-detail">${escapeHtml(message)}</span>`;
setButtonsDisabled(true); setButtonsDisabled(true);
updateMetricsDisplay();
try { try {
const response = await fetch(COMMAND_POST_URL, { const response = await fetch(COMMAND_POST_URL, {
method: 'POST', method: 'POST',
body: message, body: message,
headers: { 'Title': 'KLUBHAUS ALERT' } headers: {
'Title': 'KLUBHAUS ALERT',
'X-Klubhaus-Id': msgId
}
}); });
metrics.totalPosted++;
saveMetrics();
if (!response.ok) throw new Error('HTTP ' + response.status); if (!response.ok) throw new Error('HTTP ' + response.status);
statusEl.className = 'confirming'; statusEl.className = 'confirming';
statusEl.innerHTML = `<span>CONFIRMING</span><span class="status-detail">Waiting for device...</span>`; statusEl.innerHTML = `<span>CONFIRMING</span><span class="status-detail">Waiting for device...</span>`;
const confirmed = await waitForWebSocketConfirmation(message, 8000); const confirmed = await waitForConfirmation(message, 10000);
const roundTripMs = Math.round(performance.now() - startTime); if (!confirmed) {
finishConfirmation(false, message, 0);
if (confirmed) {
finishConfirmation(true, message, roundTripMs);
} else {
statusEl.innerHTML = `<span>CHECKING</span><span class="status-detail">Fallback...</span>`;
const fallback = await fallbackPollForConfirmation(message, 3000);
finishConfirmation(fallback, message, roundTripMs);
} }
} catch (e) { } catch (e) {
metrics.totalErrors++;
saveMetrics();
statusEl.className = 'offline'; statusEl.className = 'offline';
statusEl.innerHTML = `<span>FAILED</span><span class="status-detail">${escapeHtml(e.message)}</span>`; statusEl.innerHTML = `<span>FAILED</span><span class="status-detail">${escapeHtml(e.message)}</span>`;
showToast('NETWORK ERROR', true); showToast('NETWORK ERROR', true);
isProcessing = false; isProcessing = false;
setButtonsDisabled(false); setButtonsDisabled(false);
updateMetricsDisplay();
}
}
function waitForWebSocketConfirmation(expectedMessage, timeoutMs) {
return new Promise(resolve => {
const deadline = Date.now() + timeoutMs;
const check = setInterval(() => {
if (!isProcessing || Date.now() > deadline) {
clearInterval(check);
resolve(!isProcessing);
}
}, 100);
});
}
async function fallbackPollForConfirmation(expectedMessage, timeoutMs) {
const deadline = Date.now() + timeoutMs;
while (Date.now() < deadline) {
try {
const response = await fetch('https://ntfy.sh/STATUS_klubhaus_topic/json', {
signal: AbortSignal.timeout(3000)
});
if (!response.ok) continue;
const text = await response.text();
const lines = text.split('\n').filter(l => l.trim());
if (lines.length === 0) continue;
const data = JSON.parse(lines[0]);
if (data.state === 'ALERTING' && data.message === expectedMessage) {
return true;
}
} catch (e) {}
await sleep(500);
}
return false;
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
function finishConfirmation(success, message, roundTripMs = 0) {
isProcessing = false;
setButtonsDisabled(false);
if (success) {
metrics.totalConfirmed++;
if (roundTripMs > 0) {
metrics.roundTripMs.push(roundTripMs);
if (metrics.roundTripMs.length > 10) metrics.roundTripMs.shift();
}
saveMetrics();
showToast(`ALERT: ${message}${roundTripMs > 0 ? ' (' + roundTripMs + 'ms)' : ''}`);
publishSuccessMetric(message, roundTripMs, true);
} else {
showToast('POSTED — UNCONFIRMED', true);
publishSuccessMetric(message, roundTripMs, false);
} }
updateMetricsDisplay(); updateMetricsDisplay();
} }
async function publishSuccessMetric(message, roundTripMs, confirmed) { function waitForConfirmation(expectedMessage, timeoutMs) {
const payload = { return new Promise(resolve => {
client: CLIENT_ID, const deadline = performance.now() + timeoutMs;
timestamp: Date.now(), const check = setInterval(() => {
event: 'publish_success', for (const [msgId, tracking] of inFlight) {
message: message.substring(0, 20), if (tracking.message === expectedMessage && tracking.confirmed) {
roundTripMs: roundTripMs, clearInterval(check);
confirmed: confirmed resolve(true);
}; return;
}
try { }
await fetch(METRICS_POST_URL, { if (performance.now() > deadline) {
method: 'POST', clearInterval(check);
body: JSON.stringify(payload), resolve(false);
headers: { 'Content-Type': 'application/json' } }
}); }, 100);
} catch (e) {} });
} }
// ============== ADMIN COMMANDS ============== function finishConfirmation(success, message, roundTripMs) {
function toggleAdmin() { isProcessing = false;
const panel = document.getElementById('adminPanel'); setButtonsDisabled(false);
panel.classList.toggle('visible'); if (success) {
} showToast(`CONFIRMED: ${message} (${roundTripMs}ms)`);
} else {
async function sendAdmin(command) { showToast('SENT — TIMEOUT', true);
recordInteraction();
try {
const response = await fetch(ADMIN_POST_URL, {
method: 'POST',
body: command,
headers: { 'Title': 'KLUBHAUS ADMIN' }
});
if (response.ok) {
showToast(`ADMIN: ${command}`);
} else {
showToast('ADMIN FAILED', true);
}
} catch (e) {
showToast('NETWORK ERROR', true);
} }
} updateMetricsDisplay();
function showHelp() {
alert('Admin Commands:\n\n' +
'MODE_SCREEN - Use display normally\n' +
'MODE_LED - LED only (broken screen)\n' +
'SILENCE - Force silence\n' +
'PING - Test device connectivity\n' +
'REBOOT - Restart device');
} }
// ============== CUSTOM & SILENCE ============== // ============== CUSTOM & SILENCE ==============
function sendCustom() { function sendCustom() {
const input = document.getElementById('customInput'); const input = document.getElementById('customInput');
const message = input.value.trim().toUpperCase(); const message = input.value.trim().toUpperCase();
if (message.length === 0) { if (message.length === 0) {
showToast('ENTER MESSAGE', true); showToast('ENTER MESSAGE', true);
return; return;
@@ -757,14 +606,12 @@
showToast('TOO LONG — MAX 60', true); showToast('TOO LONG — MAX 60', true);
return; return;
} }
sendAlert(message); sendAlert(message);
input.value = ''; input.value = '';
} }
async function sendSilence() { async function sendSilence() {
recordInteraction(); recordInteraction();
if (isProcessing) return; if (isProcessing) return;
isProcessing = true; isProcessing = true;
@@ -787,13 +634,11 @@
}) })
]); ]);
metrics.totalPosted += 2; counters.sent += 2;
saveMetrics(); saveCounters();
showToast('SILENCE SENT'); showToast('SILENCE SENT');
} catch (e) { } catch (e) {
metrics.totalErrors++;
saveMetrics();
showToast('SILENCE FAILED', true); showToast('SILENCE FAILED', true);
} finally { } finally {
isProcessing = false; isProcessing = false;
@@ -817,87 +662,141 @@
setTimeout(() => toast.className = '', 2500); setTimeout(() => toast.className = '', 2500);
} }
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
function updateMetricsDisplay() { function updateMetricsDisplay() {
const successStats = getLatencyStats('success');
const confirmStats = getLatencyStats('confirmed');
const el = document.getElementById('metrics'); const el = document.getElementById('metrics');
const avgRtt = metrics.roundTripMs.length > 0 el.innerHTML =
? Math.round(metrics.roundTripMs.reduce((a,b) => a+b, 0) / metrics.roundTripMs.length) `sent:${counters.sent} success:${counters.success} confirmed:${counters.confirmed}\n` +
: 0; `success_lat: n=${successStats.count} avg=${successStats.avg}ms p95=${successStats.p95}ms\n` +
const sessionHours = ((Date.now() - metrics.sessionStart) / 3600000).toFixed(1); `confirm_lat: n=${confirmStats.count} avg=${confirmStats.avg}ms p95=${confirmStats.p95}ms`;
el.textContent = `${CLIENT_ID} | posted:${metrics.totalPosted} confirmed:${metrics.totalConfirmed} errors:${metrics.totalErrors} avg:${avgRtt}ms | session:${sessionHours}h`;
} }
// ============== AGGREGATE METRICS ============== // ============== METRICS PUBLISH WITH CORRECT BACKOFF ==============
let lastPrometheusHash = null;
let lastPrometheusTime = 0;
let lastMetricsHash = null; function buildPrometheusPayload() {
let lastMetricsTimestamp = 0; const successStats = getLatencyStats('success');
const confirmStats = getLatencyStats('confirmed');
const now = Date.now();
function hashMetricsPayload(payload) { const lines = [
const canonical = JSON.stringify({ `# HELP klubhaus_sent_total Total messages sent to ntfy`,
client: payload.client, `# TYPE klubhaus_sent_total counter`,
totalPosted: payload.metrics.totalPosted, `klubhaus_sent_total{client="${CLIENT_ID}"} ${counters.sent} ${now}`,
totalConfirmed: payload.metrics.totalConfirmed,
totalReceived: payload.metrics.totalReceived,
totalErrors: payload.metrics.totalErrors,
avgRoundTripMs: payload.metrics.avgRoundTripMs
});
let hash = 0x811c9dc5; `# HELP klubhaus_success_total Messages confirmed in queue`,
for (let i = 0; i < canonical.length; i++) { `# TYPE klubhaus_success_total counter`,
hash ^= canonical.charCodeAt(i); `klubhaus_success_total{client="${CLIENT_ID}"} ${counters.success} ${now}`,
hash += (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24);
`# HELP klubhaus_confirmed_total Messages confirmed by device state change`,
`# TYPE klubhaus_confirmed_total counter`,
`klubhaus_confirmed_total{client="${CLIENT_ID}"} ${counters.confirmed} ${now}`,
`# HELP klubhaus_success_latency_ms Time from send to queue visibility`,
`# TYPE klubhaus_success_latency_ms summary`,
`klubhaus_success_latency_ms{client="${CLIENT_ID}",quantile="0.5"} ${successStats.p50}`,
`klubhaus_success_latency_ms{client="${CLIENT_ID}",quantile="0.95"} ${successStats.p95}`,
`klubhaus_success_latency_ms_sum{client="${CLIENT_ID}"} ${latencies.success.reduce((a,b)=>a+b,0)}`,
`klubhaus_success_latency_ms_count{client="${CLIENT_ID}"} ${successStats.count}`,
`# HELP klubhaus_confirm_latency_ms Time from send to device confirmation`,
`# TYPE klubhaus_confirm_latency_ms summary`,
`klubhaus_confirm_latency_ms{client="${CLIENT_ID}",quantile="0.5"} ${confirmStats.p50}`,
`klubhaus_confirm_latency_ms{client="${CLIENT_ID}",quantile="0.95"} ${confirmStats.p95}`,
`klubhaus_confirm_latency_ms_sum{client="${CLIENT_ID}"} ${latencies.confirmed.reduce((a,b)=>a+b,0)}`,
`klubhaus_confirm_latency_ms_count{client="${CLIENT_ID}"} ${confirmStats.count}`
];
return lines.join('\n');
}
function hashStringSimple(str) {
let hash = 0;
for (let i = 0; i < str.length; i++) {
hash = ((hash << 5) - hash) + str.charCodeAt(i);
} }
return (hash >>> 0).toString(16); return hash.toString(16);
} }
function scheduleMetricsPublish() { // CRITICAL FIX: Single timer, rescheduled after each execution
if (metricsIntervalId) clearInterval(metricsIntervalId); function scheduleMetrics() {
const now = Date.now();
const interval = getCurrentInterval(); const interval = getCurrentInterval();
console.log(`Scheduling metrics publish: ${interval}ms`);
metricsIntervalId = setInterval(async () => { // Clear any existing timer
const payload = { if (metricsTimerId) {
client: CLIENT_ID, clearTimeout(metricsTimerId);
timestamp: Date.now(), metricsTimerId = null;
metrics: { }
totalPosted: metrics.totalPosted,
totalConfirmed: metrics.totalConfirmed,
totalReceived: metrics.totalReceived,
totalErrors: metrics.totalErrors,
avgRoundTripMs: metrics.roundTripMs.length > 0
? Math.round(metrics.roundTripMs.reduce((a,b) => a+b, 0) / metrics.roundTripMs.length)
: 0,
currentPollInterval: getCurrentInterval()
}
};
const currentHash = hashMetricsPayload(payload); metricsNextScheduledTime = now + interval;
const now = Date.now();
if (currentHash === lastMetricsHash && (now - lastMetricsTimestamp) < 300000) { console.log(`[METRICS] Scheduled in ${interval}ms (at ${new Date(metricsNextScheduledTime).toLocaleTimeString()})`);
console.log('Metrics unchanged, skipping emission');
} else {
try {
await fetch(METRICS_POST_URL, {
method: 'POST',
body: JSON.stringify(payload),
headers: { 'Content-Type': 'application/json' }
});
console.log('Aggregate metrics published');
lastMetricsHash = currentHash;
lastMetricsTimestamp = now;
} catch (e) {
console.error('Metrics publish failed:', e.message);
}
}
scheduleMetricsPublish();
metricsTimerId = setTimeout(() => {
publishMetricsAndReschedule();
}, interval); }, interval);
} }
function rescheduleMetrics() {
// Called on interaction to potentially speed up
const now = Date.now();
const newInterval = getCurrentInterval();
// Only reschedule if new interval is shorter than remaining time
const remaining = metricsNextScheduledTime - now;
if (newInterval < remaining - 1000) { // 1s threshold to avoid thrashing
console.log(`[METRICS] Rescheduling: ${remaining}ms -> ${newInterval}ms`);
scheduleMetrics();
}
}
async function publishMetricsAndReschedule() {
const payload = buildPrometheusPayload();
const hash = hashStringSimple(payload);
const now = Date.now();
// Deduplication: skip if unchanged and < 5min since last publish
const forcedPublishInterval = 300000; // 5 minutes
if (hash !== lastPrometheusHash || (now - lastPrometheusTime) >= forcedPublishInterval) {
try {
await fetch(METRICS_POST_URL, {
method: 'POST',
body: payload,
headers: { 'Content-Type': 'text/plain' }
});
console.log(`[METRICS] Published (${payload.length} bytes)`);
lastPrometheusHash = hash;
lastPrometheusTime = now;
} catch (e) {
console.error('[METRICS] Publish failed:', e.message);
}
} else {
console.log('[METRICS] Unchanged, skipped');
}
// CRITICAL: Schedule next run AFTER this one completes
// This ensures exactly one timer exists, with dynamic interval
const nextInterval = getCurrentInterval();
metricsNextScheduledTime = now + nextInterval;
console.log(`[METRICS] Next publish in ${nextInterval}ms`);
metricsTimerId = setTimeout(() => {
publishMetricsAndReschedule();
}, nextInterval);
}
// ============== INIT ============== // ============== INIT ==============
document.getElementById('customInput').addEventListener('keypress', (e) => { document.getElementById('customInput').addEventListener('keypress', (e) => {
if (e.key === 'Enter') sendCustom(); if (e.key === 'Enter') sendCustom();
@@ -907,14 +806,15 @@
document.addEventListener('touchstart', recordInteraction); document.addEventListener('touchstart', recordInteraction);
document.addEventListener('keydown', recordInteraction); document.addEventListener('keydown', recordInteraction);
loadCounters();
connectWebSocket(); connectWebSocket();
scheduleMetricsPublish(); scheduleMetrics(); // Start metrics loop
updateMetricsDisplay(); updateMetricsDisplay();
updateBackoffDisplay(); updateBackoffDisplay();
console.log('KLUBHAUS ALERT v4.3 initialized'); console.log('KLUBHAUS ALERT v4.4 — Metrics with correct backoff');
console.log('Client ID:', CLIENT_ID); console.log('Client ID:', CLIENT_ID);
console.log('Loaded metrics:', metrics); console.log('Initial counters:', counters);
</script> </script>
</body> </body>
</html> </html>