- 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>
51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { useQueryClient } from "@tanstack/react-query";
|
|
import { useSession } from "next-auth/react";
|
|
import { useEffect } from "react";
|
|
|
|
export function EventsBridge() {
|
|
const { data: session, status } = useSession();
|
|
const queryClient = useQueryClient();
|
|
|
|
useEffect(() => {
|
|
if (status !== "authenticated" || !session) return;
|
|
if (typeof window === "undefined" || !("EventSource" in window)) return;
|
|
|
|
let closed = false;
|
|
let es: EventSource | null = null;
|
|
|
|
const connect = () => {
|
|
if (closed) return;
|
|
es = new EventSource("/api/events");
|
|
|
|
es.addEventListener("status", (e: MessageEvent) => {
|
|
try {
|
|
queryClient.setQueryData(["status"], JSON.parse(e.data));
|
|
} catch {}
|
|
});
|
|
es.addEventListener("chat", (e: MessageEvent) => {
|
|
try {
|
|
queryClient.setQueryData(["chat"], JSON.parse(e.data));
|
|
} catch {}
|
|
});
|
|
|
|
es.onerror = () => {
|
|
// Browser auto-retries, but if the server closed after the 10m cap
|
|
// we want a clean reconnect rather than tight reconnect loops.
|
|
if (closed) return;
|
|
es?.close();
|
|
es = null;
|
|
setTimeout(connect, 3000);
|
|
};
|
|
};
|
|
|
|
connect();
|
|
return () => {
|
|
closed = true;
|
|
es?.close();
|
|
};
|
|
}, [status, session, queryClient]);
|
|
|
|
return null;
|
|
}
|