Files
supabase/apps/docs/content/guides/realtime.mdx
T

73 lines
2.4 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 using the client libraries, REST, or your Database.
- [Presence](/docs/guides/realtime/presence): Track and synchronize shared state between users.
- [Postgres Changes](/docs/guides/realtime/postgres-changes): Listen to Database changes and send them to authorized users.
## 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>