Supabase Backend as a Service · Lección

Suscripción a cambios en tablas

Implemente código del lado del cliente para escuchar inserciones, actualizaciones y eliminaciones en tablas o filas específicas de la base de datos.

Lección 2 de 412 pasos

Suscripción a cambios en tablas es una lección gratuita de Supabase Backend as a Service en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Supabase Backend as a Service, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Supabase Backend as a Service incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

Welcome to Live Data!

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.

The Realtime Client

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'.

Creating a Channel

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.

import { createClient } from '@supabase/supabase-js';

const SUPABASE_URL = 'YOUR_SUPABASE_URL';
const SUPABASE_ANON_KEY = 'YOUR_ANON_KEY';

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

// Create a channel for the 'messages' table
const messagesChannel = supabase.channel('table-db-changes')
  .on(
    'postgres_changes',
    { event: '*', schema: 'public', table: 'messages' },
    (payload) => {
      console.log('Change received!', payload);
    }
  )
  .subscribe();

console.log('Subscribed to messages channel...');

// In a real app, you'd keep this running to listen.
// For this example, we'll just show the setup.
// You'd typically unsubscribe when the component unmounts.
// messagesChannel.unsubscribe();

Listening for All Events

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.

Code: All Table Changes

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.

import { createClient } from '@supabase/supabase-js';

const SUPABASE_URL = 'YOUR_SUPABASE_URL';
const SUPABASE_ANON_KEY = 'YOUR_ANON_KEY';

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

const productChanges = supabase.channel('product_updates')
  .on(
    'postgres_changes',
    { event: '*', schema: 'public', table: 'products' },
    (payload) => {
      console.log('Product change detected:', payload.eventType);
      console.log('New data:', payload.new);
      console.log('Old data:', payload.old);
    }
  )
  .subscribe();

console.log('Listening for all changes on products table...');

// This script would typically run in a browser or Node.js environment
// where Supabase client is properly initialized and events would stream.
// For this interactive example, it shows the setup.
// In a real scenario, you'd wait for actual database events.

Targeting Specific Events

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'

Filtering by Row Data

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)

Code: Filtered Changes

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!

import { createClient } from '@supabase/supabase-js';

const SUPABASE_URL = 'YOUR_SUPABASE_URL';
const SUPABASE_ANON_KEY = 'YOUR_ANON_KEY';

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

const newElectronics = supabase.channel('new_electronics_channel')
  .on(
    'postgres_changes',
    {
      event: 'INSERT',
      schema: 'public',
      table: 'products',
      filter: 'category=eq.electronics' // Filter by category
    },
    (payload) => {
      console.log('New electronic product added:', payload.new.name);
      console.log('Details:', payload.new);
    }
  )
  .subscribe();

console.log('Listening for new electronic products...');

// This code demonstrates the filter setup.
// Actual events would be logged if matching data is inserted.

Handling Incoming Data

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.

Unsubscribing from Changes

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.

const myChannel = supabase.channel('my_channel')
  .on(...)
  .subscribe();

// Later, when you're done listening:
myChannel.unsubscribe();
console.log('Unsubscribed from my_channel.');

Quick Check: Realtime Filters

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?

Responde en la lección interactiva

Recap: Stay Updated!

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!

Gratis para empezar

Aprende Supabase Backend as a Service con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos: 11
Lecciones: 40

Empezar a aprender gratis Ver el curso completo

Preguntas frecuentes

¿La lección «Suscripción a cambios en tablas» es gratis?

Sí — el texto completo de «Suscripción a cambios en tablas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Supabase Backend as a Service, actualiza a CoddyKit PRO. El curso de Supabase Backend as a Service incluye 4 lecciones en total.

¿Qué aprenderé en «Suscripción a cambios en tablas»?

Implemente código del lado del cliente para escuchar inserciones, actualizaciones y eliminaciones en tablas o filas específicas de la base de datos. Practicas Supabase Backend as a Service con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Supabase Backend as a Service?

No se requiere experiencia previa. Supabase Backend as a Service en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Suscripción a cambios en tablas»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Supabase Backend as a Service?

Sí. Cada lección de Supabase Backend as a Service incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Comprensión de las suscripciones en tiempo real
Suscripción a cambios en tablas
Creación de una función de chat en directo
Canales de presencia y difusión

← Volver a Supabase Backend as a Service