keep event listener attached to socket event after reconnection

Question

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

It sounds like you're trying to solve an XY problem. – robertklep Aug 07 '22 at 08:09 — robertklep, Aug 07 '22 at 08:09

score 1 · Answer 1 · answered Aug 06 '22 at 23:13

1

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

answered Aug 06 '22 at 23:13

Aloiso Junior

417
3
10

I agree with your answer, still this does not solve the problem :) I tried using an object 'socketsMap' to store sockets by clientID. And then on reconnection I copy back the event listeners. But it seems it does not work. socket.listeners(CUSTOM_EVENT).splice(0,socket.listeners(CUSTOM_EVENT).length, ...socketsMap[clientID].listeners(CUSTOM_EVENT ) ); – Sofiene Ouerdiane Aug 06 '22 at 23:31
This answer, could not show you a solution, to this present, no one can achieve this. Here just clarify, why you should stop to use this approach. – Aloiso Junior Aug 06 '22 at 23:37

Sofiene Ouerdiane · Accepted Answer · 2022-08-13T09:20:22.900

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)}`);
  }
  oneTimeRunFunctionThatAttachesListnerToAnEvent(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

keep event listener attached to socket event after reconnection

2 Answers2