mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 10:55:06 +03:00
## What kind of change does this PR introduce? a11y bug fix on youtube embed ## What is the current behavior? YouTube iframes across guide pages have no `title` attribute, so screen readers announce them as an unnamed frame ## What is the new behavior? - extracts a `YouTube.tsx` ui component - adds `<YouTube id title />` + `title` as a required prop ## Test 1. visit `/docs/guides/ai/examples/openai` <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Documentation** - Standardized embedded YouTube videos across guides with a consistent video player. - Added descriptive titles to improve accessibility and clarity. - Preserved existing video content and playback behavior. - Updated video embeds across AI, authentication, database, functions, realtime, self-hosting, storage, and migration documentation. - **New Features** - Added privacy-enhanced YouTube playback for embedded documentation videos. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
167 lines
5.6 KiB
Plaintext
167 lines
5.6 KiB
Plaintext
---
|
|
id: 'subscribing-to-database-changes'
|
|
title: 'Subscribing to Database Changes'
|
|
subtitle: 'Listen to database changes in real-time from your website or application.'
|
|
description: 'Listen to database changes in real-time from your website or application.'
|
|
sidebar_label: 'Videos'
|
|
---
|
|
|
|
You can use Supabase to subscribe to real-time database changes. There are two options available:
|
|
|
|
1. [Broadcast](/docs/guides/realtime/broadcast). This is the recommended method for scalability and security.
|
|
1. [Postgres Changes](/docs/guides/realtime/postgres-changes). This is a simpler method. It requires less setup, but does not scale as well as Broadcast.
|
|
|
|
## Using Broadcast
|
|
|
|
To automatically send messages when a record is created, updated, or deleted, we can attach a [Postgres trigger](/docs/guides/database/postgres/triggers) to any table. Supabase Realtime provides a `realtime.broadcast_changes()` function which we can use in conjunction with a trigger. This function will use a private channel and needs broadcast authorization RLS policies to be met.
|
|
|
|
### Broadcast authorization
|
|
|
|
[Realtime Authorization](/docs/guides/realtime/authorization) is required for receiving Broadcast messages. This is an example of a policy that allows authenticated users to listen to messages from topics:
|
|
|
|
{/* prettier-ignore */}
|
|
```sql
|
|
create policy "Authenticated users can receive broadcasts"
|
|
on "realtime"."messages"
|
|
for select
|
|
to authenticated
|
|
using ( true );
|
|
```
|
|
|
|
### Create a trigger function
|
|
|
|
Create a function to call whenever a record is created, updated, or deleted. This function will make use of some of Postgres's native [trigger variables](https://www.postgresql.org/docs/current/plpgsql-trigger.html#PLPGSQL-DML-TRIGGER). For this example, we want to have a topic with the name `topic:<record id>` to which we're going to broadcast events.
|
|
|
|
{/* prettier-ignore */}
|
|
```sql
|
|
create or replace function public.your_table_changes()
|
|
returns trigger
|
|
security definer
|
|
language plpgsql
|
|
as $$
|
|
begin
|
|
perform realtime.broadcast_changes(
|
|
'topic:' || coalesce(NEW.id, OLD.id) ::text, -- topic - the topic to which you're broadcasting where you can use the topic id to build the topic name
|
|
TG_OP, -- event - the event that triggered the function
|
|
TG_OP, -- operation - the operation that triggered the function
|
|
TG_TABLE_NAME, -- table - the table that caused the trigger
|
|
TG_TABLE_SCHEMA, -- schema - the schema of the table that caused the trigger
|
|
NEW, -- new record - the record after the change
|
|
OLD -- old record - the record before the change
|
|
);
|
|
return null;
|
|
end;
|
|
$$;
|
|
```
|
|
|
|
### Create a trigger
|
|
|
|
Set up a trigger so the function runs after any changes to the table.
|
|
|
|
{/* prettier-ignore */}
|
|
```sql
|
|
create trigger handle_your_table_changes
|
|
after insert or update or delete
|
|
on public.your_table
|
|
for each row
|
|
execute function your_table_changes ();
|
|
```
|
|
|
|
#### Listening on client side
|
|
|
|
Finally, on the client side, listen to the topic `topic:<record_id>` to receive the events. Remember to set the channel as a private channel, since `realtime.broadcast_changes` uses Realtime Authorization.
|
|
|
|
```js
|
|
import { createClient } from '@supabase/supabase-js'
|
|
|
|
const supabase = createClient('your_project_url', 'your_supabase_api_key')
|
|
|
|
// ---cut---
|
|
const gameId = 'id'
|
|
await supabase.realtime.setAuth() // Needed for Realtime Authorization
|
|
const changes = supabase
|
|
.channel(`topic:${gameId}`, {
|
|
config: { private: true },
|
|
})
|
|
.on('broadcast', { event: 'INSERT' }, (payload) => console.log(payload))
|
|
.on('broadcast', { event: 'UPDATE' }, (payload) => console.log(payload))
|
|
.on('broadcast', { event: 'DELETE' }, (payload) => console.log(payload))
|
|
.subscribe()
|
|
```
|
|
|
|
## Using Postgres Changes
|
|
|
|
Postgres Changes require minimal setup, but have some [limitations](/docs/guides/realtime/postgres-changes#limitations) as your application scales. We recommend using Broadcast for most use cases.
|
|
|
|
<YouTube id="2rUjcmgZDwQ" title="Subscribing to Postgres changes with Realtime" />
|
|
|
|
### Enable Postgres Changes
|
|
|
|
You'll first need to create a `supabase_realtime` publication and add your tables (that you want to subscribe to) 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
|
|
create publication supabase_realtime;
|
|
|
|
commit;
|
|
|
|
-- add a table called 'messages' to the publication
|
|
-- (update this to match your tables)
|
|
alter
|
|
publication supabase_realtime add table messages;
|
|
```
|
|
|
|
### Streaming inserts
|
|
|
|
You can use the `INSERT` event to stream all new rows.
|
|
|
|
```js
|
|
// @noImplicitAny: false
|
|
import { createClient } from '@supabase/supabase-js'
|
|
|
|
const supabase = createClient('your_project_url', 'your_supabase_api_key')
|
|
|
|
// ---cut---
|
|
const channel = supabase
|
|
.channel('schema-db-changes')
|
|
.on(
|
|
'postgres_changes',
|
|
{
|
|
event: 'INSERT',
|
|
schema: 'public',
|
|
},
|
|
(payload) => console.log(payload)
|
|
)
|
|
.subscribe()
|
|
```
|
|
|
|
### Streaming updates
|
|
|
|
You can use the `UPDATE` event to stream all updated rows.
|
|
|
|
```js
|
|
// @noImplicitAny: false
|
|
import { createClient } from '@supabase/supabase-js'
|
|
|
|
const supabase = createClient('your_project_url', 'your_supabase_api_key')
|
|
|
|
// ---cut---
|
|
const channel = supabase
|
|
.channel('schema-db-changes')
|
|
.on(
|
|
'postgres_changes',
|
|
{
|
|
event: 'UPDATE',
|
|
schema: 'public',
|
|
},
|
|
(payload) => console.log(payload)
|
|
)
|
|
.subscribe()
|
|
```
|