Realtime
Live database updates pushed to your app — so admins see new fee payments and attendance records instantly, without refreshing.
Why First
Your EduTrack admin dashboard shows "Fees collected today: 47." A parent pays their child's tuition fee. The count in the database becomes 48.
Does the admin need to refresh the page?
Without Realtime, yes. Your React app fetched the count when the page loaded. It knows nothing about what happened since. To see the update, someone has to manually refresh — or you have to write code that polls the database every few seconds, which is wasteful and still not truly instant.
With Realtime, the number on the admin's screen changes to 48 the moment the fee is recorded. No refresh. No polling. The database pushed the change to every connected browser automatically.
Excel analogy: Excel Online with collaborative editing. When your colleague types a number into a cell, you see it change in your screen — live, immediately, without you doing anything. That is the experience Realtime brings to your web app. The data in the database is the "shared file." Every browser that has the page open is a "collaborator" watching for changes.
How Realtime Works
When Realtime is enabled for a table, Supabase listens to the database's own change feed (PostgreSQL's LISTEN/NOTIFY system). When a row is inserted, updated, or deleted, Supabase broadcasts that change over a WebSocket connection to any browser that has subscribed to that table.
From the browser's perspective:
- When the app loads, it opens a WebSocket connection to Supabase
- It subscribes to a channel: "tell me when the
fee_recordstable changes" - When a change happens, Supabase sends a message over that WebSocket
- The app receives the message and updates the UI
The user sees the change appear without refreshing. The performance is near-instant (typically under 100ms from database write to browser update).
Enabling Realtime for a Table
Realtime is opt-in per table. You must explicitly enable it for each table you want to monitor.
- In the Supabase dashboard, click Database in the left sidebar
- Click Replication in the sub-menu (or find it under Database settings)
- You see a list of your tables with toggles for INSERT, UPDATE, and DELETE events
- For each table you want to track, enable the event types you need:
- INSERT: a new row was created (new fee payment, new enrollment)
- UPDATE: an existing row was changed (fee status updated, attendance marked)
- DELETE: a row was removed (record deleted, user removed)
For an admin dashboard showing live fee collection counts, you would enable INSERT and UPDATE on the fee_records table.
Database → Replication — toggle Realtime per table for INSERT, UPDATE, DELETE events.
Only enable the events you actually use. If your app only listens for INSERT events, there is no need to enable UPDATE or DELETE — it creates unnecessary network traffic. Be deliberate about what you subscribe to, especially for high-volume tables.
The Client-Side Pattern
You will not write this code in this section, but it is useful to see what Realtime looks like in a React app. This is a reference — the Backend module covers implementation in detail.
Each .on() call is a subscription to a specific event on a specific table. You can chain multiple .on() calls on the same channel to listen for different events. The callback function receives the changed row data in payload.new (the new state) and payload.old (the previous state, for UPDATE and DELETE events).
The Realtime Inspector
Supabase has a built-in debugging tool for Realtime:
- Click Database in the sidebar
- Click Realtime in the sub-menu
- The inspector shows a live feed of all Realtime events happening in your project
- You can filter by table and event type
- When you create a row in the Table Editor while the inspector is open, you should see that event appear in real time
This is the fastest way to verify Realtime is working for a table before you connect it to your React app. If you enable Realtime on fee_records, open the inspector, then insert a row via the SQL Editor — you should see the INSERT event appear within milliseconds.
Realtime Inspector — a live feed of every Realtime event flowing through your project.
When to Use Realtime
Realtime is powerful but not needed everywhere. Use it for:
| Use case | Tables to subscribe to | Events |
|---|---|---|
| Admin sees new fee payments live | fee_records | INSERT |
| Teacher gets notified when attendance is submitted | attendance | INSERT |
| Admin sees fee status as it updates | fee_records | UPDATE |
| Branch admin sees new enrollments | students | INSERT |
| Admin sees result entries as teachers add them | results | INSERT |
| Admin audit feed | admin_audit_logs | INSERT |
Do not use Realtime for:
- Static data that rarely changes (service categories, pricing tables)
- Data that only the current user needs and they will navigate to it anyway (their own profile settings)
- Features where a stale refresh is acceptable (monthly reports, historical data)
RLS and Realtime
Realtime respects your RLS policies. If a parent is subscribed to the fee_records table but your RLS policy says they can only see their own child's records — Realtime will only push events for rows that parent is allowed to see.
This means you can safely enable Realtime on a table with RLS enabled. A branch admin receiving Realtime updates on fee_records will only receive events for their own branch, not every record across all branches.
Verify your RLS policies are correct before enabling Realtime. A misconfigured RLS policy on a Realtime-enabled table could broadcast rows a user should not see. Test your policies with the Policy Tester in the Authentication section first, then enable Realtime.
Broadcast and Presence (Advanced)
Beyond database changes, Supabase Realtime supports two additional modes:
Broadcast: Send arbitrary messages between connected clients — useful for "user is typing" indicators, custom events, or ephemeral notifications that don't need to be stored in the database.
Presence: Track which users are currently connected and online — useful for showing "3 admins are viewing this dashboard" or "your partner is on their way."
These are covered in the Backend module when you build the EduTrack announcement and notification feature. For now, the key point is that Supabase Realtime does more than just database change notifications — it is a full real-time messaging infrastructure.