feat: live docker/database widgets over WebSocket (M2)
Adds a custom server.ts (http server + Next request handler + a noServer:true WebSocket server on /ws) so the app can push live data without polling. A CollectorScheduler runs one interval-based job per docker/database widget instance, backed by dockerode against /var/run/docker.sock, and reconciles jobs when config.yml changes. Config hot-reload is now fully wired: chokidar watches config.yml/.env, re-validates on change, and broadcasts config:update (or a non-destructive config:error, keeping the last-good config) to every connected browser. The client subscribes to per-widget topics over a single shared WebSocket with exponential-backoff reconnect and last-result caching for instant resubscribe. Verified end-to-end against real throwaway containers (nginx, redis): live CPU/mem/uptime/health streamed over the socket, interval changes picked up without a server restart, and a broken config.yml correctly falls back to the last-valid config instead of crashing the app.
This commit is contained in:
@@ -0,0 +1,136 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import type { Config } from "@/lib/config/schema";
|
||||
import type { WidgetResult } from "@/lib/types/widget-result";
|
||||
|
||||
interface Envelope {
|
||||
topic: string;
|
||||
type: string;
|
||||
ts: number;
|
||||
data: unknown;
|
||||
}
|
||||
|
||||
type TopicListener = (envelope: Envelope) => void;
|
||||
|
||||
let sharedSocket: WebSocket | null = null;
|
||||
let refCount = 0;
|
||||
let reconnectAttempts = 0;
|
||||
let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
const topicListeners = new Map<string, Set<TopicListener>>();
|
||||
const pendingWidgetSubscriptions = new Set<string>();
|
||||
|
||||
function getSocketUrl(): string {
|
||||
const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
|
||||
return `${protocol}//${window.location.host}/ws`;
|
||||
}
|
||||
|
||||
function scheduleReconnect(): void {
|
||||
if (reconnectTimer || refCount === 0) return;
|
||||
const delay = Math.min(30_000, 1_000 * 2 ** reconnectAttempts);
|
||||
reconnectAttempts += 1;
|
||||
reconnectTimer = setTimeout(() => {
|
||||
reconnectTimer = null;
|
||||
if (refCount > 0) ensureSocket();
|
||||
}, delay);
|
||||
}
|
||||
|
||||
function ensureSocket(): WebSocket {
|
||||
if (sharedSocket && sharedSocket.readyState <= WebSocket.OPEN) {
|
||||
return sharedSocket;
|
||||
}
|
||||
|
||||
const socket = new WebSocket(getSocketUrl());
|
||||
sharedSocket = socket;
|
||||
|
||||
socket.addEventListener("open", () => {
|
||||
reconnectAttempts = 0;
|
||||
for (const widgetId of pendingWidgetSubscriptions) {
|
||||
socket.send(JSON.stringify({ action: "subscribe", widgetId }));
|
||||
}
|
||||
});
|
||||
|
||||
socket.addEventListener("message", (event) => {
|
||||
let envelope: Envelope;
|
||||
try {
|
||||
envelope = JSON.parse(event.data);
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
const listeners = topicListeners.get(envelope.topic);
|
||||
if (!listeners) return;
|
||||
for (const listener of listeners) listener(envelope);
|
||||
});
|
||||
|
||||
socket.addEventListener("close", () => {
|
||||
if (sharedSocket === socket) sharedSocket = null;
|
||||
scheduleReconnect();
|
||||
});
|
||||
|
||||
return socket;
|
||||
}
|
||||
|
||||
function addTopicListener(topic: string, listener: TopicListener): () => void {
|
||||
let listeners = topicListeners.get(topic);
|
||||
if (!listeners) {
|
||||
listeners = new Set();
|
||||
topicListeners.set(topic, listeners);
|
||||
}
|
||||
listeners.add(listener);
|
||||
return () => {
|
||||
listeners?.delete(listener);
|
||||
if (listeners && listeners.size === 0) topicListeners.delete(topic);
|
||||
};
|
||||
}
|
||||
|
||||
export function useWidgetSubscription(widgetId: string): WidgetResult | null {
|
||||
const [result, setResult] = useState<WidgetResult | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
refCount += 1;
|
||||
pendingWidgetSubscriptions.add(widgetId);
|
||||
const socket = ensureSocket();
|
||||
const topic = `widget:${widgetId}`;
|
||||
|
||||
const removeListener = addTopicListener(topic, (envelope) => {
|
||||
if (envelope.type === "result") setResult(envelope.data as WidgetResult);
|
||||
});
|
||||
|
||||
if (socket.readyState === WebSocket.OPEN) {
|
||||
socket.send(JSON.stringify({ action: "subscribe", widgetId }));
|
||||
}
|
||||
|
||||
return () => {
|
||||
refCount -= 1;
|
||||
removeListener();
|
||||
if (!topicListeners.has(topic)) {
|
||||
pendingWidgetSubscriptions.delete(widgetId);
|
||||
if (socket.readyState === WebSocket.OPEN) {
|
||||
socket.send(JSON.stringify({ action: "unsubscribe", widgetId }));
|
||||
}
|
||||
}
|
||||
};
|
||||
}, [widgetId]);
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
export function useConfigSubscription(initial: Config): Config {
|
||||
const [config, setConfig] = useState(initial);
|
||||
|
||||
useEffect(() => {
|
||||
refCount += 1;
|
||||
ensureSocket();
|
||||
|
||||
const removeListener = addTopicListener("config", (envelope) => {
|
||||
if (envelope.type === "config:update") setConfig(envelope.data as Config);
|
||||
});
|
||||
|
||||
return () => {
|
||||
refCount -= 1;
|
||||
removeListener();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return config;
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
import type { Server as HttpServer } from "node:http";
|
||||
import { WebSocket, WebSocketServer } from "ws";
|
||||
import { collectorScheduler } from "@/lib/collectors/scheduler";
|
||||
import { configStore, type ConfigError } from "@/lib/config/loader";
|
||||
import type { Config } from "@/lib/config/schema";
|
||||
import type { WidgetResult } from "@/lib/types/widget-result";
|
||||
|
||||
type Envelope =
|
||||
| { topic: string; type: "result"; ts: number; data: WidgetResult }
|
||||
| { topic: "config"; type: "config:update"; ts: number; data: Config }
|
||||
| { topic: "config"; type: "config:error"; ts: number; data: { message: string } };
|
||||
|
||||
function send(socket: WebSocket, envelope: Envelope): void {
|
||||
if (socket.readyState === WebSocket.OPEN) {
|
||||
socket.send(JSON.stringify(envelope));
|
||||
}
|
||||
}
|
||||
|
||||
export function attachWebSocketServer(httpServer: HttpServer): WebSocketServer {
|
||||
const wss = new WebSocketServer({ noServer: true });
|
||||
const subscriptions = new Map<string, Set<WebSocket>>();
|
||||
const allSockets = new Set<WebSocket>();
|
||||
|
||||
function subscribe(socket: WebSocket, widgetId: string): void {
|
||||
let set = subscriptions.get(widgetId);
|
||||
if (!set) {
|
||||
set = new Set();
|
||||
subscriptions.set(widgetId, set);
|
||||
}
|
||||
set.add(socket);
|
||||
const cached = collectorScheduler.getLastResult(widgetId);
|
||||
if (cached) {
|
||||
send(socket, { topic: `widget:${widgetId}`, type: "result", ts: Date.now(), data: cached });
|
||||
}
|
||||
}
|
||||
|
||||
function unsubscribe(socket: WebSocket, widgetId: string): void {
|
||||
subscriptions.get(widgetId)?.delete(socket);
|
||||
}
|
||||
|
||||
function cleanupSocket(socket: WebSocket): void {
|
||||
allSockets.delete(socket);
|
||||
for (const set of subscriptions.values()) set.delete(socket);
|
||||
}
|
||||
|
||||
wss.on("connection", (socket) => {
|
||||
allSockets.add(socket);
|
||||
|
||||
try {
|
||||
const config = configStore.get();
|
||||
send(socket, { topic: "config", type: "config:update", ts: Date.now(), data: config });
|
||||
} catch {
|
||||
// no valid config loaded yet; client keeps its SSR-seeded config until one arrives
|
||||
}
|
||||
|
||||
socket.on("message", (raw) => {
|
||||
let message: { action?: string; widgetId?: string };
|
||||
try {
|
||||
message = JSON.parse(raw.toString());
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
if (message.action === "subscribe" && typeof message.widgetId === "string") {
|
||||
subscribe(socket, message.widgetId);
|
||||
} else if (message.action === "unsubscribe" && typeof message.widgetId === "string") {
|
||||
unsubscribe(socket, message.widgetId);
|
||||
}
|
||||
});
|
||||
|
||||
socket.on("close", () => cleanupSocket(socket));
|
||||
socket.on("error", () => cleanupSocket(socket));
|
||||
});
|
||||
|
||||
collectorScheduler.onResult((widgetId, result) => {
|
||||
const set = subscriptions.get(widgetId);
|
||||
if (!set || set.size === 0) return;
|
||||
const envelope: Envelope = { topic: `widget:${widgetId}`, type: "result", ts: Date.now(), data: result };
|
||||
for (const socket of set) send(socket, envelope);
|
||||
});
|
||||
|
||||
configStore.onUpdate((config) => {
|
||||
const envelope: Envelope = { topic: "config", type: "config:update", ts: Date.now(), data: config };
|
||||
for (const socket of allSockets) send(socket, envelope);
|
||||
});
|
||||
|
||||
configStore.onError((error: ConfigError) => {
|
||||
const envelope: Envelope = {
|
||||
topic: "config",
|
||||
type: "config:error",
|
||||
ts: Date.now(),
|
||||
data: { message: error.message },
|
||||
};
|
||||
for (const socket of allSockets) send(socket, envelope);
|
||||
});
|
||||
|
||||
httpServer.on("close", () => wss.close());
|
||||
|
||||
return wss;
|
||||
}
|
||||
Reference in New Issue
Block a user