Issues with un-subscribing from real time broadcast with React 18 (Nextjs 12)

[chiubaca]

I've been trying to apply the Broadcast guide demo to a nextjs project and hitting some problems.

This is admittedly due to my inexperience with how useEffect works in React 18 rather than anything wrong with Nextjs or Supabase, however, I hope someone can still help.

I've attempted to port the demo code from the broadcast guide into two nextjs pages send-broadcast.tsx and receive-broadcast.tsx

//send-broadcast.tsx

const SendBroadcastPage: NextPage = () => {
  const channelRef = useRef<RealtimeChannel>(null!);

  useEffect(() => {
    if (channelRef.current === null) {
      // The name of the channel can be set to any string.
      // Set the same name across both the broadcasting and receiving clients.
      channelRef.current = supabase.channel('user1-location', {
        configs: {
          broadcast: { ack: true },
        },
      });

      // subscribe registers your client with the server
      channelRef.current.subscribe((status: any) => {
        console.log('CURRENT STATUS::', status);

        if (status === 'SUBSCRIBED') {
          // now you can start broadcasting messages
          // sending a new message every second
          setInterval(async () => {
            const resp = await channelRef.current.send({
              type: 'broadcast',
              event: 'location',
              payload: { x: Math.random(), y: Math.random() },
            });
            console.log(resp);
          }, 2000);
        }
      });
      // return () => channelRef.current.unsubscribe(); // enabling this line causes the subscription to close prematurely
    }
  }, []);

  return (
    <div>
      <h1>Send Broadcasts Page</h1>
      <p> View browser console to see logs </p>
      <Link href="/"> back to home</Link>
    </div>
  );
};

export default SendBroadcastPage;

and

// receive-broadcast.tsx

const ReceiveBroadcastPage: NextPage = () => {
  const [messages, setMessages] = useState<any>([]);
  const channelRef = useRef<RealtimeChannel>(null!);

  useEffect(() => {
    if (channelRef.current === null) {
      // use the same channel name as the client broadcasting the message is using
      channelRef.current = supabase.channel('user1-location');

      // listen to broadcasts
      channelRef.current
        .on('broadcast', { event: 'location' }, (event: any) => {
          console.log('got payload', event.payload);
          setMessages([...messages, event]);
        })
        .subscribe(async (status: any) => {
          console.log(' SUBSCRIBE STATUS:', status);
        });
      // return () => channelRef.current.unsubscribe(); // enabling this line causes the subscription to close prematurely
    }
  }, [messages]);

  return (
    <div>
      <h1> Recieve Broadcasts Page</h1>
      <p> View browser console to see logs for received payloads</p>

      {messages.map((m, index) => (
        <div key={index}>{JSON.stringify(m.payload)}</div>
      ))}

      <Link href="/"> back to home</Link>
    </div>
  );
};

export default ReceiveBroadcastPage;

Note the check if (channelRef.current === null) {...} . This is to handle the double useEffect firing in development . Without this check I noticed the supabase client enables a subscription, then immediately closes it.

Also, note that the useEffect cleanup has been commented out as In this current implementation, it immediately causes the subscription to go into a CLOSED state. However with the cleanup function commented out, I can emit and receive payloads ok, but as a result, navigating back to a different route the broadcasting continues.

My questions are the following:

• Am I handling the setup of the broadcast subscription correctly in the useEffect?
• If so, how can I handle the useEffect cleanup to unsubscribe when the component unmounts?

The current workarounds which I have tried that I don't deem acceptable are:

• Using a real <a> to change route to force a full page refresh rather than the nextjs <Link/>.
• Turning off React strict mode.
• Using useEffectOnce hacks.

I've create got working example of the above here.

[GaryAustin1]

Sounds like this timing issue supabase/realtime-js#169

[chiubaca]

interesting... thanks will keep an eye on the issue

[chiubaca]

resolved by upgrading to v2.0.0-rc.5.

Also the if (channelRef.current === null) {...} was not necessary and the cleanup function should be done with using either client.removeChannel(chan) or client.removeChannels()