keep event listener attached to socket event after reconnection-CodePudding

I have some event listeners attached to a socket on the server side. When the client connected to that socket is disconnected (on page refresh for example), it reconnects with a new socket on the server side different from the one it was using before it disconnected. So all event listeners attached to the old socket are lost. Is there a way to keep event listeners even after reconnection ? Thanks !

Client:

socket.on('connect', () => {
  // Do some stuff
});

Server:

io.on('connection', (socket) => {
   const CUSTOM_EVENT = 'CustomEvent';
   onTimeRunFunctionThatAttachesListnerToAnEvent(socket, CUSTOM_EVENT);
   console.log(`Client connected to socket id '${socket.id}'`);
   console.log(`Nb of listners to event ${CUSTOM_EVENT} : ${socket.listenerCount(CUSTOM_EVENT)}`);
   socket.on('disconnect', (reason) => {
     console.log('client disconnected');
   });
});

Logs

Client connected to socket id '9FKJ152mdOLaHcC2AAAB'
Nb of listers to event 'CustomEvent' = 1
client disconnected
Client connected to socket id 'ulqq3yvjQflXLyHTAAAF'
Nb of listers to event 'CustomEvent' = 0

CodePudding user response：

Socket io reconnects automatically everyone whose have established a connection.

You should never create routines which assumes that your clients will have same socket.id along their session, even no refreshes occurs, socket server can lost connection, and recreate a new one.

Here you can read better about it

how to handle page reload in socket.io client chat applications

CodePudding user response：

I tried storing listeners in an global object using clientID when the socket is disconnecting and when the client with the same clientID reconnects using a new socket, I restore back the event listeners. This seems to solve my case.

Server

let playersEventListeners = {};
io.on('connection', (socket) => {
  console.log(`Client connected to socket id '${socket.id}'`);
  const CUSTOM_EVENT = 'CustomEvent';
  if (socket.handshake.auth.clientID in playersEventListeners) {
    console.log('overriding event listeners');
    for (let listener of playersEventListeners[socket.handshake.auth.clientID]){
      socket.addListener(CUSTOM_EVENT , listener);
    }
    console.log(`Nb of listners to event ${CUSTOM_EVENT} : ${socket.listenerCount(CUSTOM_EVENT)}`);
  }
  onTimeRunFunctionThatAttachesListnerToAnEvent(socket, CUSTOM_EVENT);
  socket.on('disconnecting', (reason) => {
    console.log('client disconnecting');
    console.log(`Nb of listners to event ${CUSTOM_EVENT} : ${socket.listenerCount(CUSTOM_EVENT)}`);
    // Store socket event listeners before disconnecting
    playersEventListeners[socket.handshake.auth.clientID] = socket.listeners(CUSTOM_EVENT);
  });

  socket.on('disconnect', (reason) => {
    console.log('client disconnected');
  });
 });

Logs

   Client connected to socket id '9FKJ152mdOLaHcC2AAAB'
   client disconnecting
   Nb of listers to event 'CustomEvent' = 1
   client disconnected
   Client connected to socket id 'ulqq3yvjQflXLyHTAAAF'
   overriding event listeners
   Nb of listers to event 'CustomEvent' = 1