backend-realtime

# Real-time Features Skill **Degree of freedom: MIXED.** Which transport and event `[HIGH freedom]`; existing-subscription probes and unmount cleanup `[LOW freedom — run exactly]`. ## How to reason 1. **Observe** — existing channels, sockets, hooks, cleanup 2. **Interpret** — new subscription vs reuse vs transport mismatch 3. **Classify** — postgres-changes / presence / broadcast / SSE / optimistic 4. **Severity** — leaked or duplicate subscription outranks a missing typing indicator ## Worked example > **Observe:** chat mounts `useRealtimeMessages` twice; no untrack on leave; `package.json` already has `@supabase/supabase-js`. > **Interpret:** duplicate INSERT listeners; leftover presence. > **Classify:** one channel hook with unmount cleanup; reuse Supabase Realtime — do not add Socket.io. > **Verify:** one `postgres_changes` subscription; `removeChannel` on unmount; no second socket lib. ## Self-critique before reporting - **Existing first** — grepped channels/sockets before adding a library - **Cleanup** — every subscribe has unmount `removeChannel` / `close` - **One listener** — no duplicate subscription for the same event - **Right owner** — FE↔BE payload mismatch → `debug-fe-be-integration`; queue/job instead of live push → `backend-patterns` Implement live, collaborative features using WebSockets, Supabase Realtime, and Server-Sent Events. > Code examples assume a **Next.js App Router + Supabase** stack > (`@/lib/supabase/client`, `'use client'`). Adapt impor...