Files
supabase/apps/docs/content/guides/realtime/subscribing-to-database-changes.mdx
Anthony Lio 71d652483e fix(docs): youtube iframe lack titles (#50225)
## 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 -->
2026-09-11 23:37:52 +03:00

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()
```