multiple channel subscriberes on one page

lib/socket/useSocketChannel.tsx

@@ -5,6 +5,8 @@ import notEmpty from 'lib/notEmpty';
 
 import { useSocket } from './context';
 
+const CHANNEL_REGISTRY: Record<string, Channel> = {};
+
 interface Params {
   topic: string | undefined;
   params?: object;
@@ -51,12 +53,21 @@ export default function useSocketChannel({ topic, params, isDisabled, onJoin, on
       return;
     }
 
-    const ch = socket.channel(topic, params);
-    ch.join().receive('ok', (message) => onJoinRef.current?.(ch, message));
+    let ch: Channel;
+    if (CHANNEL_REGISTRY[topic]) {
+      ch = CHANNEL_REGISTRY[topic];
+      onJoinRef.current?.(ch, '');
+    } else {
+      ch = socket.channel(topic);
+      CHANNEL_REGISTRY[topic] = ch;
+      ch.join().receive('ok', (message) => onJoinRef.current?.(ch, message));
+    }
+
     setChannel(ch);
 
     return () => {
       ch.leave();
+      delete CHANNEL_REGISTRY[topic];
       setChannel(undefined);
     };
   }, [ socket, topic, params, isDisabled ]);