SSE events bridge, PWA service worker, offline banner, lazy admin tabs
- New /api/events SSE endpoint (authed): pushes status every 5s and chat
on log-file mtime change (~1.5s poll). Heartbeat every 15s, hard-caps
each stream at 10min so the browser gets a clean auth refresh on
reconnect. Auto-aborts on client disconnect.
- Factored shared helpers out of the existing routes:
- lib/server-status.ts (probeStatus, reused by /api/status + SSE)
- lib/chat-log.ts (parseLogLine, readChatMessages, logMtime, reused by
/api/chat + SSE)
- EventsBridge client (mounted in Providers) opens one EventSource per
authed session and writes live data into the TanStack Query cache for
["status"] and ["chat"] — no refactor needed in consuming components,
they keep reading their usual query keys.
- Now that SSE pushes updates, polling intervals bumped: StatusCard and
ServerControls 10s -> 60s, ChatBridge 5s -> 30s. SSE handles realtime,
polling is safety fallback.
- OfflineBanner: sticky amber bar when navigator.onLine flips false.
- PWA: minimal public/sw.js with shell + asset cache (network-first for
HTML, stale-while-revalidate for static assets, never touches /api/*
or text/event-stream). ServiceWorkerRegister client registers it in
production only.
- AdminTabs now uses next/dynamic with skeleton fallbacks for Players /
Chat / Mods / Backups / Logs, keeping initial /admin bundle smaller.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
19d66c2de6
commit
359a12ef9d
14 changed files with 460 additions and 132 deletions
106
app/api/events/route.ts
Normal file
106
app/api/events/route.ts
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
import { NextRequest } from "next/server";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { probeStatus } from "@/lib/server-status";
|
||||
import { readChatMessages, logMtime } from "@/lib/chat-log";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
export const runtime = "nodejs";
|
||||
|
||||
const STATUS_INTERVAL_MS = 5000;
|
||||
const LOG_POLL_MS = 1500;
|
||||
const HEARTBEAT_MS = 15_000;
|
||||
const MAX_LIFETIME_MS = 10 * 60 * 1000;
|
||||
|
||||
export async function GET(req: NextRequest) {
|
||||
const session = await auth();
|
||||
if (!session) {
|
||||
return new Response(JSON.stringify({ error: "Unauthorized" }), {
|
||||
status: 403,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
});
|
||||
}
|
||||
|
||||
const encoder = new TextEncoder();
|
||||
|
||||
const stream = new ReadableStream({
|
||||
async start(controller) {
|
||||
let closed = false;
|
||||
const timers: ReturnType<typeof setTimeout>[] = [];
|
||||
const safeSend = (data: string) => {
|
||||
if (closed) return;
|
||||
try {
|
||||
controller.enqueue(encoder.encode(data));
|
||||
} catch {
|
||||
closed = true;
|
||||
}
|
||||
};
|
||||
const send = (event: string, payload: unknown) =>
|
||||
safeSend(`event: ${event}\ndata: ${JSON.stringify(payload)}\n\n`);
|
||||
const heartbeat = () => safeSend(`: hb ${Date.now()}\n\n`);
|
||||
|
||||
const cleanup = () => {
|
||||
if (closed) return;
|
||||
closed = true;
|
||||
for (const t of timers) clearTimeout(t);
|
||||
try {
|
||||
controller.close();
|
||||
} catch {}
|
||||
};
|
||||
req.signal.addEventListener("abort", cleanup);
|
||||
|
||||
// Initial payload
|
||||
try {
|
||||
const status = await probeStatus();
|
||||
send("status", status);
|
||||
const chat = readChatMessages(50);
|
||||
send("chat", chat);
|
||||
} catch {}
|
||||
|
||||
let lastLogMtime = logMtime();
|
||||
|
||||
const pollStatus = async () => {
|
||||
if (closed) return;
|
||||
try {
|
||||
const status = await probeStatus();
|
||||
send("status", status);
|
||||
} catch {}
|
||||
if (!closed) timers.push(setTimeout(pollStatus, STATUS_INTERVAL_MS));
|
||||
};
|
||||
|
||||
const pollLog = () => {
|
||||
if (closed) return;
|
||||
try {
|
||||
const mt = logMtime();
|
||||
if (mt && mt !== lastLogMtime) {
|
||||
lastLogMtime = mt;
|
||||
const chat = readChatMessages(50);
|
||||
send("chat", chat);
|
||||
}
|
||||
} catch {}
|
||||
if (!closed) timers.push(setTimeout(pollLog, LOG_POLL_MS));
|
||||
};
|
||||
|
||||
const beat = () => {
|
||||
if (closed) return;
|
||||
heartbeat();
|
||||
if (!closed) timers.push(setTimeout(beat, HEARTBEAT_MS));
|
||||
};
|
||||
|
||||
timers.push(setTimeout(pollStatus, STATUS_INTERVAL_MS));
|
||||
timers.push(setTimeout(pollLog, LOG_POLL_MS));
|
||||
timers.push(setTimeout(beat, HEARTBEAT_MS));
|
||||
|
||||
// Hard cap stream lifetime so auth/session stays fresh on reconnect
|
||||
timers.push(setTimeout(cleanup, MAX_LIFETIME_MS));
|
||||
},
|
||||
});
|
||||
|
||||
return new Response(stream, {
|
||||
headers: {
|
||||
"Content-Type": "text/event-stream; charset=utf-8",
|
||||
"Cache-Control": "no-cache, no-transform",
|
||||
Connection: "keep-alive",
|
||||
"X-Accel-Buffering": "no",
|
||||
},
|
||||
});
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue