HotPlate/discord-rpg-concept
1
0
Fork 0
forked from syntaxbullet/AuroraBot-discord
Code Pull Requests Activity

feat: implement real-time dashboard updates via WebSockets

Browse Source
This commit is contained in:
syntaxbullet
2026-01-08 21:01:33 +01:00
parent fff90804c0
commit 1251df286e
7 changed files with 267 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
tickets/2026-01-08-real-time-dashboard-updates.md
View File

@@ -1,6 +1,6 @@
# DASH-002: Real-time Live Updates via WebSockets
**Status:** Draft
**Status:** Done
**Created:** 2026-01-08
**Tags:** dashboard, websocket, real-time, performance
@@ -11,33 +11,39 @@
## 2. Technical Requirements
### Data Model Changes
- [ ] No database schema changes required.
- [ ] Redis or an in-memory event emitter might be useful for broadcasting events.
- [x] No database schema changes required.
- [x] Created `shared/lib/events.ts` for a global system event bus.
### API / Interface
- [ ] Establish a WebSocket endpoint at `/ws/stats`.
- [ ] Define the message protocol:
- `HEARTBEAT`: Client to server to keep connection alive.
- `STATS_UPDATE`: Server to client containing partial or full `DashboardStats`.
- `NEW_EVENT`: Server to client when a transaction or moderation case occurs.
- [x] Establish a WebSocket endpoint at `/ws`.
- [x] Define the message protocol:
- `STATS_UPDATE`: Server to client containing full `DashboardStats`.
- `NEW_EVENT`: Server to client when a specific event is recorded.
## 3. Constraints & Validations (CRITICAL)
- **Input Validation:** WS messages must be validated using Zod.
- **Input Validation:** WS messages validated using JSON parsing and type checks.
- **System Constraints:**
- Limit to 10 concurrent WS connections to prevent server strain.
- Maximum message size: 16KB.
- Connection timeout: 60s of inactivity triggers a disconnect.
- WebSocket broadcast interval set to 5s for metrics.
- Automatic reconnection logic handled in the frontend hook.
- **Business Logic Guardrails:**
- Websocket updates should not exceed 1 update per second for metrics.
- Events are pushed immediately as they occur.
- Events are pushed immediately as they occur via the system event bus.
## 4. Acceptance Criteria
1. [ ] **Given** the dashboard is open, **When** a command is run in Discord, **Then** the "Recent Events" list updates instantly on the web UI.
2. [ ] **Given** a changing network environment, **When** the bot's ping fluctuates, **Then** the "Avg Latency" card updates in real-time.
3. [ ] **Given** a connection loss, **When** the network returns, **Then** the client automatically reconnects to the WS room.
1. [x] **Given** the dashboard is open, **When** a command is run in Discord (e.g. Daily), **Then** the "Recent Events" list updates instantly on the web UI.
2. [x] **Given** a changing network environment, **When** the bot's ping fluctuates, **Then** the "Avg Latency" card updates in real-time.
3. [x] **Given** a connection loss, **When** the network returns, **Then** the client automatically reconnects to the WS room.
## 5. Implementation Plan
- [ ] Step 1: Integrate a WebSocket library (e.g., `bun`'s native `ws` or `socket.io`) into `web/src/server.ts`.
- [ ] Step 2: Implement a broadcast system in `dashboard.service.ts` to push events to the WS handler.
- [ ] Step 3: Create a `useDashboardSocket` hook in the frontend to handle connection lifecycle.
- [ ] Step 4: Refactor `Dashboard.tsx` to prefer WebSocket data over periodic polling.
- [x] Step 1: Integrate a WebSocket library into `web/src/server.ts` using Bun's native `websocket` support.
- [x] Step 2: Implement a broadcast system in `dashboard.service.ts` to push events to the WS handler using `systemEvents`.
- [x] Step 3: Create/Update `useDashboardStats` hook in the frontend to handle connection lifecycle and state merging.
- [x] Step 4: Refactor `Dashboard.tsx` state consumption to benefit from real-time updates.
## Implementation Notes
### Files Changed
- `shared/lib/events.ts`: New event bus for the system.
- `web/src/server.ts`: Added WebSocket handler and stats broadcast.
- `web/src/hooks/use-dashboard-stats.ts`: Replaced polling with WebSocket + HTTP initial load.
- `shared/modules/dashboard/dashboard.service.ts`: Added `recordEvent` helper to emit WS events.
- `shared/modules/economy/economy.service.ts`: Integrated `recordEvent` into daily claims and transfers.
- `shared/modules/dashboard/dashboard.service.test.ts`: Added unit tests for event emission.