Frontend: WS client singleton with reconnect #41

New issue

Open

opened 2026-04-19 07:23:39 +00:00 by forgejo-lila · 0 comments

forgejo-lila commented

2026-04-19 07:23:39 +00:00

Owner

Context

The frontend needs a single WebSocket connection that persists across the multiplayer flow.

Files to create

apps/web/src/lib/ws-client.ts

Key features

connect(url) — establish connection with auth cookies.
disconnect() — clean close.
send(message) — typed message (validated against shared Zod schemas).
on(type, handler) / off(type, handler) — event handlers.
Automatic reconnection with exponential back-off (1s, 2s, 4s, 8s, max 30s).
Connection state observable (connecting, connected, disconnected, reconnecting).

Acceptance criteria

Single WebSocket shared across multiplayer components
Messages typed using @lila/shared schemas
Reconnection on unexpected disconnect
Connection state accessible to components ('Reconnecting...' banner)
Clean disconnect on logout or navigation away
Does not connect outside multiplayer flow

Notes

WebSocket URL: wss://api.lilastudy.com (prod), ws://localhost:3000 (dev). Derive from import.meta.env.VITE_API_URL. Consider Zustand for connection state (app already uses Zustand).

## Context The frontend needs a single WebSocket connection that persists across the multiplayer flow. ## Files to create - `apps/web/src/lib/ws-client.ts` ## Key features - `connect(url)` — establish connection with auth cookies. - `disconnect()` — clean close. - `send(message)` — typed message (validated against shared Zod schemas). - `on(type, handler)` / `off(type, handler)` — event handlers. - Automatic reconnection with exponential back-off (1s, 2s, 4s, 8s, max 30s). - Connection state observable (connecting, connected, disconnected, reconnecting). ## Acceptance criteria - Single WebSocket shared across multiplayer components - Messages typed using `@lila/shared` schemas - Reconnection on unexpected disconnect - Connection state accessible to components ('Reconnecting...' banner) - Clean disconnect on logout or navigation away - Does not connect outside multiplayer flow ## Notes WebSocket URL: `wss://api.lilastudy.com` (prod), `ws://localhost:3000` (dev). Derive from `import.meta.env.VITE_API_URL`. Consider Zustand for connection state (app already uses Zustand).