Cómo conectar Supabase real time al frontend

Conecta tu dashboard a actualizaciones instantáneas con Supabase y domina suscripciones en real time desde el frontend. Aquí verás cómo escuchar eventos en la base de datos y reflejarlos al instante: nuevos posts, likes y comments que se muestran sin refrescar. Ideal para un panel de admin y para futuras funciones como feeds en tiempo real y contadores automáticos.

¿Cómo activar real time en Supabase para tu dashboard?

Para que los contadores y la actividad reciente cambien sin recargar, hay que prender el real time por tabla en Supabase. Antes, el panel solo se actualizaba al refrescar y mostraba placeholder o skeleton mientras llegaban los datos. Ahora, cada acción dispara un evento que la interfaz recibe al momento.

¿Dónde se habilita la opción real time enabled?

• Entra al panel de Supabase.
• Ve a Database en el menú izquierdo.
• Abre “Tablas”.
• Edita cada tabla y marca “Real time enabled”.
• Guarda los cambios.

¿Qué tablas activar primero?

• Activa primero likes y comments.
• Luego habilita posts y usuarios para cubrir todo el dashboard.
• Verás una columna que confirma si cada tabla tiene real time activo.

¿Cómo suscribirse a eventos desde el frontend con channels?

El código ya está preparado en la rama “clase diez” dentro de la carpeta “Dashboard”. Ahí están los channels de posts, likes, comments y profiles. Por ahora, se activan likes y comments y se explica su lógica paso a paso.

¿Cómo funciona el channel likes_changes?

• Se crea un channel llamado “likes_changes”.
• Se suscribe a cambios de postgres_changes.
• Evento insert: cada nuevo like suma al contador con un estado tipo set_stats (+1).
• Evento delete: cuando un usuario quita su like, se resta con set_stats (−1).
• Se obtiene el profile del usuario para registrar quién hizo el like.
• Se agrega una actividad de tipo like con timestamp para “Actividad reciente”.
• Se usa subscribe para que cualquier frontend conectado reciba la actualización.

¿Qué cambia para comments y posts?

• Comments: channel “comments_changes”, evento insert, suma al contador (+1), busca el profile y añade la actividad de comentario.
• Posts: al habilitar real time en la tabla, el contador de publicaciones sube sin refrescar cuando se crea un post. También se muestra la actividad de posteo.

¿Qué verás en la interfaz del admin en tiempo real?

Una vez activado, la interfaz reacciona de inmediato. Ya no depende del refresco, y cada métrica refleja la acción del usuario al instante, además de registrarla en “Actividad reciente”.

¿Qué cambios verás sin refrescar?

• Al publicar un comentario, el contador pasa de 9 a 10 de forma automática.
• Al dar o quitar un like, el número sube o baja sin recargar.
• Al crear un post, el total pasa de 39 a 40, y luego a 41 según las nuevas publicaciones.

¿Cómo alimentas la actividad reciente?

• Cada evento genera una entrada: like, comentario o post.
• Se incluye quién fue el usuario (vía profile).
• Se guarda un timestamp para el historial.
• Se muestra con un emoji distinto por tipo de actividad.

¿Qué habilidades y keywords dominarás para escalar tu panel?

Aprenderás a pensar la interfaz como un reflejo directo de la base de datos, y a usar las piezas clave del real time de Supabase.

• Suscripción a eventos: escuchar cambios con postgres_changes por tabla.
• Modelado por eventos: usar insert para altas y delete para bajas.
• Channels por dominio: “likes_changes”, “comments_changes”, y channels para posts y profiles.
• Esquema y tabla: configurar schema público y la tabla específica.
• Estado optimista: actualizar contadores con set_stats (+1/−1) para una UI fluida.
• Perfil del usuario: obtener profile para identificar al actor del evento.
• Actividad reciente: registrar tipo, usuario y timestamp para trazabilidad.
• Interfaz reactiva: reemplazar placeholder/skeleton con datos en vivo.

¿Quieres compartir cómo activarás real time en tus otras tablas o qué métrica te interesa ver en vivo? Déjalo en los comentarios y cuéntanos tu caso.