Conectar Supabase Realtime al dashboard

Conecta tu panel a actualizaciones en vivo con Supabase Realtime desde el frontend. Aquí verás cómo habilitar el tiempo real por tabla, crear channels y escuchar eventos (insert y delete) para que los contadores de usuarios, posts, likes y comentarios se actualicen sin refrescar, y para mostrar actividad reciente al instante.

¿Cómo activar Realtime en Supabase para tu dashboard?

Habilitar tiempo real por tabla es el primer paso para que la interfaz deje de depender del refresco manual y del placeholder o skeleton. El objetivo: cada cambio se refleje de inmediato en el dashboard del admin.

• Entra al panel de Supabase: sección Base de datos/Database, submenú Tablas.
• Revisa la columna Realtime enabled: verás que está desactivado por defecto.
• Edita la tabla de Comments: activa el check y guarda.
• Repite con Likes primero, y luego con Posts y usuarios.
• Regresa al navegador y refresca una vez: a partir de aquí, los cambios llegan en vivo.

Resultados clave al activar por tabla: - Comentarios: al publicar “Comentario con Realtime”, el contador pasa de 9 a 10 al instante y aparece la actividad reciente. - Likes: al dar o quitar un like, el contador cambia inmediatamente (por ejemplo, de 3 a 4) sin refrescar. - Posts: antes, el total se quedaba en 39; tras activar Realtime en la tabla de posts, sube a 40 y luego a 41 conforme se publican nuevas imágenes.

¿Cómo suscribirse a eventos con channels y Postgres Changes?

La lógica del frontend se basa en suscripciones que escuchan cambios de la base en tiempo real. El patrón es crear un channel por recurso, definir el evento, y actualizar estado y actividad en cuanto llega el payload.

¿Qué eventos usar y cómo nombrar el channel?

• Likes: channel “LikesChanges” para reportar cambios en la tabla Likes.
• Evento insert: cuando hay un like nuevo.
• Evento delete: cuando se quita un like existente.
• Esquema público y tabla Likes, usando Postgres Changes.
• Comments: channel “comments changes” con evento insert en la tabla Comments.
• Suscripción: usar subscribe para que cualquier frontend conectado reciba la actualización de ese channel.

¿Cómo actualizar contadores y actividad reciente al instante?

• Estado optimista: al recibir un insert en Likes o Comments, sumar +1; en delete de Likes, restar -1. Contadores más rápidos y consistentes.
• Perfil del usuario: obtener el profile de quien ejecutó la acción para mostrar “quién hizo qué”.
• Actividad reciente: registrar el tipo de acción (like, comment, post), el usuario y el timestamp. Se visualiza en el panel con un emoji por tipo, facilitando el escaneo.

¿Qué mejoras verás en la interfaz en vivo?

Al comprender cómo funciona una suscripción, cómo se reciben los datos y cómo se reflejan de inmediato, el dashboard se vuelve realmente interactivo: verás todo en tiempo real.

• Contadores automáticos: usuarios, posts, likes y comentarios sin refrescar.
• Feeds en vivo: actividad reciente que muestra acción, autor y momento.
• UX fluida: dar o quitar like refleja el cambio al instante.
• Menos fricción: adiós a placeholder o skeleton tras cada recarga.
• Configuración guiada: habilita también Posts y usuarios; el código está en la rama “clase diez”, carpeta dashboard, donde verás los channels de posts, likes, comments y profiles.

¿Te surgió alguna duda al habilitar Realtime o al definir los channels y eventos? Cuéntame en los comentarios qué parte quieres profundizar.