mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 20:05:06 +03:00
83 lines
3.0 KiB
Plaintext
83 lines
3.0 KiB
Plaintext
---
|
|
id: 'realtime'
|
|
title: 'Realtime'
|
|
description: 'Send and receive messages to connected clients.'
|
|
subtitle: 'Send and receive messages to connected clients.'
|
|
hideToc: true
|
|
---
|
|
|
|
Supabase provides a globally distributed [Realtime](https://github.com/supabase/realtime) service with the following features:
|
|
|
|
- [Broadcast](/docs/guides/realtime/broadcast): Send low-latency messages between clients. Perfect for real-time messaging, database changes, cursor tracking, game events, and custom notifications.
|
|
- [Presence](/docs/guides/realtime/presence): Track and synchronize user state across clients. Ideal for showing who's online, or active participants.
|
|
- [Postgres Changes](/docs/guides/realtime/postgres-changes): Listen to database changes in real-time.
|
|
|
|
## What can you build?
|
|
|
|
- **Chat applications** - Real-time messaging with typing indicators and online presence
|
|
- **Collaborative tools** - Document editing, whiteboards, and shared workspaces
|
|
- **Live dashboards** - Real-time data visualization and monitoring
|
|
- **Multiplayer games** - Synchronized game state and player interactions
|
|
- **Social features** - Live notifications, reactions, and user activity feeds
|
|
|
|
Check the [Getting Started](/docs/guides/realtime/getting_started) guide to get started.
|
|
|
|
## Examples
|
|
|
|
<div className="grid md:grid-cols-12 gap-4 not-prose">
|
|
{[
|
|
{
|
|
name: 'Multiplayer.dev',
|
|
description: 'Showcase application displaying cursor movements and chat messages using Broadcast.',
|
|
href: 'https://multiplayer.dev',
|
|
},
|
|
{
|
|
name: 'Chat',
|
|
description: 'Supabase UI chat component using Broadcast to send message between users.',
|
|
href: 'https://supabase.com/ui/docs/nextjs/realtime-chat'
|
|
},
|
|
{
|
|
name: 'Avatar Stack',
|
|
description: 'Supabase UI avatar stack component using Presence to track connected users.',
|
|
href: 'https://supabase.com/ui/docs/nextjs/realtime-avatar-stack'
|
|
},
|
|
{
|
|
name: 'Realtime Cursor',
|
|
description: "Supabase UI realtime cursor component using Broadcast to share users' cursors to build collaborative applications.",
|
|
href: 'https://supabase.com/ui/docs/nextjs/realtime-cursor'
|
|
}
|
|
].map((x) => (
|
|
<div className="col-span-6" key={x.href}>
|
|
<Link href={x.href} target="_blank" passHref>
|
|
<GlassPanel title={x.name}>{x.description}</GlassPanel>
|
|
</Link>
|
|
</div>
|
|
))}
|
|
|
|
</div>
|
|
|
|
## Resources
|
|
|
|
Find the source code and documentation in the Supabase GitHub repository.
|
|
|
|
<div className="grid md:grid-cols-12 gap-4 not-prose">
|
|
{[
|
|
{
|
|
name: 'Supabase Realtime',
|
|
description: 'View the source code.',
|
|
href: 'https://github.com/supabase/realtime',
|
|
},
|
|
{
|
|
name: 'Realtime: Multiplayer Edition',
|
|
description: 'Read more about Supabase Realtime.',
|
|
href: 'https://supabase.com/blog/supabase-realtime-multiplayer-general-availability',
|
|
},
|
|
].map((x) => (
|
|
<div className="col-span-6" key={x.href}>
|
|
<Link href={x.href} passHref>
|
|
<GlassPanel title={x.name}>{x.description}</GlassPanel>
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|