Socket IO EventListeners no longer called on Socket IO Client reconnection in ReactJS

[ebitogu]

If I restart my socket io server, the socket io client on the browser side reconnects successfully but registered events are no longer called no matter what.

I am using a single instance of socket io in the whole of my react app in a filed called socket_io.js file which is imported into a number of different components.

Here is the content of my socket_io.js singleton file:

import { useState, useEffect } from 'react';
import io from "socket.io-client";
import {
    getSocketIOEventListeners,
    setSocketIOEventListeners,
} from './redux/event_slices';
import { useSelector, useDispatch } from 'react-redux';

const defaultUrl ='http://localhost:8000';
const defaultOptions = { transports: ["websocket"] }

let defaultSocketIO;
if (!defaultSocketIO) {
    defaultSocketIO = io(defaultUrl, defaultOptions);
}

const useSocket = (_url = defaultUrl, _options = defaultOptions) => {

    const [socket] = useState(defaultSocketIO);
    const listeners = useSelector(getSocketIOEventListeners);
    const dispatch = useDispatch();
    const [disconnected, setDisconnected] = useState(false);

    const connectJustOnce = (listener) => {
        if (!socket?.hasListeners(listener.event)) {
            socket?.on(listener.event, listener.callback);
        }
    }

    const connectListeners = () => {
        socket?.offAny();
        listeners.forEach((listener) => connectJustOnce(listener));
    }

    useEffect(() => {
        connectListeners();
        return () => {
            socket?.offAny();
        }
    }, [listeners]);

    useEffect(() => {
        if (!socket?.hasListeners("connect")) {
            socket?.on('connect', () => {
                    console.log('===Connected===');
                    connectListeners();  // I had to attempt this because on automatic re-connection existing event handlers don't get called but even at that the problem still persists so this doesn't even solve my problem
            });
        }
        if (!socket?.hasListeners("disconnect")) {
            socket?.on('disconnect', () => {
                setDisconnected(true);
                console.log('===Disconnected===');
                socket?.offAny();
            });
        }
        if (!socket?.hasListeners("reconnect")) {
            socket?.on('reconnect', () => {
                console.log("===Reconnected===");
                connectListeners();
            });
        }
    }, [socket]);

    const addSocketIOEventListener = (event, callback) => {
        let listenersCopy = [...listeners];
        let existingEvent = listenersCopy.find(x => x?.event === event);
        if (!existingEvent) {
            listenersCopy.push({ event, callback });
            dispatch(setSocketIOEventListeners(listenersCopy));
        }
    }

    const removeSocketIOEventListener = (event, callback) => {
        socket?.off(event, callback);
        let listenersCopy = [...listeners];
        let filtered = listenersCopy.filter((listener) => listener.event !== event);
        dispatch(setSocketIOEventListeners(filtered));
    }

    return {
        socket,
        addSocketIOEventListener,
        removeSocketIOEventListener
    }

}

export default useSocket;

Here is one of the components called MessageView.js that imported the above singleton for use as follows:

import useSocket from '../socket_io.js';

export default function MessageView(props){

    const { addSocketIOEventListener, removeSocketIOEventListener } = useSocket();

    let messageHandler=(data)=>{

      //No longer called when socket io reconnects
    }

   useEffect(()=>{
        addSocketIOEventListener('messages' ,messageHandler);
        return ()=>{
              removeSocketIOEventListener('messages', messageHandler);
    },[]);

}

My Socket IO Client is "socket.io-client": "^4.5.4" and the web server is "socket.io": "^4.5.4"

What can I do to solve this?

[darrachequesne]

Hi! Is there a reason why you add/remove all listeners upon connection? Also, delaying event registration (the setTimeout() part) seems dangerous, could you please check?

[ebitogu]

Hi, I have updated the code in the question without the setTimeout part

[ebitogu]

And for Is there a reason why you add/remove all listeners upon connection? Yes, the reason is because when on('disconnect') is called and on('connect') is called again the already attached event listeners no longer gets called no matter what I tried.

Unfortunately, even that still didn't solve the problem.

So the major problem I'm facing right now is that once on('disconnect') is called and a re-connection happens, the existing event listeners no longer gets called again

[ebitogu]

And the way I tested the disconnect was by manually restarting my server and I immediately noticed that all the attached event listeners don't get called again when the server is restarted and the client automatically reconnects. This has been very difficult to solve.

[darrachequesne]

Hi! Please check our React guide: https://socket.io/how-to/use-with-react