Realtime Updates
Some apps only feel right when they update live. Chat is the obvious one. You don't want to refresh the screen to see a new message. The same goes for collaborative lists, live leaderboards, scoreboards during a game, and "Alex is typing..." bubbles.
Without realtime, your app has to keep asking the server "anything new yet? anything now? what about now?" That's annoying for the app and slow for the user. With realtime, the server taps your app on the shoulder the moment something changes.
Appsanic wires this up for you when you ask.
Heads-up: realtime is part of the Supabase connector. If you haven't connected Supabase yet, do that first. It comes with realtime built in, no extra setup.
When to use it
Ask for realtime when an action by one person should be visible to another person right now:
- A new chat message appearing.
- A friend ticking off a shared habit.
- A new comment on a post.
- A vote count going up.
- "X is typing" indicators.
- Live presence ("who's looking at this post right now").
If the data only matters to one user (their own settings, their own draft), you don't need realtime. That data is already on their phone.
The setup prompt
"When someone in my accountability group checks off a habit, all members see the check appear live on their phone, without refreshing."
That's it. The agent:
- Sets up a live connection from each phone to your database.
- When a row changes that affects this user, the phone hears about it and the UI updates.
- Closes the connection when the user leaves that screen, so battery doesn't drain.
You don't have to think about any of the plumbing.
Three flavours of realtime
The agent picks the right one based on what you describe. You don't have to know the names. But here they are, in case you see them in conversation.
1. Live database updates
Your screen shows whatever's in the database. The moment something in the database changes, the screen updates.
Best for: feeds, lists, collaborative content, live counts.
2. "Who's here right now"
Each user, when they open a particular screen or post, raises their hand: "I'm here." The screen can show who else is currently looking.
Best for: avatars at the top of a shared document, "5 people are viewing this listing", presence in a chat room.
3. Quick pings between users
Lightweight messages that don't need to be saved anywhere. The classic example is "X is typing...". Once typing stops, the bubble vanishes and nothing was ever stored.
Best for: typing indicators, live cursor positions, brief signals between users.
Making things feel instant
Even with realtime, a tap that has to wait for the server feels sluggish. The trick: update the screen immediately, then ask the server to catch up. If the server says no, undo.
You don't write this code. You just ask:
"Make check-ins feel instant. If the server write fails, reverse the UI and show a small error toast."
The result: the user taps the check, the check appears with a satisfying animation, and 99.9% of the time the server confirms it half a second later. In the rare failure case, the check pops back off and the user sees "couldn't save, try again."
What realtime costs
Supabase Realtime is free for most small apps. As your app grows, costs depend on how many users are connected at once and how many updates flow through. Most apps never need to pay for realtime specifically. It's bundled into the Supabase plan.
Realtime + offline
Realtime and offline play together well: queued changes save, the connection reconnects, and anything missed arrives. See Offline Support for how that reconciliation works.
Under the hood (for engineers)
The agent uses Supabase Realtime, which exposes three primitives:
- Postgres Changes.
INSERT/UPDATE/DELETEevents streamed over a WebSocket, filterable per table and per row. - Presence: per-channel "I'm here" tracking with arbitrary metadata.
- Broadcast: ephemeral pub/sub between connected clients, no DB write.
Example:
const channel = supabase
.channel("habit-updates")
.on(
"postgres_changes",
{ event: "INSERT", schema: "public", table: "habit_checkins" },
(payload) => addCheckIn(payload.new),
)
.subscribe();
return () => supabase.removeChannel(channel);Performance guidance the agent follows by default:
- Narrow filters so each client receives only relevant rows.
- Unsubscribe on unmount to avoid leaks.
- Debounce rapid client-side writes that fan out via broadcast.
Next
Read Payments, or Offline Support if you need the app to work without a network.
