From b776731d497ae390ecd289a5e7705a1f866c1bbd Mon Sep 17 00:00:00 2001 From: Wen Bo Xie Date: Thu, 15 Jun 2023 14:55:36 -0700 Subject: [PATCH 01/22] docs: add steps to Realtime quickstarts --- .../NavigationMenu.constants.ts | 12 +- apps/docs/pages/guides/api/quickstart.mdx | 2 +- apps/docs/pages/guides/realtime.mdx | 7 +- apps/docs/pages/guides/realtime/broadcast.mdx | 136 ------- apps/docs/pages/guides/realtime/concepts.mdx | 12 +- apps/docs/pages/guides/realtime/presence.mdx | 165 -------- .../docs/pages/guides/realtime/quickstart.mdx | 265 ------------- .../guides/realtime/quickstarts/broadcast.mdx | 275 +++++++++++++ .../{ => quickstarts}/postgres-changes.mdx | 371 +++++++++++++----- .../guides/realtime/quickstarts/presence.mdx | 273 +++++++++++++ apps/docs/pages/guides/realtime/quotas.mdx | 2 +- apps/docs/pages/guides/storage/quickstart.mdx | 2 +- apps/www/lib/redirects.js | 20 + 13 files changed, 858 insertions(+), 684 deletions(-) delete mode 100644 apps/docs/pages/guides/realtime/broadcast.mdx delete mode 100644 apps/docs/pages/guides/realtime/presence.mdx delete mode 100644 apps/docs/pages/guides/realtime/quickstart.mdx create mode 100644 apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx rename apps/docs/pages/guides/realtime/{ => quickstarts}/postgres-changes.mdx (54%) create mode 100644 apps/docs/pages/guides/realtime/quickstarts/presence.mdx diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts index 07a43a57d9e..995a6ac6e18 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts @@ -809,18 +809,14 @@ export const realtime: NavMenuConstant = { url: '/guides/realtime/concepts', }, { - name: 'Quickstart', - url: '/guides/realtime/quickstart', - }, - { - name: 'Features', + name: 'Quickstarts', url: undefined, items: [ - { name: 'Broadcast', url: '/guides/realtime/broadcast' }, - { name: 'Presence', url: '/guides/realtime/presence' }, + { name: 'Broadcast', url: '/guides/realtime/quickstarts/broadcast' }, + { name: 'Presence', url: '/guides/realtime/quickstarts/presence' }, { name: 'Postgres Changes', - url: '/guides/realtime/postgres-changes', + url: '/guides/realtime/quickstarts/postgres-changes', }, ], }, diff --git a/apps/docs/pages/guides/api/quickstart.mdx b/apps/docs/pages/guides/api/quickstart.mdx index a9c73ab8c44..8e7baf747a5 100644 --- a/apps/docs/pages/guides/api/quickstart.mdx +++ b/apps/docs/pages/guides/api/quickstart.mdx @@ -141,7 +141,7 @@ You can query the route in your browser, by appending the `anon` key as a query ### Client libraries -We provide a numerous [Client Libraries](https://github.com/supabase/supabase#client-libraries). +We provide a number of [Client Libraries](https://github.com/supabase/supabase#client-libraries). diff --git a/apps/docs/pages/guides/realtime/broadcast.mdx b/apps/docs/pages/guides/realtime/broadcast.mdx deleted file mode 100644 index 3a2120c1494..00000000000 --- a/apps/docs/pages/guides/realtime/broadcast.mdx +++ /dev/null @@ -1,136 +0,0 @@ -import Layout from '~/layouts/DefaultGuideLayout' - -export const meta = { - id: 'broadcast', - title: 'Broadcast', - description: "Getting started with Realtime's Broadcast feature", -} - -Broadcast follows the [publish-subscribe pattern](https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern) where a client publishes messages to a channel with a unique identifier. For example, a user could send a message to a channel with id `room-1`. - -Other clients can elect to receive the message in real-time by subscribing to the channel with id `room-1`. If these clients are online and subscribed then they will receive the message. - -Broadcast works by connecting your client to the nearest Realtime server, which will communicate with other servers to relay messages to other clients. - -A common use-case is sharing a user's cursor position with other clients in an online game. - -## Listen to Messages - -You can get started with Broadcast by creating a client and listening to a channel's messages: - -```js -const { createClient } = require('@supabase/supabase-js') - -const supabase = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_KEY) - -const channel = supabase.channel('test') - -channel.on('broadcast', { event: 'supa' }, (payload) => console.log(payload)).subscribe() -``` - -## Send Messages - -You can create another client and send messages to other clients: - -```js -const { createClient } = require('@supabase/supabase-js') - -const supabase = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_KEY) - -const channel = supabase.channel('test') - -channel.subscribe((status) => { - if (status === 'SUBSCRIBED') { - channel.send({ - type: 'broadcast', - event: 'supa', - payload: { org: 'supabase' }, - }) - } -}) -``` - -In order for clients to successfully send and receive mesages to one another, they must both specify the same `event`. - -We recommend that the client has successfully subscribed to the channel prior to sending messages. - -### Self-Send Messages - -You can also choose for a client to receive messages that it sent: - -```js -// Supabase client setup -const channel = supabase.channel('test', { - config: { - broadcast: { - self: true, - }, - }, -}) - -channel - .on('broadcast', { event: 'supa' }, (payload) => console.log(payload)) - .subscribe((status) => { - if (status === 'SUBSCRIBED') { - channel.send({ - type: 'broadcast', - event: 'supa', - payload: { org: 'supabase' }, - }) - } - }) -``` - -### Acknowledge Messages - -You can ensure that Realtime's servers received your message by: - -```js -// Supabase client setup - -const channel = supabase.channel('receipt', { - config: { - broadcast: { ack: true }, - }, -}) - -channel.subscribe(async (status) => { - if (status === 'SUBSCRIBED') { - const resp = await channel.send({ - type: 'broadcast', - event: 'latency', - payload: {}, - }) - console.log(resp) - } -}) -``` - -If `ack` is not set to `true`, Realtime servers will not acknowledge that it received the sent message and `send` promise resolves immediately. - -## Client-Side Rate Limit - -There is a default client-side rate limit that enables you to send 10 messages per second, or one message every 100 milliseconds. You can customize this when creating the client: - -```js -const { createClient } = require('@supabase/supabase-js') - -const supabase = createClient( - process.env.SUPABASE_URL, - process.env.SUPABASE_KEY, - { - realtime: { - params: { - eventsPerSecond: 20 - } - } - } -``` - -By setting `eventsPerSecond` to 20, you can send one message every 50 milliseconds on a per client basis. - -Learn more by visiting the [Quotas](/docs/guides/realtime/quotas) section. - -export const Page = ({ children }) => - -export default Page diff --git a/apps/docs/pages/guides/realtime/concepts.mdx b/apps/docs/pages/guides/realtime/concepts.mdx index 6db5b9f5f9e..46cce126a11 100644 --- a/apps/docs/pages/guides/realtime/concepts.mdx +++ b/apps/docs/pages/guides/realtime/concepts.mdx @@ -9,20 +9,20 @@ export const meta = { Supabase Realtime lets you to build real-time applications with collaborative/multiplayer functionality. It includes 3 core features: -- [Broadcast](/docs/guides/realtime/broadcast): sends rapid, ephemeral messages to other connected clients. You can use it to track mouse movements, for example. -- [Presence](/docs/guides/realtime/presence): sends user state between connected clients. You can use it to show an "online" status, which disappears when a user is disconnected. -- [Postgres Changes](/docs/guides/realtime/postgres-changes): receives database changes in real-time. +- [Broadcast](/docs/guides/realtime/quickstarts/broadcast): sends rapid, ephemeral messages to other connected clients. You can use it to track mouse movements, for example. +- [Presence](/docs/guides/realtime/quickstarts/presence): sends user state between connected clients. You can use it to show an "online" status, which disappears when a user is disconnected. +- [Postgres Changes](/docs/guides/realtime/quickstarts/postgres-changes): receives database changes in real-time. ## Channels When you initialize your Supabase Realtime client, you define a `topic` that uniquely references a channel. Everyone connected to the same Channel `topic` receives the same messages. ```js -const { createClient } = require('@supabase/supabase-js') +import { createClient } from '@supabase/supabase-js' -const supabase = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_KEY) +const client = createClient('https://.supabase.co', '') -const channel = supabase.channel('my-topic') // set your topic here +const channel = client.channel('my-topic') // set your topic here ``` Clients can bi-directionally send and receive messages over a Channel. The Realtime backend can also push messages to all clients connected to the same Channel. diff --git a/apps/docs/pages/guides/realtime/presence.mdx b/apps/docs/pages/guides/realtime/presence.mdx deleted file mode 100644 index 940fafc0288..00000000000 --- a/apps/docs/pages/guides/realtime/presence.mdx +++ /dev/null @@ -1,165 +0,0 @@ -import Layout from '~/layouts/DefaultGuideLayout' - -export const meta = { - id: 'presence', - title: 'Presence', - description: "Getting started with Realtime's Presence feature", -} - -Presence utilizes an in-memory conflict-free replicated data type (CRDT) to track and synchronize shared state in an eventually consistent manner. It computes the difference between existing state and new state changes and sends the necessary updates to clients via Broadcast. - -When a new client subscribes to a channel, it will immediately receive the channel's latest state in a single message instead of waiting for all other clients to send their individual states. - -Clients are free to come-and-go as they please, and as long as they are all subscribed to the same channel then they will all have the same Presence state as each other. - -The neat thing about Presence is that if a client is suddenly disconnected (for example, they go offline), their state will be automatically removed from the shared state. If you've ever tried to build an “I'm online” feature which handles unexpected disconnects, you'll appreciate how useful this is. - -## Presence State - -You can get started by listening to `sync` event messages notifying the client that a channel's state has been synchronized on the server. You can get the state by calling the channel's `presenceState` helper: - -```js -const { createClient } = require('@supabase/supabase-js') - -const supabase = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_KEY) - -const channel = supabase.channel('test') - -channel - .on('presence', { event: 'sync' }, () => { - const state = channel.presenceState() - console.log(state) - }) - .subscribe() -``` - -Whenever there's Presence activity on the `'test'` channel, this `sync` event will be broadcast to all clients subscribed to the channel. - -## Listen to Joins - -You can create a client and listen to new state joining the channel's Presence: - -```js -// Supabase client setup - -const channel = supabase.channel('test') - -channel - .on('presence', { event: 'join' }, ({ key, newPresences }) => { - console.log(key, newPresences) - }) - .subscribe() -``` - -## Track Presence - -On another client, subscribe to the channel and insert state to be tracked by Presence: - -```js -// Supabase client setup - -const channel = supabase.channel('test') - -channel.subscribe(async (status) => { - if (status === 'SUBSCRIBED') { - const presenceTrackStatus = await channel.track({ - user: 'user-1', - online_at: new Date().toISOString(), - }) - console.log(presenceTrackStatus) - } -}) -``` - -### Presence Key - -By default, Presence will generate an `UUIDv1` key on the server to uniquely track a client channel's state but you may pass Presence a custom key when creating the channel. - -```js -// Supabase client setup - -const channel = supabase.channel('test', { - config: { - presence: { - key: 'userId-1', - }, - }, -}) - -channel.subscribe(async (status) => { - if (status === 'SUBSCRIBED') { - const presenceTrackStatus = await channel.track({ - user: 'user-1', - online_at: new Date().toISOString(), - }) - console.log(presenceTrackStatus) - } -}) -``` - -## Listen to Leaves - -You can create a client and listen to a client channel's state leaving: - -```js -// Supabase client setup - -const channel = supabase.channel('test') - -channel - .on('presence', { event: 'leave' }, ({ key, leftPresences }) => { - console.log(key, leftPresences) - }) - .subscribe() -``` - -## Untrack Presence - -On another client, subscribe to the channel, and remove tracked state from Presence: - -```js -// Supabase client setup - -const channel = supabase.channel('test') - -channel.subscribe(async (status) => { - if (status === 'SUBSCRIBED') { - const presenceTrackStatus = await channel.track({ - user: 'user-1', - online_at: new Date().toISOString(), - }) - - if (presenceTrackStatus === 'ok') { - const presenceUntrackStatus = await channel.untrack() - console.log(presenceUntrackStatus) - } - } -}) -``` - -## Client-Side Rate Limit - -There is a default client-side rate limit that enables you to send 10 messages per second, or one message every 100 milliseconds. You can customize this when creating the client: - -```js -const { createClient } = require('@supabase/supabase-js') - -const supabase = createClient( - process.env.SUPABASE_URL, - process.env.SUPABASE_KEY, - { - realtime: { - params: { - eventsPerSecond: 5 - } - } - } -``` - -By setting `eventsPerSecond` to 5, you can send one message every 200 milliseconds on a per client basis. - -Learn more by visiting the [Quotas](/docs/guides/realtime/quotas) section. - -export const Page = ({ children }) => - -export default Page diff --git a/apps/docs/pages/guides/realtime/quickstart.mdx b/apps/docs/pages/guides/realtime/quickstart.mdx deleted file mode 100644 index de92b99f588..00000000000 --- a/apps/docs/pages/guides/realtime/quickstart.mdx +++ /dev/null @@ -1,265 +0,0 @@ -import Layout from '~/layouts/DefaultGuideLayout' - -export const meta = { - id: 'quickstart', - title: 'Realtime Quickstart', - description: "Getting started with Realtime's Features", - sidebar_label: 'Quickstart', - video: 'https://www.youtube.com/v/BelYEMJ2N00', -} - -Learn how to build [multiplayer.dev](https://multiplayer.dev), a collaborative app that demonstrates Broadcast, Presence, and Postgres Changes using [Realtime](/docs/guides/realtime). - -
- -
- -## Install `supabase-js` Client - -```bash -npm install @supabase/supabase-js -``` - -## Cursor Positions - -[Broadcast](/docs/guides/realtime/broadcast) allows a client to send messages and multiple clients to receive the messages. The broadcasted messages are ephemeral. They are not persisted to the database and are directly relayed through the Realtime servers. This is ideal for sending information like cursor positions where minimal latency is important, but persisting them is not. - -In [multiplayer.dev](https://multiplayer.dev), client's cursor positions are sent to other clients in the room. However, cursor positions will be randomly generated for this example. - -You need to get the public `anon` access token from your project's [API settings](https://supabase.com/dashboard/project/_/settings/api). Then you can set up the Supabase client and start sending a client's cursor positions to other clients in channel `room1`: - -```js -const { createClient } = require('@supabase/supabase-js') - -const supabase = createClient('https://your-project-ref.supabase.co', 'anon-key', { - realtime: { - params: { - eventsPerSecond: 10, - }, - }, -}) - -// Channel name can be any string. -// Create channels with the same name for both the broadcasting and receiving clients. -const channel = supabase.channel('room1') - -// Subscribe registers your client with the server -channel.subscribe((status) => { - if (status === 'SUBSCRIBED') { - // now you can start broadcasting cursor positions - setInterval(() => { - channel.send({ - type: 'broadcast', - event: 'cursor-pos', - payload: { x: Math.random(), y: Math.random() }, - }) - console.log(status) - }, 100) - } -}) -``` - - - -JavaScript client has a default rate limit of 1 Realtime event every 100 milliseconds that's configured by `eventsPerSecond`. - - - -Another client can subscribe to channel `room1` and receive cursor positions: - -```js -// Supabase client setup - -// Listen to broadcast messages. -supabase - .channel('room1') - .on('broadcast', { event: 'cursor-pos' }, (payload) => console.log(payload)) - .subscribe((status) => { - if (status === 'SUBSCRIBED') { - // your callback function will now be called with the messages broadcast by the other client - } - }) -``` - - - -`type` must be `broadcast` and the `event` must match for clients subscribed to the channel. - - - -## Roundtrip Latency - -You can also configure the channel so that the server must return an acknowledgement that it received the `broadcast` message. This is useful if you want to measure the roundtrip latency: - -```js -// Supabase client setup - -const channel = supabase.channel('calc-latency', { - config: { - broadcast: { ack: true }, - }, -}) - -channel.subscribe(async (status) => { - if (status === 'SUBSCRIBED') { - const begin = performance.now() - - await channel.send({ - type: 'broadcast', - event: 'latency', - payload: {}, - }) - - const end = performance.now() - - console.log(`Latency is ${end - begin} milliseconds`) - } -}) -``` - -## Track and Display Which Users Are Online - -[Presence](/docs/guides/realtime/presence) stores and synchronize shared state across clients. The `sync` event is triggered whenever the shared state changes. The `join` event is triggered when new clients join the channel and `leave` event is triggered when clients leave. - -Each client can use the channel's `track` method to store an object in shared state. Each client can only track one object, and if `track` is called again by the same client, then the new object overwrites the previously tracked object in the shared state. You can use one client to track and display users who are online: - -```js -// Supabase client setup - -const channel = supabase.channel('online-users', { - config: { - presence: { - key: 'user1', - }, - }, -}) - -channel.on('presence', { event: 'sync' }, () => { - console.log('Online users: ', channel.presenceState()) -}) - -channel.on('presence', { event: 'join' }, ({ newPresences }) => { - console.log('New users have joined: ', newPresences) -}) - -channel.on('presence', { event: 'leave' }, ({ leftPresences }) => { - console.log('Users have left: ', leftPresences) -}) - -channel.subscribe(async (status) => { - if (status === 'SUBSCRIBED') { - const status = await channel.track({ online_at: new Date().toISOString() }) - console.log(status) - } -}) -``` - -Then you can use another client to add another user to the channel's Presence state: - -```js -// Supabase client setup - -const channel = supabase.channel('online-users', { - config: { - presence: { - key: 'user2', - }, - }, -}) - -// Presence event handlers setup - -channel.subscribe(async (status) => { - if (status === 'SUBSCRIBED') { - const status = await channel.track({ online_at: new Date().toISOString() }) - console.log(status) - } -}) -``` - -If a channel is set up without a presence key, the server generates a random UUID. `type` must be `presence` and `event` must be either `sync`, `join`, or `leave`. - -## Insert and Receive Persisted Messages - -[Postgres Changes](/docs/guides/realtime#postgres-changes) enables your client to insert, update, or delete database records and send the changes to clients. Create a `messages` table to keep track of messages created by users in specific rooms: - -```sql -create table messages ( - id serial primary key, - message text, - user_id text, - room_id text, - created_at timestamptz default now() -) - -alter table messages enable row level security; - -create policy "anon_ins_policy" -ON messages -for insert -to anon -with check (true); - -create policy "anon_sel_policy" -ON messages -for select -to anon -using (true); -``` - -If it doesn't already exist, create a `supabase_realtime` publication and add `messages` table to the publication: - -```sql -begin; - -- remove the supabase_realtime publication - drop publication if exists supabase_realtime; - - -- re-create the supabase_realtime publication with no tables and only for insert - create publication supabase_realtime with (publish = 'insert'); -commit; - --- add a table to the publication -alter publication supabase_realtime add table messages; -``` - -You can then have a client listen for changes on the `messages` table for a specific room and send and receive persisted messages: - -```js -// Supabase client setup - -const channel = supabase.channel('db-messages') - -const roomId = 'room1' -const userId = 'user1' - -channel.on( - 'postgres_changes', - { - event: 'INSERT', - schema: 'public', - table: 'messages', - filter: `room_id=eq.${roomId}`, - }, - (payload) => console.log(payload) -) - -channel.subscribe(async (status) => { - if (status === 'SUBSCRIBED') { - const res = await supabase.from('messages').insert({ - room_id: roomId, - user_id: userId, - message: 'Welcome to Realtime!', - }) - console.log(res) - } -}) -``` - -export const Page = ({ children }) => - -export default Page diff --git a/apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx b/apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx new file mode 100644 index 00000000000..8b78dabc533 --- /dev/null +++ b/apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx @@ -0,0 +1,275 @@ +import Layout from '~/layouts/DefaultGuideLayout' +import StepHikeCompact from '~/components/StepHikeCompact' + +export const meta = { + title: 'Broadcast', + subtitle: "Get up and running with Realtime's Broadcast feature", + breadcrumb: 'Realtime Broadcast Quickstart', +} + +Realtime Broadcast follows the [publish-subscribe pattern](https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern) where a client publishes messages to a channel based on a unique topic. For example, a user could send a message to a channel with topic `room-1`. + +Other clients can receive the message in real-time by subscribing to the channel with topic `room-1`. These clients can continue to receive messages as long as they continue to be online and subscribed to the same channel topic. + +A common use-case is sharing a user's cursor position with other clients in an online game. + +## Quick start + +Let's explore how to implement Realtime Broadcast so you can integrate it into your use case. + + + + + + + + Install the Supabase JavaScript client. + + + + + + ```bash + npm install @supabase/supabase-js + ``` + + + + + + + + + + This client will be used to listen for messages. + + Go to your Supabase project's [API Settings](https://supabase.com/dashboard/project/_/settings/api) and grab the `URL` and `anon` public API key. + + + + + + ```js + import { + createClient + } from '@supabase/supabase-js' + + const clientA = createClient( + 'https://.supabase.co', + '' + ) + ``` + + + + + + + + + + A channel's topic can be anything except for `'realtime'`. + + + + + + ```js + const channelA = clientA.channel('room-1') + ``` + + + + + + + + + + Specify the Broadcast event you want the `on` handler to listen for. The event name can be anything. + + + + + + ```js + channelA + .on( + 'broadcast', + { event: 'test' }, + (payload) => console.log(payload) + ) + .subscribe() + ``` + + + + + + + + + + This client will be used to send a message. + + + + + + ```js + const clientB = createClient( + 'https://.supabase.co', + '' + ) + ``` + + + + + + + + + + This channel's topic must match `channelA`'s. + + + + + + ```js + const channelB = clientB.channel('room-1') + ``` + + + + + + + + + + Subscribe to channel and send a message. + + The payload's `event` must match channelA's `event` in the `on` handler. + + + + + + ```js + channelB.subscribe((status) => { + if (status === 'SUBSCRIBED') { + channelB.send({ + type: 'broadcast', + event: 'test', + payload: { + message: 'hello, world' + }, + }) + } + }) + ``` + + + + + + + + + + `clientA` receives the message `clientB` sent. + + + + + + + +## Broadcast options + +There are additional Broadcast functionality that you can enable when creating a channel. + +### Self-send messages + +You can have a client send a message and then receive it by setting Broadcast's `self` config to `true`. + +```js +const channelC = clientC.channel('room-2', { + config: { + broadcast: { + self: true, + }, + }, +}) + +channelC.on('broadcast', { event: 'test-my-messages' }, (payload) => console.log(payload)) + +channelC.subscribe((status) => { + if (status === 'SUBSCRIBED') { + channelC.send({ + type: 'broadcast', + event: 'test-my-messages', + payload: { message: 'talking to myself' }, + }) + } +}) +``` + +### Acknowledge messages + +You can confirm that Realtime received your message by setting Broadcast's `ack` config to `true`. + +```js +const channelD = clientD.channel('room-3', { + config: { + broadcast: { + ack: true, + }, + }, +}) + +channelD.subscribe(async (status) => { + if (status === 'SUBSCRIBED') { + const resp = await channelD.send({ + type: 'broadcast', + event: 'acknowledge', + payload: {}, + }) + + console.log('resp', resp) + } +}) +``` + +If the `ack` config is not set to `true` when creating the channel, the promise returned by call to `channelD.send` will resolve immediately. + +## Client-side rate limit + +There is a default client-side rate limit that enables you to send 10 messages per second, or one message every 100 milliseconds. You can customize this when creating the client: + +```js +import { createClient } from '@supabase/supabase-js' + +const clientE = createClient('https://.supabase.co', '', { + realtime: { + params: { + eventsPerSecond: 20, + }, + }, +}) +``` + +By setting `eventsPerSecond` to 20, you can send one message every 50 milliseconds on a per client basis. + +Learn more by visiting the [Quotas](/docs/guides/realtime/quotas) section. + +## More Realtime Quickstarts + +- [Presence Quickstart](/docs/guides/realtime/quickstarts/presence) +- [Postgres Changes Quickstart](/docs/guides/realtime/quickstarts/postgres-changes) + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/realtime/postgres-changes.mdx b/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx similarity index 54% rename from apps/docs/pages/guides/realtime/postgres-changes.mdx rename to apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx index 523855cd8ca..3a4e207b25f 100644 --- a/apps/docs/pages/guides/realtime/postgres-changes.mdx +++ b/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx @@ -12,108 +12,267 @@ Anyone with access to a valid JWT signed with the project's JWT secret is able t Clients can choose to receive `INSERT`, `UPDATE`, `DELETE`, or `*` (all) changes for all changes in a schema, a table in a schema, or a column's value in a table. Your clients should only listen to tables in the `public` schema and you must first enable the tables you want your clients to listen to. -Postgres Changes works out of the box for tables in the `public` schema. You can listen to tables in your private schemas by granting table `SELECT` permissions to the database role found in your access token. You can run a query similar to the following: +## Quick start -```sql -grant -select - on "private_schema"."table" to authenticated; -``` +Let's explore how to implement Realtime Postgres Changes so you can integrate it into your use case. - - We strongly encourage you to enable RLS and create policies for tables in private schemas. - Otherwise, any role you grant access to will have unfettered read access to the table. - + -## Replication Setup + + -You can do this in the [Replication](https://supabase.com/dashboard/project/_/database/replication) section in the Dashboard or with the [SQL editor](https://supabase.com/dashboard/project/_/sql): + [Create a new project](https://app.supabase.com) in the Supabase Dashboard. -```sql -begin; + After your project is ready, create a table in your Supabase database. You can do this with either the Table interface or the [SQL Editor](https://app.supabase.com/project/_/sql). --- remove the supabase_realtime publication -drop - publication if exists supabase_realtime; + --- re-create the supabase_realtime publication with no tables -create publication supabase_realtime; + -commit; + + --- add a table to the publication -alter - publication supabase_realtime add table messages; -``` + ```sql + -- Create a table called "todos" + -- with a column to store tasks. + create table todos ( + id serial primary key, + task text + ); + ``` -### Full `old` Record + + -By default, only `new` record changes are sent but if you want to receive the `old` record (previous values) whenever you `UPDATE` or `DELETE` a record, -you can set the `replica identity` of your table to `full`: + -```sql -alter table - messages replica identity full; -``` + + - + -RLS policies are not applied to `DELETE` statements. When RLS is enabled and `replica identity` is set to `full` on a table, the `old` record contains only the primary key(s). + - + -## Schema Changes + -To listen to all changes in the `public` schema: + Let's turn on Row Level Security for this table and allow anonymous access. -```js -const { createClient } = require('@supabase/supabase-js') + -const supabase = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_KEY) + -/* - Channel name can be any string. - Event name can can be one of: - - INSERT - - UPDATE - - DELETE - - * -*/ -const channel = supabase - .channel('schema-db-changes') - .on( - 'postgres_changes', - { - event: '*', - schema: 'public', - }, - (payload) => console.log(payload) - ) - .subscribe() -``` + ```sql + -- Turn on security + alter table "todos" + enable row level security; -## Table Changes + -- Allow anonymous access + create policy "Allow anonymous access" + on todos + for select + to anon + using (true); + ``` -To listen to changes on a table in the `public` schema: + -```js -// Supabase client setup + -const channel = supabase - .channel('table-db-changes') - .on( - 'postgres_changes', - { - event: 'INSERT', - schema: 'public', - table: 'messages', - }, - (payload) => console.log(payload) - ) - .subscribe() -``` + + + -## Filter Changes + Go to your project's [Replication settings](https://supabase.com/dashboard/project/_/database/replication), and under `supabase_realtime`, toggle on the tables you want to listen to. + + + + + + + + + + Install the Supabase JavaScript client. + + + + + + ```bash + npm install @supabase/supabase-js + ``` + + + + + + + + + + This client will be used to listen to Postgres changes. + + + + + + ```js + import { + createClient + } from '@supabase/supabase-js' + + const client = createClient( + 'https://.supabase.co', + '' + ) + ``` + + + + + + + + + Listen to all changes in the `public` schema. + + + + + + ```js + /* + Channel name can be any string except 'realtime'. + Event name can can be one of: + - INSERT + - UPDATE + - DELETE + - * + */ + const channelA = client + .channel('schema-db-changes') + .on( + 'postgres_changes', + { + event: '*', + schema: 'public', + }, + (payload) => console.log(payload) + ) + .subscribe() + ``` + + + + + + Listen to all changes in the `todos` table. + + + + + + ```js + /* + Channel name can be any string except 'realtime'. + Event name can can be one of: + - INSERT + - UPDATE + - DELETE + - * + */ + const channelB = client + .channel('table-db-changes') + .on( + 'postgres_changes', + { + event: 'INSERT', + schema: 'public', + table: 'todos', + }, + (payload) => console.log(payload) + ) + .subscribe() + ``` + + + + + + Listen to changes in the `todos` table when a column's value equals a client-specified value. + + + + + + ```js + /* + Channel name can be any string except 'realtime'. + Event name can can be one of: + - INSERT + - UPDATE + - DELETE + - * + */ + const channelC = client + .channel('table-filter-changes') + .on( + 'postgres_changes', + { + event: 'INSERT', + schema: 'public', + table: 'todos', + filter: 'id=eq.1', + }, + (payload) => console.log(payload) + ) + .subscribe() + ``` + + + + + + Check out the full list of available filters [here](/docs/guides/realtime/quickstarts/postgres-changes#available-filters). + + + + + + + + + Now we can add some data to our table which will trigger `channelA`, `channelB`, and `channelC` event handlers. + + + + + + ```sql + insert into todos (task) + values + ('Change!'); + ``` + + + + + + + +## Available filters Realtime offers filters so you can specify the data your client receives at a more granular level. @@ -122,8 +281,6 @@ Realtime offers filters so you can specify the data your client receives at a mo To listen to changes when a column's value in a table equals a client-specified value: ```js -// Supabase client setup - const channel = supabase .channel('changes') .on( @@ -146,8 +303,6 @@ const channel = supabase To listen to changes when a column's value in a table does not equal a client-specified value: ```js -// Supabase client setup - const channel = supabase .channel('changes') .on( @@ -170,8 +325,6 @@ const channel = supabase To listen to changes when a column's value in a table is less than a client-specified value: ```js -// Supabase client setup - const channel = supabase .channel('changes') .on( @@ -196,8 +349,6 @@ const channel = supabase To listen to changes when a column's value in a table is less than or equal to a client-specified value: ```js -// Supabase client setup - const channel = supabase .channel('changes') .on( @@ -222,8 +373,6 @@ const channel = supabase To listen to changes when a column's value in a table is greater than a client-specified value: ```js -// Supabase client setup - const channel = supabase .channel('changes') .on( @@ -249,8 +398,6 @@ const channel = supabase To listen to changes when a column's value in a table is greater than or equal to a client-specified value: ```js -// Supabase client setup - const channel = supabase .channel('changes') .on( @@ -276,8 +423,6 @@ const channel = supabase To listen to changes when a column's value in a table equals any client-specified values: ```js -// Supabase client setup - const channel = supabase .channel('changes') .on( @@ -297,13 +442,11 @@ const channel = supabase This filter uses Postgres' `= ANY`. Realtime allows a maximum of 100 values for this filter. -## Combination Changes +## Combination changes To listen to different events and schema/tables/filters combinations with the same channel: ```js -// Supabase client setup - const channel = supabase .channel('db-changes') .on( @@ -328,11 +471,40 @@ const channel = supabase .subscribe() ``` -## Custom Tokens +## Full `old` record + +By default, only `new` record changes are sent but if you want to receive the `old` record (previous values) whenever you `UPDATE` or `DELETE` a record, +you can set the `replica identity` of your table to `full`: + +```sql +alter table + messages replica identity full; +``` + + + +RLS policies are not applied to `DELETE` statements. When RLS is enabled and `replica identity` is set to `full` on a table, the `old` record contains only the primary key(s). + + + +## Private schemas + +Postgres Changes works out of the box for tables in the `public` schema. You can listen to tables in your private schemas by granting table `SELECT` permissions to the database role found in your access token. You can run a query similar to the following: + +```sql +grant select on "non_private_schema"."some_table" to authenticated; +``` + + + We strongly encourage you to enable RLS and create policies for tables in private schemas. + Otherwise, any role you grant access to will have unfettered read access to the table. + + +## Custom tokens You may choose to sign your own tokens to customize claims that can be checked in your RLS policies. -Your project JWT secret is found with your [Project API keys](https://supabase.com/dashboard/project/_/settings/api) in your dashboard. +Your project JWT secret is found with your [Project API keys](https://app.supabase.com/project/_/settings/api) in your dashboard. Do not expose the `service_role` token on the client because the role is authorized to bypass @@ -364,7 +536,7 @@ const channel = supabase .subscribe() ``` -### Refreshed Tokens +### Refreshed tokens You will need to refresh tokens on your own, but once generated, you can pass them to Realtime. @@ -376,6 +548,11 @@ For example, if you're using the `supabase-js` `v2` client then you can pass you supabase.realtime.setAuth('fresh-token') ``` +## More Realtime Quickstarts + +- [Broadcast Quickstart](/docs/guides/realtime/quickstarts/broadcast) +- [Presence Quickstart](/docs/guides/realtime/quickstarts/presence) + export const Page = ({ children }) => export default Page diff --git a/apps/docs/pages/guides/realtime/quickstarts/presence.mdx b/apps/docs/pages/guides/realtime/quickstarts/presence.mdx new file mode 100644 index 00000000000..ad89bc70f83 --- /dev/null +++ b/apps/docs/pages/guides/realtime/quickstarts/presence.mdx @@ -0,0 +1,273 @@ +import Layout from '~/layouts/DefaultGuideLayout' +import StepHikeCompact from '~/components/StepHikeCompact' + +export const meta = { + title: 'Presence', + subtitle: "Get up and running with Realtime's Presence feature", + breadcrumb: 'Realtime Presence Quickstart', +} + +Presence utilizes an in-memory conflict-free replicated data type (CRDT) to track and synchronize shared state in an eventually consistent manner. It computes the difference between existing state and new state changes and sends the necessary updates to clients via Broadcast. + +When a new client subscribes to a channel, it will immediately receive the channel's latest state in a single message instead of waiting for all other clients to send their individual states. + +Clients are free to come-and-go as they please, and as long as they are all subscribed to the same channel then they will all have the same Presence state as each other. + +The neat thing about Presence is that if a client is suddenly disconnected (for example, they go offline), their state will be automatically removed from the shared state. If you've ever tried to build an “I'm online” feature which handles unexpected disconnects, you'll appreciate how useful this is. + +## Quick start + +Let's explore how to implement Realtime Presence so you can integrate it into your use case. + + + + + + + + Install the Supabase JavaScript client. + + + + + + ```bash + npm install @supabase/supabase-js + ``` + + + + + + + + + + This client will be used to track Presence state as new clients join and leave the channel. + + Go to your Supabase project's [API Settings](https://supabase.com/dashboard/project/_/settings/api) and grab the `URL` and `anon` public API key. + + + + + + ```js + import { + createClient + } from '@supabase/supabase-js' + + const clientA = createClient( + 'https://.supabase.co', + '' + ) + ``` + + + + + + + + + + A channel's topic can be anything except for `'realtime'`. + + + + + + ```js + const channelA = clientA.channel('room-1') + ``` + + + + + + + + + + Listen to the `sync`, `join`, and `leave` events triggered whenever any client joins or leaves the channel or changes their slice of state. + + Once `clientA` successfully tracks its state, it will trigger its own `sync` and `join` event handlers. + + + + + + ```js + channelA + .on( + 'presence', + { event: 'sync' }, + () => { + const newState = channelA.presenceState() + console.log('sync', newState) + } + ) + .on( + 'presence', + { event: 'join' }, + ({ key, newPresences }) => { + console.log('join', key, newPresences) + } + ) + .on( + 'presence', + { event: 'leave' }, + ({ key, leftPresences }) => { + console.log('leave', key, leftPresences) + } + ) + .subscribe(async (status) => { + if (status === 'SUBSCRIBED') { + const presenceTrackStatus = await channelA.track({ + user: 'user-1', + online_at: new Date().toISOString(), + }) + console.log(presenceTrackStatus) + } + }) + ``` + + + + + + + + + + This client will add to and remove from shared state so other clients can be notified of changes to Presence state. + + + + + + ```js + const clientB = createClient( + 'https://.supabase.co', + '' + ) + ``` + + + + + + + + + + This channel's topic must match `channelA`'s. + + + + + + ```js + const channelB = clientB.channel('room-1') + ``` + + + + + + + + + + Subscribe to channel and add to state. + + This will trigger `clientA`'s `sync` and `join` event handlers. + + + + + + ```js + channelB.subscribe(async (status) => { + if (status === 'SUBSCRIBED') { + const presenceTrackStatus = await channelA.track({ + user: 'user-2', + online_at: new Date().toISOString(), + }) + console.log(presenceTrackStatus) + } + }) + ``` + + + + + + + + + + This will trigger `clientA`'s `sync` and `leave` event handlers. + + + + + + ```js + const untrackPresence = async () => { + const presenceUntrackStatus = await channelB.untrack() + console.log(presenceUntrackStatus) + } + + untrackPresence() + ``` + + + + + + + +## Presence Key + +By default, Presence will generate an `UUIDv1` key on the server to uniquely track a client channel's state but you may pass Presence a custom key when creating the channel. + +```js +import { createClient } from '@supabase/supabase-js' + +const channelC = supabase.channel('test', { + config: { + presence: { + key: 'userId-123', + }, + }, +}) +``` + +## Client-Side Rate Limit + +There is a default client-side rate limit that enables you to send 10 messages per second, or one message every 100 milliseconds. You can customize this when creating the client: + +```js +import { createClient } from '@supabase/supabase-js' + +const supabase = createClient('https://.supabase.co', '', { + realtime: { + params: { + eventsPerSecond: 5, + }, + }, +}) +``` + +By setting `eventsPerSecond` to 5, you can send one message every 200 milliseconds on a per client basis. + +Learn more by visiting the [Quotas](/docs/guides/realtime/quotas) section. + +## More Realtime Quickstarts + +- [Broadcast Quickstart](/docs/guides/realtime/quickstarts/broadcast) +- [Postgres Changes Quickstart](/docs/guides/realtime/quickstarts/postgres-changes) + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/realtime/quotas.mdx b/apps/docs/pages/guides/realtime/quotas.mdx index a27fc95755c..8f9ec1e6121 100644 --- a/apps/docs/pages/guides/realtime/quotas.mdx +++ b/apps/docs/pages/guides/realtime/quotas.mdx @@ -32,7 +32,7 @@ Beyond the Free and Pro plan you can customize your quotas by [contacting suppor Some basic WebSocket message rate limiting is implemented client-side. -For example, the [multiplayer.dev demo](/docs/guides/realtime/quickstart#cursor-positions) instantiates the Supabase client with an `eventsPerSecond` parameter. +For example, the [multiplayer.dev](https://multiplayer.dev) instantiates the Supabase client with an `eventsPerSecond` parameter. ## Quota Errors diff --git a/apps/docs/pages/guides/storage/quickstart.mdx b/apps/docs/pages/guides/storage/quickstart.mdx index 15421921b23..090dabb2690 100644 --- a/apps/docs/pages/guides/storage/quickstart.mdx +++ b/apps/docs/pages/guides/storage/quickstart.mdx @@ -7,7 +7,7 @@ export const meta = { sidebar_label: 'Quickstart', } -This guide shows the basic functionality of Supabase Storage. Find a full [example application on GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/nextjs-ts-user-management) or deploy it with [Vercel for a preview](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fsupabase%2Fsupabase%2Ftree%2Fmaster%2Fexamples%2Fuser-management%2Fnextjs-ts-user-management&project-name=supabase-user-management&repository-name=supabase-user-management&demo-title=Supabase%20User%20Management&demo-description=An%20example%20web%20app%20using%20Supabase%20and%20Next.js&demo-url=https%3A%2F%2Fsupabase-nextjs-ts-user-management.vercel.app&demo-image=https%3A%2F%2Fi.imgur.com%2FZ3HkQqe.png&integration-ids=oac_jUduyjQgOyzev1fjrW83NYOv&external-id=nextjs-user-management). +This guide shows the basic functionality of Supabase Storage. Find a full [example application on GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/nextjs-user-management) or deploy it with [Vercel for a preview](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fsupabase%2Fsupabase%2Ftree%2Fmaster%2Fexamples%2Fuser-management%2Fnextjs-ts-user-management&project-name=supabase-user-management&repository-name=supabase-user-management&demo-title=Supabase%20User%20Management&demo-description=An%20example%20web%20app%20using%20Supabase%20and%20Next.js&demo-url=https%3A%2F%2Fsupabase-nextjs-ts-user-management.vercel.app&demo-image=https%3A%2F%2Fi.imgur.com%2FZ3HkQqe.png&integration-ids=oac_jUduyjQgOyzev1fjrW83NYOv&external-id=nextjs-user-management). diff --git a/apps/www/lib/redirects.js b/apps/www/lib/redirects.js index e41861d6bcf..17b3d26ff4e 100644 --- a/apps/www/lib/redirects.js +++ b/apps/www/lib/redirects.js @@ -2041,4 +2041,24 @@ module.exports = [ source: '/docs/guides/realtime/extensions/postgres-changes', destination: '/docs/guides/realtime/postgres-changes', }, + { + permanent: true, + source: '/docs/guides/realtime/broadcast', + destination: '/docs/guides/realtime/quickstarts/broadcast', + }, + { + permanent: true, + source: '/docs/guides/realtime/presence', + destination: '/docs/guides/realtime/quickstarts/presence', + }, + { + permanent: true, + source: '/docs/guides/realtime/postgres-changes', + destination: '/docs/guides/realtime/quickstarts/postgres-changes', + }, + { + permanent: true, + source: '/docs/guides/realtime/quickstart', + destination: '/docs/guides/realtime/quickstarts/broadcast', + }, ] From 6c86f0b6a92ddc56d75d789ebd133b360f14c8d3 Mon Sep 17 00:00:00 2001 From: Wen Bo Xie <5532241+w3b6x9@users.noreply.github.com> Date: Thu, 29 Jun 2023 13:55:06 -0700 Subject: [PATCH 02/22] Update apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx Co-authored-by: Greg Richardson --- apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx b/apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx index 8b78dabc533..db4089fb156 100644 --- a/apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx +++ b/apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx @@ -11,7 +11,7 @@ Realtime Broadcast follows the [publish-subscribe pattern](https://en.wikipedia. Other clients can receive the message in real-time by subscribing to the channel with topic `room-1`. These clients can continue to receive messages as long as they continue to be online and subscribed to the same channel topic. -A common use-case is sharing a user's cursor position with other clients in an online game. +An example use-case is sharing a user's cursor position with other clients in an online tool or game. ## Quick start From e1fae4eeb8d623f8007a9e227f57418c84ec488b Mon Sep 17 00:00:00 2001 From: Wen Bo Xie <5532241+w3b6x9@users.noreply.github.com> Date: Thu, 29 Jun 2023 13:56:56 -0700 Subject: [PATCH 03/22] Update apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx Co-authored-by: Greg Richardson --- apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx b/apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx index db4089fb156..7f740d219b3 100644 --- a/apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx +++ b/apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx @@ -193,7 +193,7 @@ There are additional Broadcast functionality that you can enable when creating a ### Self-send messages -You can have a client send a message and then receive it by setting Broadcast's `self` config to `true`. +You can have a client broadcast a message and then receive the same message by setting Broadcast's `self` config to `true`. Without this, broadcast messages are only sent to other clients. ```js const channelC = clientC.channel('room-2', { From e1165dc7ddd4d20bd05dd355ff9392f79482fbda Mon Sep 17 00:00:00 2001 From: Wen Bo Xie <5532241+w3b6x9@users.noreply.github.com> Date: Thu, 29 Jun 2023 13:57:20 -0700 Subject: [PATCH 04/22] Update apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx Co-authored-by: Greg Richardson --- apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx b/apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx index 7f740d219b3..64793b52aa2 100644 --- a/apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx +++ b/apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx @@ -243,7 +243,7 @@ channelD.subscribe(async (status) => { }) ``` -If the `ack` config is not set to `true` when creating the channel, the promise returned by call to `channelD.send` will resolve immediately. +Use this to guarantee that the server has received the message before resolving `channelD.send`'s promise. If the `ack` config is not set to `true` when creating the channel, the promise returned by `channelD.send` will resolve immediately. ## Client-side rate limit From e0eeba7e67378d3b3171e6d4c007e890199c7d9b Mon Sep 17 00:00:00 2001 From: Wen Bo Xie <5532241+w3b6x9@users.noreply.github.com> Date: Thu, 29 Jun 2023 14:03:42 -0700 Subject: [PATCH 05/22] Update apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx Co-authored-by: Greg Richardson --- apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx b/apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx index 64793b52aa2..3ebbec99d55 100644 --- a/apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx +++ b/apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx @@ -247,7 +247,7 @@ Use this to guarantee that the server has received the message before resolving ## Client-side rate limit -There is a default client-side rate limit that enables you to send 10 messages per second, or one message every 100 milliseconds. You can customize this when creating the client: +By default the client will rate limit itself at 10 messages per second (1 message every 100 milliseconds). You can customize this when creating the client: ```js import { createClient } from '@supabase/supabase-js' From fee6b8916830e716ba17c9ebe1e9af959df61818 Mon Sep 17 00:00:00 2001 From: Wen Bo Xie <5532241+w3b6x9@users.noreply.github.com> Date: Thu, 29 Jun 2023 14:04:03 -0700 Subject: [PATCH 06/22] Update apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx Co-authored-by: Greg Richardson --- .../docs/pages/guides/realtime/quickstarts/postgres-changes.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx b/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx index 3a4e207b25f..a8264c5807a 100644 --- a/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx +++ b/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx @@ -67,7 +67,7 @@ Let's explore how to implement Realtime Postgres Changes so you can integrate it - Let's turn on Row Level Security for this table and allow anonymous access. + In this example we'll turn on [Row Level Security](/docs/guides/auth/row-level-security) for this table and allow anonymous access. In production, be sure to secure your application with the appropriate permissions. From 11105201f02d6ee74b08e2d5e372b577e09faefa Mon Sep 17 00:00:00 2001 From: Wen Bo Xie <5532241+w3b6x9@users.noreply.github.com> Date: Thu, 29 Jun 2023 14:04:21 -0700 Subject: [PATCH 07/22] Update apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx Co-authored-by: Greg Richardson --- .../pages/guides/realtime/quickstarts/postgres-changes.mdx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx b/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx index a8264c5807a..2842472f0ad 100644 --- a/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx +++ b/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx @@ -496,8 +496,9 @@ grant select on "non_private_schema"."some_table" to authenticated; ``` - We strongly encourage you to enable RLS and create policies for tables in private schemas. - Otherwise, any role you grant access to will have unfettered read access to the table. + +We strongly encourage you to enable RLS and create policies for tables in private schemas. Otherwise, any role you grant access to will have unfettered read access to the table. + ## Custom tokens From 6384bd4d862ab4109552b070f311c2c2d9bd1f6a Mon Sep 17 00:00:00 2001 From: Wen Bo Xie <5532241+w3b6x9@users.noreply.github.com> Date: Thu, 29 Jun 2023 14:04:42 -0700 Subject: [PATCH 08/22] Update apps/docs/pages/guides/realtime/quickstarts/presence.mdx Co-authored-by: Greg Richardson --- apps/docs/pages/guides/realtime/quickstarts/presence.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/docs/pages/guides/realtime/quickstarts/presence.mdx b/apps/docs/pages/guides/realtime/quickstarts/presence.mdx index ad89bc70f83..0349f3c61c7 100644 --- a/apps/docs/pages/guides/realtime/quickstarts/presence.mdx +++ b/apps/docs/pages/guides/realtime/quickstarts/presence.mdx @@ -6,6 +6,7 @@ export const meta = { subtitle: "Get up and running with Realtime's Presence feature", breadcrumb: 'Realtime Presence Quickstart', } +Presence can be used to share state between clients. Each client maintains their own piece of state within the shared state. Presence utilizes an in-memory conflict-free replicated data type (CRDT) to track and synchronize shared state in an eventually consistent manner. It computes the difference between existing state and new state changes and sends the necessary updates to clients via Broadcast. From 66d8d36a3b4333aef31655c2a9e722e9a27fb3c7 Mon Sep 17 00:00:00 2001 From: Wen Bo Xie <5532241+w3b6x9@users.noreply.github.com> Date: Thu, 29 Jun 2023 14:04:56 -0700 Subject: [PATCH 09/22] Update apps/docs/pages/guides/realtime/quickstarts/presence.mdx Co-authored-by: Greg Richardson --- apps/docs/pages/guides/realtime/quickstarts/presence.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/realtime/quickstarts/presence.mdx b/apps/docs/pages/guides/realtime/quickstarts/presence.mdx index 0349f3c61c7..fa152acec7b 100644 --- a/apps/docs/pages/guides/realtime/quickstarts/presence.mdx +++ b/apps/docs/pages/guides/realtime/quickstarts/presence.mdx @@ -246,7 +246,7 @@ const channelC = supabase.channel('test', { ## Client-Side Rate Limit -There is a default client-side rate limit that enables you to send 10 messages per second, or one message every 100 milliseconds. You can customize this when creating the client: +By default the client will rate limit itself at 10 messages per second (1 message every 100 milliseconds). You can customize this when creating the client: ```js import { createClient } from '@supabase/supabase-js' From a36a08a0f3c7ca209a57020175b554d764242116 Mon Sep 17 00:00:00 2001 From: Wen Bo Xie <5532241+w3b6x9@users.noreply.github.com> Date: Thu, 29 Jun 2023 14:05:15 -0700 Subject: [PATCH 10/22] Update apps/docs/pages/guides/realtime/quickstarts/presence.mdx Co-authored-by: Greg Richardson --- apps/docs/pages/guides/realtime/quickstarts/presence.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/realtime/quickstarts/presence.mdx b/apps/docs/pages/guides/realtime/quickstarts/presence.mdx index fa152acec7b..6a8fc72d914 100644 --- a/apps/docs/pages/guides/realtime/quickstarts/presence.mdx +++ b/apps/docs/pages/guides/realtime/quickstarts/presence.mdx @@ -91,7 +91,7 @@ Let's explore how to implement Realtime Presence so you can integrate it into yo Listen to the `sync`, `join`, and `leave` events triggered whenever any client joins or leaves the channel or changes their slice of state. - Once `clientA` successfully tracks its state, it will trigger its own `sync` and `join` event handlers. + To begin tracking state, `clientA` calls `channelA.track()`, passing in the desired state to share. Once `clientA` successfully tracks its state, it will automatically trigger its own `sync` and `join` event handlers. From ee1d97d419ada3914a655b47406a712994afbecf Mon Sep 17 00:00:00 2001 From: Wen Bo Xie <5532241+w3b6x9@users.noreply.github.com> Date: Thu, 29 Jun 2023 14:05:35 -0700 Subject: [PATCH 11/22] Update apps/docs/pages/guides/realtime/quickstarts/presence.mdx Co-authored-by: Greg Richardson --- apps/docs/pages/guides/realtime/quickstarts/presence.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/realtime/quickstarts/presence.mdx b/apps/docs/pages/guides/realtime/quickstarts/presence.mdx index 6a8fc72d914..f001fc2ae5b 100644 --- a/apps/docs/pages/guides/realtime/quickstarts/presence.mdx +++ b/apps/docs/pages/guides/realtime/quickstarts/presence.mdx @@ -230,7 +230,7 @@ Let's explore how to implement Realtime Presence so you can integrate it into yo ## Presence Key -By default, Presence will generate an `UUIDv1` key on the server to uniquely track a client channel's state but you may pass Presence a custom key when creating the channel. +By default, Presence will generate a unique `UUIDv1` key on the server to track a client channel's state. If you prefer, you can provide a custom key when creating the channel. This key should be unique among clients. ```js import { createClient } from '@supabase/supabase-js' From bf6ae77345bb20d5812764a1f06ab62cf78d84a6 Mon Sep 17 00:00:00 2001 From: Wen Bo Xie <5532241+w3b6x9@users.noreply.github.com> Date: Thu, 29 Jun 2023 14:05:52 -0700 Subject: [PATCH 12/22] Update apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx Co-authored-by: Greg Richardson --- .../pages/guides/realtime/quickstarts/postgres-changes.mdx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx b/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx index 2842472f0ad..ec6b3c08961 100644 --- a/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx +++ b/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx @@ -146,7 +146,12 @@ Let's explore how to implement Realtime Postgres Changes so you can integrate it - Listen to all changes in the `public` schema. + Listen to changes on all tables in the `public` schema by setting the `schema` property to 'public' and event name to `*`. The event name can be one of: + - `INSERT` + - `UPDATE` + - `DELETE` + - `*` + The channel name can be any string except 'realtime'. From 4ef51d46ab510b4669e5e16d6cfc6230e4348b82 Mon Sep 17 00:00:00 2001 From: Wen Bo Xie <5532241+w3b6x9@users.noreply.github.com> Date: Thu, 29 Jun 2023 14:06:13 -0700 Subject: [PATCH 13/22] Update apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx Co-authored-by: Greg Richardson --- .../pages/guides/realtime/quickstarts/postgres-changes.mdx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx b/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx index ec6b3c08961..e747c47a464 100644 --- a/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx +++ b/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx @@ -478,8 +478,7 @@ const channel = supabase ## Full `old` record -By default, only `new` record changes are sent but if you want to receive the `old` record (previous values) whenever you `UPDATE` or `DELETE` a record, -you can set the `replica identity` of your table to `full`: +By default, only `new` record changes are sent but if you want to receive the `old` record (previous values) whenever you `UPDATE` or `DELETE` a record, you can set the `replica identity` of your table to `full`: ```sql alter table From 1998ffa307fe68f8700f1717b7205d0851615fb8 Mon Sep 17 00:00:00 2001 From: Wen Bo Xie <5532241+w3b6x9@users.noreply.github.com> Date: Thu, 29 Jun 2023 14:07:12 -0700 Subject: [PATCH 14/22] Update apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx Co-authored-by: Greg Richardson --- .../guides/realtime/quickstarts/postgres-changes.mdx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx b/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx index e747c47a464..1fbce05035f 100644 --- a/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx +++ b/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx @@ -190,14 +190,6 @@ Let's explore how to implement Realtime Postgres Changes so you can integrate it ```js - /* - Channel name can be any string except 'realtime'. - Event name can can be one of: - - INSERT - - UPDATE - - DELETE - - * - */ const channelB = client .channel('table-db-changes') .on( From f039c2493c09380aa57a20b4dd1137ed17531084 Mon Sep 17 00:00:00 2001 From: Wen Bo Xie <5532241+w3b6x9@users.noreply.github.com> Date: Thu, 29 Jun 2023 14:07:23 -0700 Subject: [PATCH 15/22] Update apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx Co-authored-by: Greg Richardson --- .../guides/realtime/quickstarts/postgres-changes.mdx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx b/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx index 1fbce05035f..c03e28eee9c 100644 --- a/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx +++ b/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx @@ -158,14 +158,6 @@ Let's explore how to implement Realtime Postgres Changes so you can integrate it ```js - /* - Channel name can be any string except 'realtime'. - Event name can can be one of: - - INSERT - - UPDATE - - DELETE - - * - */ const channelA = client .channel('schema-db-changes') .on( From 8edffa103583f556ded0779a520f8ff2ebcb1bd3 Mon Sep 17 00:00:00 2001 From: Wen Bo Xie <5532241+w3b6x9@users.noreply.github.com> Date: Thu, 29 Jun 2023 14:07:36 -0700 Subject: [PATCH 16/22] Update apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx Co-authored-by: Greg Richardson --- .../docs/pages/guides/realtime/quickstarts/postgres-changes.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx b/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx index c03e28eee9c..b4f59986a05 100644 --- a/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx +++ b/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx @@ -175,7 +175,7 @@ Let's explore how to implement Realtime Postgres Changes so you can integrate it - Listen to all changes in the `todos` table. + Listen to just inserts in the `todos` table by setting the `table` property to 'todos' and event name to `INSERT`. From 780e8628c0487bb6333b5bf0288c2d180d79309b Mon Sep 17 00:00:00 2001 From: Wen Bo Xie <5532241+w3b6x9@users.noreply.github.com> Date: Thu, 29 Jun 2023 14:07:47 -0700 Subject: [PATCH 17/22] Update apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx Co-authored-by: Greg Richardson --- .../guides/realtime/quickstarts/postgres-changes.mdx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx b/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx index b4f59986a05..4afc348a2e5 100644 --- a/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx +++ b/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx @@ -207,14 +207,6 @@ Let's explore how to implement Realtime Postgres Changes so you can integrate it ```js - /* - Channel name can be any string except 'realtime'. - Event name can can be one of: - - INSERT - - UPDATE - - DELETE - - * - */ const channelC = client .channel('table-filter-changes') .on( From c9cd7c69d5cf06f199736dd3a10ddb9333477f5b Mon Sep 17 00:00:00 2001 From: Wen Bo Xie <5532241+w3b6x9@users.noreply.github.com> Date: Thu, 29 Jun 2023 14:08:08 -0700 Subject: [PATCH 18/22] Update apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx Co-authored-by: Greg Richardson --- .../docs/pages/guides/realtime/quickstarts/postgres-changes.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx b/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx index 4afc348a2e5..9bbd62e43bf 100644 --- a/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx +++ b/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx @@ -200,7 +200,7 @@ Let's explore how to implement Realtime Postgres Changes so you can integrate it - Listen to changes in the `todos` table when a column's value equals a client-specified value. + Listen to changes in the `todos` table when a column's value equals a specified value. In this example, we only listen to inserts on `todos` where the row `id` is 1. From dbb4cb0b0f1dfdecd8dd2c062b2b784edeefb01e Mon Sep 17 00:00:00 2001 From: Wen Bo Xie <5532241+w3b6x9@users.noreply.github.com> Date: Thu, 29 Jun 2023 14:08:28 -0700 Subject: [PATCH 19/22] Update apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx Co-authored-by: Greg Richardson --- .../docs/pages/guides/realtime/quickstarts/postgres-changes.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx b/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx index 9bbd62e43bf..0a0d89a1bfd 100644 --- a/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx +++ b/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx @@ -226,7 +226,7 @@ Let's explore how to implement Realtime Postgres Changes so you can integrate it - Check out the full list of available filters [here](/docs/guides/realtime/quickstarts/postgres-changes#available-filters). + Check out the [full list of available filters](/docs/guides/realtime/quickstarts/postgres-changes#available-filters). From a04bdb4d40fb666ebf8a7663d8297078551ccab4 Mon Sep 17 00:00:00 2001 From: Wen Bo Xie Date: Thu, 29 Jun 2023 14:36:55 -0700 Subject: [PATCH 20/22] docs: change Realtime header from Quickstarts to Features --- .../NavigationMenu/NavigationMenu.constants.ts | 8 ++++---- apps/docs/pages/guides/realtime.mdx | 6 +++--- .../realtime/{quickstarts => }/broadcast.mdx | 4 ++-- apps/docs/pages/guides/realtime/concepts.mdx | 6 +++--- .../{quickstarts => }/postgres-changes.mdx | 11 ++++++----- .../realtime/{quickstarts => }/presence.mdx | 5 +++-- apps/www/lib/redirects.js | 17 +---------------- 7 files changed, 22 insertions(+), 35 deletions(-) rename apps/docs/pages/guides/realtime/{quickstarts => }/broadcast.mdx (97%) rename apps/docs/pages/guides/realtime/{quickstarts => }/postgres-changes.mdx (97%) rename apps/docs/pages/guides/realtime/{quickstarts => }/presence.mdx (97%) diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts index 995a6ac6e18..1a08ecc0efe 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts @@ -809,14 +809,14 @@ export const realtime: NavMenuConstant = { url: '/guides/realtime/concepts', }, { - name: 'Quickstarts', + name: 'Features', url: undefined, items: [ - { name: 'Broadcast', url: '/guides/realtime/quickstarts/broadcast' }, - { name: 'Presence', url: '/guides/realtime/quickstarts/presence' }, + { name: 'Broadcast', url: '/guides/realtime/broadcast' }, + { name: 'Presence', url: '/guides/realtime/presence' }, { name: 'Postgres Changes', - url: '/guides/realtime/quickstarts/postgres-changes', + url: '/guides/realtime/postgres-changes', }, ], }, diff --git a/apps/docs/pages/guides/realtime.mdx b/apps/docs/pages/guides/realtime.mdx index 2c3dbdc0c91..b11c3a56049 100644 --- a/apps/docs/pages/guides/realtime.mdx +++ b/apps/docs/pages/guides/realtime.mdx @@ -9,9 +9,9 @@ export const meta = { Supabase provides a globally distributed cluster of [Realtime](https://github.com/supabase/realtime) servers that enable the following functionality: -- [Broadcast](/docs/guides/realtime/quickstarts/broadcast): Send ephemeral messages from client to clients with low latency. -- [Presence](/docs/guides/realtime/quickstarts/presence): Track and synchronize shared state between clients. -- [Postgres Changes](/docs/guides/realtime/quickstarts/postgres-changes): Listen to Postgres database changes and send them to authorized clients. +- [Broadcast](/docs/guides/realtime/broadcast): Send ephemeral messages from client to clients with low latency. +- [Presence](/docs/guides/realtime/presence): Track and synchronize shared state between clients. +- [Postgres Changes](/docs/guides/realtime/postgres-changes): Listen to Postgres database changes and send them to authorized clients. A [channel](https://hexdocs.pm/phoenix/channels.html) is the basic building block of Realtime and narrows the scope of data flow to subscribed clients. You can think of a channel as a chatroom where participants are able to see who's online and send and receive messages; similar to a Discord or Slack channel. diff --git a/apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx b/apps/docs/pages/guides/realtime/broadcast.mdx similarity index 97% rename from apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx rename to apps/docs/pages/guides/realtime/broadcast.mdx index 3ebbec99d55..11468464e77 100644 --- a/apps/docs/pages/guides/realtime/quickstarts/broadcast.mdx +++ b/apps/docs/pages/guides/realtime/broadcast.mdx @@ -267,8 +267,8 @@ Learn more by visiting the [Quotas](/docs/guides/realtime/quotas) section. ## More Realtime Quickstarts -- [Presence Quickstart](/docs/guides/realtime/quickstarts/presence) -- [Postgres Changes Quickstart](/docs/guides/realtime/quickstarts/postgres-changes) +- [Presence Quickstart](/docs/guides/realtime/presence) +- [Postgres Changes Quickstart](/docs/guides/realtime/postgres-changes) export const Page = ({ children }) => diff --git a/apps/docs/pages/guides/realtime/concepts.mdx b/apps/docs/pages/guides/realtime/concepts.mdx index 46cce126a11..af4dee031bd 100644 --- a/apps/docs/pages/guides/realtime/concepts.mdx +++ b/apps/docs/pages/guides/realtime/concepts.mdx @@ -9,9 +9,9 @@ export const meta = { Supabase Realtime lets you to build real-time applications with collaborative/multiplayer functionality. It includes 3 core features: -- [Broadcast](/docs/guides/realtime/quickstarts/broadcast): sends rapid, ephemeral messages to other connected clients. You can use it to track mouse movements, for example. -- [Presence](/docs/guides/realtime/quickstarts/presence): sends user state between connected clients. You can use it to show an "online" status, which disappears when a user is disconnected. -- [Postgres Changes](/docs/guides/realtime/quickstarts/postgres-changes): receives database changes in real-time. +- [Broadcast](/docs/guides/realtime/broadcast): sends rapid, ephemeral messages to other connected clients. You can use it to track mouse movements, for example. +- [Presence](/docs/guides/realtime/presence): sends user state between connected clients. You can use it to show an "online" status, which disappears when a user is disconnected. +- [Postgres Changes](/docs/guides/realtime/postgres-changes): receives database changes in real-time. ## Channels diff --git a/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx b/apps/docs/pages/guides/realtime/postgres-changes.mdx similarity index 97% rename from apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx rename to apps/docs/pages/guides/realtime/postgres-changes.mdx index 0a0d89a1bfd..fff858d3903 100644 --- a/apps/docs/pages/guides/realtime/quickstarts/postgres-changes.mdx +++ b/apps/docs/pages/guides/realtime/postgres-changes.mdx @@ -1,9 +1,10 @@ import Layout from '~/layouts/DefaultGuideLayout' +import StepHikeCompact from '~/components/StepHikeCompact' export const meta = { - id: 'postgres-changes', title: 'Postgres Changes', - description: "Getting started with Realtime's Postgres Changes feature", + subtitle: "Get up and running with Realtime's Postgres Changes feature", + breadcrumb: 'Realtime Postgres Changes Quickstart', } Realtime's Postgres Changes feature listens for database changes and sends them to clients. Clients are required to subscribe with a JWT dictating which changes they are allowed to receive based on the database's [Row Level Security](/docs/guides/auth/row-level-security). @@ -226,7 +227,7 @@ Let's explore how to implement Realtime Postgres Changes so you can integrate it - Check out the [full list of available filters](/docs/guides/realtime/quickstarts/postgres-changes#available-filters). + Check out the [full list of available filters](/docs/guides/realtime/postgres-changes#available-filters). @@ -531,8 +532,8 @@ supabase.realtime.setAuth('fresh-token') ## More Realtime Quickstarts -- [Broadcast Quickstart](/docs/guides/realtime/quickstarts/broadcast) -- [Presence Quickstart](/docs/guides/realtime/quickstarts/presence) +- [Broadcast Quickstart](/docs/guides/realtime/broadcast) +- [Presence Quickstart](/docs/guides/realtime/presence) export const Page = ({ children }) => diff --git a/apps/docs/pages/guides/realtime/quickstarts/presence.mdx b/apps/docs/pages/guides/realtime/presence.mdx similarity index 97% rename from apps/docs/pages/guides/realtime/quickstarts/presence.mdx rename to apps/docs/pages/guides/realtime/presence.mdx index f001fc2ae5b..311e6aec849 100644 --- a/apps/docs/pages/guides/realtime/quickstarts/presence.mdx +++ b/apps/docs/pages/guides/realtime/presence.mdx @@ -6,6 +6,7 @@ export const meta = { subtitle: "Get up and running with Realtime's Presence feature", breadcrumb: 'Realtime Presence Quickstart', } + Presence can be used to share state between clients. Each client maintains their own piece of state within the shared state. Presence utilizes an in-memory conflict-free replicated data type (CRDT) to track and synchronize shared state in an eventually consistent manner. It computes the difference between existing state and new state changes and sends the necessary updates to clients via Broadcast. @@ -266,8 +267,8 @@ Learn more by visiting the [Quotas](/docs/guides/realtime/quotas) section. ## More Realtime Quickstarts -- [Broadcast Quickstart](/docs/guides/realtime/quickstarts/broadcast) -- [Postgres Changes Quickstart](/docs/guides/realtime/quickstarts/postgres-changes) +- [Broadcast Quickstart](/docs/guides/realtime/broadcast) +- [Postgres Changes Quickstart](/docs/guides/realtime/postgres-changes) export const Page = ({ children }) => diff --git a/apps/www/lib/redirects.js b/apps/www/lib/redirects.js index 17b3d26ff4e..e32c48b1759 100644 --- a/apps/www/lib/redirects.js +++ b/apps/www/lib/redirects.js @@ -2041,24 +2041,9 @@ module.exports = [ source: '/docs/guides/realtime/extensions/postgres-changes', destination: '/docs/guides/realtime/postgres-changes', }, - { - permanent: true, - source: '/docs/guides/realtime/broadcast', - destination: '/docs/guides/realtime/quickstarts/broadcast', - }, - { - permanent: true, - source: '/docs/guides/realtime/presence', - destination: '/docs/guides/realtime/quickstarts/presence', - }, - { - permanent: true, - source: '/docs/guides/realtime/postgres-changes', - destination: '/docs/guides/realtime/quickstarts/postgres-changes', - }, { permanent: true, source: '/docs/guides/realtime/quickstart', - destination: '/docs/guides/realtime/quickstarts/broadcast', + destination: '/docs/guides/realtime', }, ] From 543c4320849355a519619f75dcffa8b99b6b4d45 Mon Sep 17 00:00:00 2001 From: Greg Richardson Date: Thu, 29 Jun 2023 17:57:46 -0600 Subject: [PATCH 21/22] docs(realtime): line break in postgres changes quickstart --- apps/docs/pages/guides/realtime/postgres-changes.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/docs/pages/guides/realtime/postgres-changes.mdx b/apps/docs/pages/guides/realtime/postgres-changes.mdx index fff858d3903..57b1d355830 100644 --- a/apps/docs/pages/guides/realtime/postgres-changes.mdx +++ b/apps/docs/pages/guides/realtime/postgres-changes.mdx @@ -152,6 +152,7 @@ Let's explore how to implement Realtime Postgres Changes so you can integrate it - `UPDATE` - `DELETE` - `*` + The channel name can be any string except 'realtime'. From 4dbc8db3c2ecfae427f8a21201314e79e2dcfba0 Mon Sep 17 00:00:00 2001 From: Wen Bo Xie Date: Thu, 29 Jun 2023 17:12:47 -0700 Subject: [PATCH 22/22] docs: update realtime broadcast listening language --- apps/docs/pages/guides/realtime/broadcast.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/realtime/broadcast.mdx b/apps/docs/pages/guides/realtime/broadcast.mdx index 11468464e77..90055d2c2ae 100644 --- a/apps/docs/pages/guides/realtime/broadcast.mdx +++ b/apps/docs/pages/guides/realtime/broadcast.mdx @@ -86,7 +86,7 @@ Let's explore how to implement Realtime Broadcast so you can integrate it into y - Specify the Broadcast event you want the `on` handler to listen for. The event name can be anything. + Specify the Broadcast event you want the `on` handler to listen for. This event name can be anything you want. We'll send a broadcast message with this event name later on.