การสมัครรับการเปลี่ยนแปลงของตาราง

In the previous lesson, we learned about the idea of realtime data. Now, let's dive into how your app can actually listen for changes happening in your Supabase database!

This means your users can see updates instantly, without refreshing their screen. Think live chat, notifications, or dashboards.

Supabase provides a powerful Realtime client that makes listening for database changes super easy. It's built on PostgreSQL's replication features.

• It uses WebSockets for instant communication.
• You'll interact with it through the supabase.realtime object.
• It works by connecting to specific 'channels'.

Before listening to changes, you need to create a channel. A channel is like a dedicated line for receiving updates from your database.

You specify which table you're interested in, and then you can subscribe to events on that table.

The example above uses event: '*'. This is a wildcard that tells Supabase you want to be notified about all types of changes to your specified table.

• INSERT: A new row was added.
• UPDATE: An existing row was modified.
• DELETE: A row was removed.

Each event type will trigger your callback function.

Let's refine our channel setup to explicitly listen for all event types on a products table. Imagine we're building an inventory app!

Run this code and imagine new products being added, updated, or deleted.

Sometimes you only care about certain types of changes. For instance, maybe you only want to know when a new item is added, not when it's updated or deleted.

You can specify the event type in your subscription options:

• event: 'INSERT'
• event: 'UPDATE'
• event: 'DELETE'

Beyond event types, you can also filter updates based on the data within the rows themselves. This is super powerful for listening to changes on specific records!

Use conditions like eq (equals) or neq (not equals) on column values:

• filter: 'id=eq.123' (Listen for changes to row with ID 123)
• filter: 'status=neq.archived' (Listen for changes where status is NOT archived)

Let's set up a subscription that only listens for new products being added (INSERT) AND only if their category is 'electronics'.

Run this and see how specific you can get!

When an event occurs, your callback function receives a payload object. This object contains all the details about the change:

• eventType: 'INSERT', 'UPDATE', or 'DELETE'.
• new: The new row data (for INSERT/UPDATE).
• old: The old row data (for UPDATE/DELETE).
• table, schema: Info about where the change occurred.

This data lets you update your UI or trigger other logic.

It's important to unsubscribe from channels when they are no longer needed. This prevents memory leaks and unnecessary network traffic.

In a React component, you might unsubscribe in the componentWillUnmount or a useEffect cleanup function. Just call .unsubscribe() on your channel object.

You want to listen for any updates to the orders table, specifically for orders where the status changes to 'shipped'.

Which options would you use in your on() method?

Great job! You've learned how to harness Supabase Realtime to listen for live database changes.

• You create a channel for a specific table.
• You use .on('postgres_changes', options, callback) to subscribe.
• You can filter by event type (INSERT, UPDATE, DELETE) and by row data (e.g., filter: 'column=eq.value').
• Always remember to unsubscribe when a channel is no longer needed.

Next, we'll build a live chat feature using these concepts!