socket.on() event is triggering twice.

[rajpurohityogesh]

Hello, community

I am facing an issue in my web meet project in which I used a simple-peer library to create peer and socket.io library to share data. So the issue is that the last event is emitted from the server to a particular socket client. That is executing twice on the client side.

Server side event emitting:
io.to(payload.callerID).emit('receiving returned signal', { signal: payload.signal, id: socket.id });

Client-Side even listening:
user.socket.on("receiving returned signal", async payload => {
console.log("Getting receiving returned signal event");
const item = peersRef.current.find(p => p.peerID === payload.id);
item.peer.signal(payload.signal);
});

If anyone has any clue please help!!!!

[darrachequesne]

In most cases, it means the event handler was registered twice. Did you register the event handler in the connect event?

socket.on("connect", () => {
  // BAD, will be registered every time the socket reconnects
  socket.on("receiving returned signal", () => {
    // ...
  });
});

// GOOD
socket.on("receiving returned signal", () => {
  // ...
});

Reference: https://socket.io/docs/v4/client-socket-instance/#connect

[rajpurohityogesh]

No @darrachequesne I haven't register the event handler in the connect event thought it is in useEffect() if that concerned.

And also I don't think that the event handler is registered twice because other events are working fine.

[darrachequesne]

Since you mention useEffect, do you properly unsubscribe from the event:

useEffect(() => {
    socket.on("receiving returned signal", () => { /* ... */ });

    return () => {
        socket.off("receiving returned signal", () => { /* ... */ });
    };
});

Else, I'm out of ideas...