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 import paths and row types to the detected stack.

CRITICAL: Check Existing First [LOW freedom — run exactly]

Before implementing ANY real-time feature, verify:

1. Check for existing real-time setup:

cat package.json | grep -i "socket\|realtime\|pusher\|ably"
rg "supabase.*channel|useSubscription|WebSocket" --type ts --type tsx

1. Check for existing patterns:

rg "on\('INSERT'\|on\('UPDATE'\|subscribe\(" --type ts
ls -la src/hooks/use*Realtime* src/lib/realtime* 2>/dev/null