forked from syntaxbullet/AuroraBot-discord
feat: implement real-time dashboard updates via WebSockets
This commit is contained in:
syntaxbullet
@@ -40,8 +40,7 @@ interface UseDashboardStatsResult {
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom hook to fetch and auto-refresh dashboard statistics
|
||||
* Polls the API every 30 seconds
|
||||
* Custom hook to fetch and auto-refresh dashboard statistics using WebSockets with HTTP fallback
|
||||
*/
|
||||
export function useDashboardStats(): UseDashboardStatsResult {
|
||||
const [stats, setStats] = useState<DashboardStats | null>(null);
|
||||
@@ -51,11 +50,7 @@ export function useDashboardStats(): UseDashboardStatsResult {
|
||||
const fetchStats = async () => {
|
||||
try {
|
||||
const response = await fetch("/api/stats");
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
|
||||
const data = await response.json();
|
||||
setStats(data);
|
||||
setError(null);
|
||||
@@ -71,11 +66,65 @@ export function useDashboardStats(): UseDashboardStatsResult {
|
||||
// Initial fetch
|
||||
fetchStats();
|
||||
|
||||
// Set up polling every 30 seconds
|
||||
const interval = setInterval(fetchStats, 30000);
|
||||
// WebSocket setup
|
||||
const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
|
||||
const wsUrl = `${protocol}//${window.location.host}/ws`;
|
||||
let socket: WebSocket | null = null;
|
||||
let reconnectTimeout: Timer | null = null;
|
||||
|
||||
const connect = () => {
|
||||
socket = new WebSocket(wsUrl);
|
||||
|
||||
socket.onopen = () => {
|
||||
console.log("🟢 [WS] Connected to dashboard live stream");
|
||||
setError(null);
|
||||
if (reconnectTimeout) {
|
||||
clearTimeout(reconnectTimeout);
|
||||
reconnectTimeout = null;
|
||||
}
|
||||
};
|
||||
|
||||
socket.onmessage = (event) => {
|
||||
try {
|
||||
const message = JSON.parse(event.data);
|
||||
|
||||
if (message.type === "STATS_UPDATE") {
|
||||
setStats(message.data);
|
||||
} else if (message.type === "NEW_EVENT") {
|
||||
setStats(prev => {
|
||||
if (!prev) return prev;
|
||||
return {
|
||||
...prev,
|
||||
recentEvents: [message.data, ...prev.recentEvents].slice(0, 10)
|
||||
};
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Error parsing WS message:", e);
|
||||
}
|
||||
};
|
||||
|
||||
socket.onclose = () => {
|
||||
console.log("🟠 [WS] Connection lost. Attempting reconnect in 5s...");
|
||||
reconnectTimeout = setTimeout(connect, 5000);
|
||||
};
|
||||
|
||||
socket.onerror = (err) => {
|
||||
console.error("🔴 [WS] Socket error:", err);
|
||||
socket?.close();
|
||||
};
|
||||
};
|
||||
|
||||
connect();
|
||||
|
||||
// Cleanup on unmount
|
||||
return () => clearInterval(interval);
|
||||
return () => {
|
||||
if (socket) {
|
||||
socket.onclose = null; // Prevent reconnect on intentional close
|
||||
socket.close();
|
||||
}
|
||||
if (reconnectTimeout) clearTimeout(reconnectTimeout);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return { stats, loading, error };
|
||||
|
||||
@@ -51,12 +51,22 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
|
||||
}
|
||||
}
|
||||
|
||||
// Interval for broadcasting stats to all connected WS clients
|
||||
let statsBroadcastInterval: Timer | undefined;
|
||||
|
||||
const server = serve({
|
||||
port,
|
||||
hostname,
|
||||
async fetch(req) {
|
||||
async fetch(req, server) {
|
||||
const url = new URL(req.url);
|
||||
|
||||
// Upgrade to WebSocket
|
||||
if (url.pathname === "/ws") {
|
||||
const success = server.upgrade(req);
|
||||
if (success) return undefined;
|
||||
return new Response("WebSocket upgrade failed", { status: 400 });
|
||||
}
|
||||
|
||||
// API routes
|
||||
if (url.pathname === "/api/health") {
|
||||
return Response.json({ status: "ok", timestamp: Date.now() });
|
||||
@@ -64,47 +74,7 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
|
||||
|
||||
if (url.pathname === "/api/stats") {
|
||||
try {
|
||||
// Import services (dynamic to avoid circular deps)
|
||||
const { dashboardService } = await import("@shared/modules/dashboard/dashboard.service");
|
||||
const { getClientStats } = await import("../../bot/lib/clientStats");
|
||||
|
||||
// Fetch all data in parallel
|
||||
const [clientStats, activeUsers, totalUsers, economyStats, recentEvents] = await Promise.all([
|
||||
Promise.resolve(getClientStats()),
|
||||
dashboardService.getActiveUserCount(),
|
||||
dashboardService.getTotalUserCount(),
|
||||
dashboardService.getEconomyStats(),
|
||||
dashboardService.getRecentEvents(10),
|
||||
]);
|
||||
|
||||
const stats = {
|
||||
bot: clientStats.bot,
|
||||
guilds: {
|
||||
count: clientStats.guilds,
|
||||
},
|
||||
users: {
|
||||
active: activeUsers,
|
||||
total: totalUsers,
|
||||
},
|
||||
commands: {
|
||||
total: clientStats.commandsRegistered,
|
||||
},
|
||||
ping: {
|
||||
avg: clientStats.ping,
|
||||
},
|
||||
economy: {
|
||||
totalWealth: economyStats.totalWealth.toString(),
|
||||
avgLevel: economyStats.avgLevel,
|
||||
topStreak: economyStats.topStreak,
|
||||
},
|
||||
recentEvents: recentEvents.map(event => ({
|
||||
...event,
|
||||
timestamp: event.timestamp.toISOString(),
|
||||
})),
|
||||
uptime: clientStats.uptime,
|
||||
lastCommandTimestamp: clientStats.lastCommandTimestamp,
|
||||
};
|
||||
|
||||
const stats = await getFullDashboardStats();
|
||||
return Response.json(stats);
|
||||
} catch (error) {
|
||||
console.error("Error fetching dashboard stats:", error);
|
||||
@@ -145,9 +115,93 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
|
||||
return new Response(Bun.file(join(distDir, "index.html")));
|
||||
},
|
||||
|
||||
websocket: {
|
||||
open(ws) {
|
||||
ws.subscribe("dashboard");
|
||||
console.log(`🔌 [WS] Client connected. Total: ${server.pendingWebSockets}`);
|
||||
|
||||
// Send initial stats
|
||||
getFullDashboardStats().then(stats => {
|
||||
ws.send(JSON.stringify({ type: "STATS_UPDATE", data: stats }));
|
||||
});
|
||||
|
||||
// Start broadcast interval if this is the first client
|
||||
if (!statsBroadcastInterval) {
|
||||
statsBroadcastInterval = setInterval(async () => {
|
||||
try {
|
||||
const stats = await getFullDashboardStats();
|
||||
server.publish("dashboard", JSON.stringify({ type: "STATS_UPDATE", data: stats }));
|
||||
} catch (error) {
|
||||
console.error("Error in stats broadcast:", error);
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
},
|
||||
message(ws, message) {
|
||||
// Handle messages if needed (e.g. heartbeat)
|
||||
try {
|
||||
const data = JSON.parse(message.toString());
|
||||
if (data.type === "PING") ws.send(JSON.stringify({ type: "PONG" }));
|
||||
} catch (e) { }
|
||||
},
|
||||
close(ws) {
|
||||
ws.unsubscribe("dashboard");
|
||||
console.log(`🔌 [WS] Client disconnected.`);
|
||||
|
||||
// Stop broadcast interval if no clients left
|
||||
if (server.pendingWebSockets === 0 && statsBroadcastInterval) {
|
||||
clearInterval(statsBroadcastInterval);
|
||||
statsBroadcastInterval = undefined;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
development: isDev,
|
||||
});
|
||||
|
||||
/**
|
||||
* Helper to fetch full dashboard stats object
|
||||
*/
|
||||
async function getFullDashboardStats() {
|
||||
// Import services (dynamic to avoid circular deps)
|
||||
const { dashboardService } = await import("@shared/modules/dashboard/dashboard.service");
|
||||
const { getClientStats } = await import("../../bot/lib/clientStats");
|
||||
|
||||
// Fetch all data in parallel
|
||||
const [clientStats, activeUsers, totalUsers, economyStats, recentEvents] = await Promise.all([
|
||||
Promise.resolve(getClientStats()),
|
||||
dashboardService.getActiveUserCount(),
|
||||
dashboardService.getTotalUserCount(),
|
||||
dashboardService.getEconomyStats(),
|
||||
dashboardService.getRecentEvents(10),
|
||||
]);
|
||||
|
||||
return {
|
||||
bot: clientStats.bot,
|
||||
guilds: { count: clientStats.guilds },
|
||||
users: { active: activeUsers, total: totalUsers },
|
||||
commands: { total: clientStats.commandsRegistered },
|
||||
ping: { avg: clientStats.ping },
|
||||
economy: {
|
||||
totalWealth: economyStats.totalWealth.toString(),
|
||||
avgLevel: economyStats.avgLevel,
|
||||
topStreak: economyStats.topStreak,
|
||||
},
|
||||
recentEvents: recentEvents.map(event => ({
|
||||
...event,
|
||||
timestamp: event.timestamp.toISOString(),
|
||||
})),
|
||||
uptime: clientStats.uptime,
|
||||
lastCommandTimestamp: clientStats.lastCommandTimestamp,
|
||||
};
|
||||
}
|
||||
|
||||
// Listen for real-time events from the system bus
|
||||
const { systemEvents, EVENTS } = await import("@shared/lib/events");
|
||||
systemEvents.on(EVENTS.DASHBOARD.NEW_EVENT, (event) => {
|
||||
server.publish("dashboard", JSON.stringify({ type: "NEW_EVENT", data: event }));
|
||||
});
|
||||
|
||||
const url = `http://${hostname}:${port}`;
|
||||
|
||||
return {
|
||||
@@ -157,6 +211,9 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
|
||||
if (buildProcess) {
|
||||
buildProcess.kill();
|
||||
}
|
||||
if (statsBroadcastInterval) {
|
||||
clearInterval(statsBroadcastInterval);
|
||||
}
|
||||
server.stop(true);
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user