Supabase Realtime te permite construir un dashboard en vivo que muestra cada like, comentario, post o registro de usuario sin recargar la página. Si estás desarrollando una aplicación con Supabase y quieres monitorear actividad al instante, esta funcionalidad convierte tu interfaz en algo dinámico, ideal para administrar y depurar tu proyecto como lo hacen apps en producción.

Por qué necesitas un dashboard en tiempo real

Cuando trabajas con un panel de administración estático, cada métrica queda congelada hasta que refrescas la pantalla. Eso rompe la experiencia.

En la rama clase 10 del repositorio existe un dashboard que aún funciona así: muestra placeholders y skeletons mientras carga, pero los números no cambian solos. Si publicas un comentario de prueba, el contador pasa de 7 a 8 únicamente al recargar [01:00]. La meta es eliminar ese paso manual.

La idea es que cada interacción —un like, un comentario, un post nuevo o un registro— se refleje al instante en el dashboard. Para lograrlo, usamos Supabase Realtime, una herramienta que escucha cambios y los empuja al cliente automáticamente.

¿Qué es Supabase Realtime? Es un servicio de Supabase que sincroniza datos en vivo entre la base de datos y el cliente usando WebSockets, sin necesidad de refrescar la página.

Cómo funciona Supabase Realtime y qué features ofrece

Según la documentación oficial en supabase.com/realtime, Realtime maneja el estado global del lado del cliente apoyándose en WebSockets [02:30]. Esto significa que mantiene una conexión abierta entre tu app y el servidor para transmitir cambios en cuanto ocurren.

La plataforma ofrece tres grandes features que conviene distinguir antes de implementar nada:

• Cambios de base de datos: escucha eventos como INSERT, UPDATE o DELETE sobre tablas específicas.
• Presencia: detecta qué usuarios están conectados, útil para mostrar el clásico puntito verde de “online”.
• Transmisión (broadcast): envía cualquier dato suscrito a un canal compartido entre clientes.

Un ejemplo claro de presencia es un chat donde escribes “Hola” y el mensaje aparece de inmediato en la pantalla del otro usuario. Otro caso conocido es Figma: cuando varios diseñadores trabajan en el mismo archivo, los cursores de cada persona se mueven en vivo. Esa funcionalidad de cursor tracking corre sobre Supabase Realtime [03:45].

Para nuestro dashboard nos enfocaremos en la primera opción: los cambios de base de datos aplicados a likes, comentarios y registros de usuario.

Cómo se estructura el código de una suscripción

La documentación entrega ejemplos mínimos para cada feature. El patrón básico para escuchar cambios en una tabla se arma con cuatro piezas clave.

Qué hace cada parte de la suscripción

Primero, importas el cliente de Supabase desde tu archivo de configuración. En el proyecto ya existe un archivo que centraliza esa conexión, así que reutilizas el mismo cliente.

Después viene lo importante: el channel. Le pasas un nombre arbitrario y encadenas la configuración del evento que vas a escuchar. Los parámetros principales son:

1. event: el tipo de cambio, por ejemplo INSERT para detectar registros nuevos.
2. schema: el esquema de la base de datos, normalmente public.
3. table: la tabla específica que quieres observar, como messages, likes o comments.
4. callback: la función que recibe el payload y actualiza la interfaz.

Finalmente llamas a subscribe() para activar la conexión. A partir de ese momento, cualquier INSERT en la tabla observada llega al cliente con los datos completos del nuevo registro.

¿Para qué sirve el método subscribe en Supabase? Activa la suscripción al canal y mantiene abierta la conexión WebSocket para recibir eventos en vivo desde la base de datos.

Este mismo patrón es el que adaptaremos para escuchar tres tablas distintas en el dashboard.

Qué viene en la siguiente implementación

Con la teoría clara, el siguiente paso es conectar el dashboard a Supabase Realtime y suscribirlo a los eventos que importan.

Vas a montar suscripciones para creación de nuevos usuarios, publicación de posts, likes al instante y comentarios que aparecen en vivo. La interfaz quedará abierta en dos pestañas: una con el dashboard en /dashboard y otra con la app en el puerto 3000 [01:30], para que veas los cambios fluir entre ambas sin recargar.

Si ya has trabajado con WebSockets o con eventos en otras plataformas, ¿qué uso le darías tú a Realtime en tu propio proyecto? Cuéntalo en los comentarios.