Realtime en Supabase: Canales y Presencia

// Crear un canal
const canal = supabase.channel('mi-canal')
 
// Suscribirse al canal
canal.subscribe((status) => {
  if (status === 'SUBSCRIBED') {
    console.log('Conectado al canal')
  }
})

// Canal para chat general
const chatGeneral = supabase.channel('chat-general')
 
// Canal para un proyecto especifico
const proyecto = supabase.channel('proyecto-123')
 
// Canal para notificaciones del usuario
const notificaciones = supabase.channel(`notificaciones-${userId}`)

// Desuscribirse de un canal especifico
await supabase.removeChannel(canal)
 
// Desuscribirse de todos los canales
await supabase.removeAllChannels()

const canal = supabase.channel('chat-sala-1')
 
canal.subscribe(async (status) => {
  if (status === 'SUBSCRIBED') {
    // Enviar mensaje a todos los clientes en este canal
    await canal.send({
      type: 'broadcast',
      event: 'nuevo-mensaje',
      payload: {
        usuario: 'Juan',
        texto: 'Hola a todos',
        timestamp: new Date().toISOString()
      }
    })
  }
})

const canal = supabase.channel('chat-sala-1')
 
canal
  .on('broadcast', { event: 'nuevo-mensaje' }, (payload) => {
    console.log('Mensaje recibido:', payload.payload)
    // { usuario: 'Juan', texto: 'Hola a todos', timestamp: '...' }
  })
  .subscribe()

'use client'
 
import { useEffect, useState } from 'react'
import { createClient } from '@/lib/supabase/client'
 
interface CursorPosition {
  userId: string
  x: number
  y: number
}
 
export function CursorTracker({ documentId, userId }: { documentId: string; userId: string }) {
  const [cursors, setCursors] = useState<Map<string, CursorPosition>>(new Map())
  const supabase = createClient()
 
  useEffect(() => {
    const canal = supabase.channel(`doc-${documentId}`)
 
    // Escuchar posiciones de otros cursores
    canal
      .on('broadcast', { event: 'cursor-move' }, ({ payload }) => {
        const pos = payload as CursorPosition
        if (pos.userId !== userId) {
          setCursors((prev) => new Map(prev).set(pos.userId, pos))
        }
      })
      .subscribe()
 
    // Enviar mi posicion del cursor
    function handleMouseMove(e: MouseEvent) {
      canal.send({
        type: 'broadcast',
        event: 'cursor-move',
        payload: { userId, x: e.clientX, y: e.clientY }
      })
    }
 
    window.addEventListener('mousemove', handleMouseMove)
 
    return () => {
      window.removeEventListener('mousemove', handleMouseMove)
      supabase.removeChannel(canal)
    }
  }, [documentId, userId, supabase])
 
  return (
    <>
      {Array.from(cursors.entries()).map(([id, pos]) => (
        <div
          key={id}
          className="fixed w-4 h-4 bg-blue-500 rounded-full pointer-events-none"
          style={{ left: pos.x, top: pos.y, transform: 'translate(-50%, -50%)' }}
        />
      ))}
    </>
  )
}

const canal = supabase.channel('sala-1')
 
canal.subscribe(async (status) => {
  if (status === 'SUBSCRIBED') {
    // Compartir mi presencia
    await canal.track({
      user_id: userId,
      nombre: 'Juan',
      online_at: new Date().toISOString()
    })
  }
})

const canal = supabase.channel('sala-1')
 
canal
  .on('presence', { event: 'sync' }, () => {
    // Se ejecuta cada vez que cambia el estado de presencia
    const state = canal.presenceState()
    console.log('Usuarios online:', state)
    // { "key-1": [{ user_id: "...", nombre: "Juan", ... }], ... }
  })
  .on('presence', { event: 'join' }, ({ key, newPresences }) => {
    console.log('Se conecto:', newPresences)
  })
  .on('presence', { event: 'leave' }, ({ key, leftPresences }) => {
    console.log('Se desconecto:', leftPresences)
  })
  .subscribe()

'use client'
 
import { useEffect, useState } from 'react'
import { createClient } from '@/lib/supabase/client'
 
interface UserPresence {
  user_id: string
  nombre: string
  online_at: string
}
 
export function OnlineUsers({ roomId, currentUser }: {
  roomId: string
  currentUser: { id: string; nombre: string }
}) {
  const [users, setUsers] = useState<UserPresence[]>([])
  const supabase = createClient()
 
  useEffect(() => {
    const canal = supabase.channel(`sala-${roomId}`)
 
    canal
      .on('presence', { event: 'sync' }, () => {
        const state = canal.presenceState<UserPresence>()
        // Convertir el objeto de presencia a un array plano
        const onlineUsers = Object.values(state).flat()
        setUsers(onlineUsers)
      })
      .subscribe(async (status) => {
        if (status === 'SUBSCRIBED') {
          await canal.track({
            user_id: currentUser.id,
            nombre: currentUser.nombre,
            online_at: new Date().toISOString()
          })
        }
      })
 
    return () => {
      supabase.removeChannel(canal)
    }
  }, [roomId, currentUser, supabase])
 
  return (
    <div className="p-4 border border-zinc-700 rounded">
      <h3 className="text-sm font-semibold text-zinc-400 mb-2">
        En linea ({users.length})
      </h3>
      <ul className="space-y-1">
        {users.map((user) => (
          <li key={user.user_id} className="flex items-center gap-2">
            <span className="w-2 h-2 bg-green-500 rounded-full" />
            <span className="text-sm text-zinc-300">
              {user.nombre}
              {user.user_id === currentUser.id && ' (tu)'}
            </span>
          </li>
        ))}
      </ul>
    </div>
  )
}

-- Habilitar realtime en la tabla 'mensajes'
ALTER PUBLICATION supabase_realtime ADD TABLE mensajes;
 
-- Verificar que tablas tienen realtime habilitado
SELECT * FROM pg_publication_tables
WHERE pubname = 'supabase_realtime';

ALTER PUBLICATION supabase_realtime DROP TABLE mensajes;