mirror of
https://github.com/supabase/supabase.git
synced 2026-07-04 11:34:23 +08:00
237 lines
4.1 KiB
Plaintext
237 lines
4.1 KiB
Plaintext
---
|
|
id: subscribe
|
|
title: "on().subscribe()"
|
|
slug: subscribe
|
|
custom_edit_url: https://github.com/supabase/supabase/edit/master/web/spec/dart.yml
|
|
---
|
|
|
|
import Tabs from '@theme/Tabs';
|
|
import TabsPanel from '@theme/TabsPanel';
|
|
|
|
Subscribe to realtime changes in your database.
|
|
|
|
|
|
<Tabs
|
|
defaultActiveId="dart"
|
|
groupId="reference/dart"
|
|
values={[{ label: 'Dart', value: 'dart' }]}>
|
|
|
|
<TabsPanel id="dart" label="dart">
|
|
|
|
```dart
|
|
final mySubscription = supabase
|
|
.from('countries')
|
|
.on(SupabaseEventTypes.all, (payload) {
|
|
// Handle realtime payload
|
|
})
|
|
.subscribe();
|
|
```
|
|
|
|
|
|
</TabsPanel>
|
|
|
|
</Tabs>
|
|
|
|
|
|
|
|
|
|
|
|
## Notes
|
|
|
|
- Realtime is disabled by default for new Projects for better database performance and security. You can turn it on by [managing replication](/docs/guides/api#managing-realtime).
|
|
- If you want to receive the "previous" data for updates and deletes, you will need to set `REPLICA IDENTITY` to `FULL`, like this: `ALTER TABLE your_table REPLICA IDENTITY FULL;`
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Examples
|
|
|
|
### Listen to all database changes
|
|
|
|
|
|
|
|
<Tabs
|
|
defaultActiveId="dart"
|
|
groupId="reference/dart"
|
|
values={[{ label: 'Dart', value: 'dart' }]}>
|
|
|
|
<TabsPanel id="dart" label="dart">
|
|
|
|
```dart
|
|
final mySubscription = supabase
|
|
.from('countries')
|
|
.on(SupabaseEventTypes.all, (payload) {
|
|
// Handle realtime payload
|
|
})
|
|
.subscribe();
|
|
```
|
|
|
|
|
|
</TabsPanel>
|
|
|
|
</Tabs>
|
|
|
|
### Listening to a specific table
|
|
|
|
|
|
|
|
<Tabs
|
|
defaultActiveId="dart"
|
|
groupId="reference/dart"
|
|
values={[{ label: 'Dart', value: 'dart' }]}>
|
|
|
|
<TabsPanel id="dart" label="dart">
|
|
|
|
```dart
|
|
final mySubscription = supabase
|
|
.from('countries')
|
|
.on(SupabaseEventTypes.all, (payload) {
|
|
// Handle realtime payload
|
|
})
|
|
.subscribe();
|
|
```
|
|
|
|
|
|
</TabsPanel>
|
|
|
|
</Tabs>
|
|
|
|
### Listening to inserts
|
|
|
|
|
|
|
|
<Tabs
|
|
defaultActiveId="dart"
|
|
groupId="reference/dart"
|
|
values={[{ label: 'Dart', value: 'dart' }]}>
|
|
|
|
<TabsPanel id="dart" label="dart">
|
|
|
|
```dart
|
|
final mySubscription = supabase
|
|
.from('countries')
|
|
.on(SupabaseEventTypes.insert, (payload) {
|
|
// Handle realtime payload
|
|
})
|
|
.subscribe();
|
|
```
|
|
|
|
|
|
</TabsPanel>
|
|
|
|
</Tabs>
|
|
|
|
### Listening to updates
|
|
|
|
By default, Supabase will send only the updated record. If you want to receive the previous values as well you can
|
|
enable full replication for the table you are listening too:
|
|
|
|
```sql
|
|
alter table "your_table" replica identity full;
|
|
```
|
|
|
|
|
|
<Tabs
|
|
defaultActiveId="dart"
|
|
groupId="reference/dart"
|
|
values={[{ label: 'Dart', value: 'dart' }]}>
|
|
|
|
<TabsPanel id="dart" label="dart">
|
|
|
|
```dart
|
|
final mySubscription = supabase
|
|
.from('countries')
|
|
.on(SupabaseEventTypes.update, (payload) {
|
|
// Handle realtime payload
|
|
})
|
|
.subscribe();
|
|
```
|
|
|
|
|
|
</TabsPanel>
|
|
|
|
</Tabs>
|
|
|
|
### Listening to deletes
|
|
|
|
By default, Supabase does not send deleted records. If you want to receive the deleted record you can
|
|
enable full replication for the table you are listening too:
|
|
|
|
```sql
|
|
alter table "your_table" replica identity full;
|
|
```
|
|
|
|
|
|
<Tabs
|
|
defaultActiveId="dart"
|
|
groupId="reference/dart"
|
|
values={[{ label: 'Dart', value: 'dart' }]}>
|
|
|
|
<TabsPanel id="dart" label="dart">
|
|
|
|
```dart
|
|
final mySubscription = supabase
|
|
.from('countries')
|
|
.on(SupabaseEventTypes.delete, (payload) {
|
|
// Handle realtime payload
|
|
})
|
|
.subscribe();
|
|
```
|
|
|
|
|
|
</TabsPanel>
|
|
|
|
</Tabs>
|
|
|
|
### Listening to multiple events
|
|
|
|
You can chain listeners if you want to listen to multiple events for each table.
|
|
|
|
<Tabs
|
|
defaultActiveId="dart"
|
|
groupId="reference/dart"
|
|
values={[{ label: 'Dart', value: 'dart' }]}>
|
|
|
|
<TabsPanel id="dart" label="dart">
|
|
|
|
```dart
|
|
final mySubscription = supabase
|
|
.from('countries')
|
|
.on(SupabaseEventTypes.insert, handleInsert)
|
|
.on(SupabaseEventTypes.delete, handleDelete)
|
|
.subscribe();
|
|
```
|
|
|
|
|
|
</TabsPanel>
|
|
|
|
</Tabs>
|
|
|
|
### Listening to row level changes
|
|
|
|
You can listen to individual rows using the format `{table}:{col}=eq.{val}` - where `{col}` is the column name, and `{val}` is the value which you want to match.
|
|
|
|
<Tabs
|
|
defaultActiveId="dart"
|
|
groupId="reference/dart"
|
|
values={[{ label: 'Dart', value: 'dart' }]}>
|
|
|
|
<TabsPanel id="dart" label="dart">
|
|
|
|
```dart
|
|
final mySubscription = supabase
|
|
.from('countries:id=eq.200')
|
|
.on(SupabaseEventTypes.update, handleRecordUpdated)
|
|
.subscribe();
|
|
```
|
|
|
|
|
|
</TabsPanel>
|
|
|
|
</Tabs> |