Closing websocket connections within a react context

[kasvith]

Hi, im trying to use this library with a React context, according to the description unless the component unmounts the library not closing the connections

in my case the connections being kept open, or new ones being created when context value changes. there is no way for close unwanted socket connections

export const ConversationProvider = ({
  conversationId,
  children,
}: ConversationProviderProps) => {
  const [selectedConversationId, setSelectedConversationId] = useState(
    conversationId || ""
  );

  const wsUrl = useMemo(() => {
    if (!selectedConversationId) return null;
    return `wss://example.com/conversation/${selectedConversationId}`;
  }, [selectedConversationId]);

  const handleWsMessage = useCallback((e: MessageEvent) => {
    console.log("Message received:", e.data);
    // Handle WebSocket messages here
  }, []);

  useWebSocket(
    wsUrl,
    {
      onMessage: handleWsMessage,
      retryOnError: true,
    },
    !!selectedConversationId // Determines whether the WebSocket should connect
  );

  const contextValue = useMemo(
    () => ({
      selectedConversationId,
      setSelectedConversationId,
    }),
    [selectedConversationId]
  );

  return (
    <ConversationContext.Provider value={contextValue}>
      {children}
    </ConversationContext.Provider>
  );
};

[aadil-shaikh-agileinfoways]

I think instead of passing the setSelectedConversationId function directly, you should pass a function like changeConversation which performs closing of previous connection and opening a new connection.

The useWebSocket returns the websocket instance under getWebSocket property.

The code would loosely look like this:

const changeConversation=useCallback((newConversationId:string)=>{
getWebSocket.close()
setSelectedConversationId(newConversationId)
},[getWebSocket])

....
const contextValue=useMemo(()=>({selectedConversationId,changeConversation}),[changeConversation])

return (
....
)

Note: This means you would be connected to only 1 conversation at a time. But that depends on your application.