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
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
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