Realtime Presence (Who's Online)

HOW IT IS WIRED

Real code from the GAS template

The code below is drawn from hooks/usePresence.ts in the gas-template repository. This is the code your generated app gets, not pseudocode, not a description of intent.

// hooks/usePresence.ts: tracks who is currently online in a channel
export function usePresence(
  channelName: string,
  payload: Record<string, unknown>,
): UsePresenceReturn {
  const [peers, setPeers] = useState<PresencePeer[]>([]);
  const [status, setStatus] = useState<UsePresenceReturn['status']>('joining');

  useEffect(() => {
    const presenceKey =
      (payload.user_id as string | undefined) ?? Crypto.randomUUID();
    const cacheKey = presenceCacheKey(channelName, presenceKey);
    const entry = acquireChannel(channelName, {
      cacheKey,
      createChannel: () =>
        supabase.channel(channelName, {
          config: { presence: { key: presenceKey } },
        }),
    });
    const channel = entry.channel;

    const syncPeers = () => {
      const flat = Object.values(
        channel.presenceState<Record<string, unknown>>()
      ).flatMap((arr) => arr as PresencePeer[]);
      setPeers(flat);
    };

    channel
      .on('presence' as any, { event: 'sync' }, syncPeers)
      .on('presence' as any, { event: 'join' }, syncPeers)
      .on('presence' as any, { event: 'leave' }, syncPeers);

    let cancelled = false;
    entry.subscribed
      .then(() => {
        if (!cancelled) { setStatus('joined'); channel.track(payload); }
      })
      .catch(() => { if (!cancelled) setStatus('error'); });

    return () => {
      cancelled = true;
      channel.untrack();
      releaseChannel(channelName, cacheKey);
    };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [channelName]);

  return { peers, status };
}

Source: goodspeed-apps/gas-template → hooks/usePresence.ts