typing indicator

[EdgarsLv]

Just in case someone was also struggling to create: Typing indicator

• just pass sendTypingEvent in input onKeyDown event
• isTyping returns true whenever other users are typing

export const useTypingIndicator = ({ roomId, userId }: TypingIndicatorProps) => {
  const [isTyping, setIsTyping] = useState(false);
  const [payload, setPayload] = useState<Payload | null>(null);
  const channelRef = useRef<RealtimeChannel | null>(null);

  useEffect(() => {
    const newChannel = supabase.channel(`typing:${roomId}`);

    const onTyping = (payload: Payload) => {
      setPayload(payload);
      setIsTyping(true);
      hideTypingIndicator();
    };

    const hideTypingIndicator = () => {
      setTimeout(() => setIsTyping(false), 2000);
    };

    newChannel.on('broadcast', { event: 'typing' }, onTyping);
    const subscription = newChannel.subscribe();

    channelRef.current = newChannel;

    return () => {
      subscription.unsubscribe();
    };
  }, [roomId, userId]);

  const throttledTypingEvent = throttle(() => {
    if (!channelRef.current) return;
    channelRef.current.send({
      type: 'broadcast',
      event: 'typing',
      payload: { userId },
    });
  }, 3000);

  const sendTypingEvent = useCallback(() => {
    throttledTypingEvent();
  }, [throttledTypingEvent]);

  return { payload, isTyping, sendTypingEvent };
};

As much as i tested works like a charm!

[Minhnhat0408]

I try to implement your code, but the throttle() function I don't know what is it. Can you give some details about it. Tks !!

[EdgarsLv]

That's just lodash throttle

[Minhnhat0408]

oh is it really needed or I just need some kind of useDebounce like wait for the typing complete hook.

[ManuLpz4]

How do you access to your authenticated Supabase client? Antoher hook?

[Minhnhat0408]

There are plenty ways to do this, you can either setup ur own hook or use hook in @supabase/auth-helpers-nextjs or import { useSessionContext } from "@supabase/auth-helpers-react";. In my setup of this Typing indicator i use the useSessionContext() hook to get the supabaseClient

[ManuLpz4]

Thank you!