real-time-features

Synchronize web application data across clients using Supabase Realtime or WebSockets.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/Whaleylaw/llm-lawyer --skill real-time-features-whaleylaw
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: real-time-features
Source: https://github.com/Whaleylaw/llm-lawyer/tree/main/.claude/skills/real-time-features
Command: npx skills add https://github.com/Whaleylaw/llm-lawyer --skill real-time-features-whaleylaw

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides patterns and implementation guidance to deliver live, synchronized data across clients, preventing stale views and enabling collaborative features.

Core Features & Use Cases

  • Realtime Subscriptions: Use Supabase Realtime or WebSockets to subscribe to INSERT, UPDATE, and DELETE events and reflect database changes immediately in the UI.
  • Presence & Broadcast: Track who's online, broadcast client-to-client events (typing indicators, cursors), and manage presence state.
  • Connection Management & Performance: Monitor connection status, handle reconnection, debounce high-frequency events, and ensure subscription cleanup to avoid memory leaks.
  • Use Case: Implement live case updates and chat in a legal case management app so multiple staff see new notes, status changes, and typing indicators in real time.

Quick Start

Subscribe to a Supabase channel for the case_updates table, fetch initial rows, update local state on INSERT/UPDATE/DELETE payloads, and unsubscribe on component unmount.

Frequently Asked Questions about real-time-features

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I subscribe to Supabase realtime database changes and update my UI?▼

To subscribe to Supabase realtime updates, you create a channel for your target table and attach event handlers for INSERT, UPDATE, and DELETE payloads. You fetch initial rows first, then update local component state dynamically as new database events arrive.

What is the best way to handle WebSocket connection management and prevent memory leaks?▼

WebSocket connection management requires monitoring connection states and ensuring proper subscription cleanup. You must unsubscribe from channels and remove event listeners during component unmount to prevent memory leaks and maintain optimal application performance.

How does presence tracking work for collaborative editing and typing indicators?▼

Presence tracking works by broadcasting client-to-client events through WebSockets or Socket.io to sync user states. This mechanism enables collaborative features like typing indicators and cursor positions by maintaining shared presence state across connected clients.

Can I use Socket.io or WebSockets to sync application data across multiple clients?▼

Yes, you can use Socket.io or WebSockets to sync application data across multiple clients. They facilitate immediate peer-to-peer event broadcasting and real-time data synchronization, ensuring UI state reflects database and peer events without stale views.

Why does my realtime subscription cause performance issues with high-frequency events?▼

Realtime subscriptions cause performance issues when high-frequency events overwhelm the connection. You should debounce incoming event payloads and manage connection states properly to optimize performance and prevent unnecessary UI re-renders.

When do I need realtime synchronization for my web application?▼

You need realtime synchronization when your web application requires instant data consistency across clients. It is essential for features like collaborative editing, live messaging, presence tracking, and typing indicators where stale views degrade user experience.