26 lines
996 B
Markdown
26 lines
996 B
Markdown
|
# Polish: WebSocket & Real-Time
|
||
|
|
|
||
|
|
## 1. Connection Status Indicator
|
||
|
|
Add to App.vue header: green dot (connected), amber pulse (reconnecting), red (disconnected).
|
||
|
|
Connect to actual WebSocket state from websocket.ts.
|
||
|
|
|
||
|
|
## 2. Reconnection UX
|
||
|
|
After max reconnect attempts, show persistent banner "Connection lost. Click to retry."
|
||
|
|
Add `forceReconnect()` method that resets attempt counter.
|
||
|
|
|
||
|
|
## 3. Heartbeat
|
||
|
|
Active ping every 30s with 5s pong timeout (replace passive 60s stale detection).
|
||
|
|
Backend must respond to `ping` with `pong` — check handler.rs.
|
||
|
|
|
||
|
|
## 4. Session Timeout
|
||
|
|
In rpc-client.ts base `call()`: on 401/403 response, redirect to `/login`.
|
||
|
|
|
||
|
|
## 5. Race Condition Fix
|
||
|
|
Use listener deduplication (Set) or remove-all-then-resubscribe on reconnect.
|
||
|
|
|
||
|
|
## 6. Message Queuing
|
||
|
|
Queue subscription requests while disconnected, replay on reconnect.
|
||
|
|
|
||
|
|
## Verify
|
||
|
|
Kill backend → shows "Disconnected" → restart → auto-reconnects. Toggle wifi → status updates. Session timeout → redirects to login.
|