Socket.io is emitting an event twice

[rajpurohityogesh]

Hey Techies,

I am emitting an event for a specific client from the server but it is emitting twice and the socket.on() method is executing twice on the react.js frontend which is ruining my project.

Server Side

socket.on("returning signal", payload => { console.log("Returning recieverd signal from "+socket.id+" to "+payload.callerID) io.to(payload.callerID).emit('receiving returned signal', { signal: payload.signal, id: socket.id }); });

Client-Side

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

I used logs for debugging and "Getting receiving returned signal event" this message is printing twice on the browser console.

It's been a month so please help!!!

[darrachequesne]

In most cases, a duplicate event means you have registered the listener twice. Could you please check?

For future readers, please check our React guide here: https://socket.io/how-to/use-with-react

[rajpurohityogesh]

No @darrachequesne I don't think this could be the issue here because other events are working fine.

[dbehmoaras]

I am having the same issue as well. Can confirm that the listener has registered only once.

[berli888]

I had the same problem. It came from the fact that I called socket.emit inside a setState :
facebook/react#12856 (comment)

[berli888]

Having the same problem here

[sergiycheck]

I had the same problem. I register socket handler in useEffect and it registers per each render. I solved it by removing socket listener in useEffect return function. This link helped me stackoverflow question

[Talhaitis612]

I am trying to find the solution to this question since I am having the same problem, it has been three months I have tried different solutions but they didn't work. I am building a chat application actually a private chat application whenever the message is received it is being pushed twice. The framework I am using is Angular. Any solution or suggestion to the problem is welcomed, THANKS!

[shahul01]

don't know if its relevant,
I solved it with using return inside useEffect on client
return () => { socket.off('WELCOME_FROM_SERVER', eventHandler); };

refer this article

[bibakroy]

I'm using it. But still, events are getting fired twice.

[ARBHARADWAJ]

bro but I got solved by using it ,it worked for me

[shahul01]

if you're still having issue, show us the code base maybe there is a bug we can find

[GeorgeFlorian]

I am still having this issue even though I use socket.off:

  useEffect(() => {
    const getOtherUsersMessagesHandler = (message) => {
      console.log('getMessage from other users', message);
      setNewMessage(message);
    };
    socket.off('getMessage').on('getMessage', getOtherUsersMessagesHandler);
    return () => {
      socket.removeListener('getMessage', getOtherUsersMessagesHandler);
      socket.off('getMessage');
      socket.removeAllListeners('getMessage');
    };
  }, []);

This useEffect() is inside a component named Room. This Room gets re-rendered every time I change rooms. Each room has it's own chat, members, etc

These are the logs when I send one message in a chat:

send message to socket 
Object { messageText: "25", timestamp: "Wed, 21 Sep 2022 14:18:52 GMT", sentBy: "FDId5pYUjFNffHaevKY3", chatId: "a6bc3be0-125f-4ac3-aab6-e7f6a50babd3_FDId5pYUjFNffHaevKY3" }
[Chat.js:34](http://localhost:3000/home/george/Projects/Landmarks-FrontEnd/src/components/Chat/Chat.js)
getMessage from other users 
Object { messageText: "25", sentBy: "FDId5pYUjFNffHaevKY3", timestamp: "Wed, 21 Sep 2022 14:18:52 GMT", chatId: "a6bc3be0-125f-4ac3-aab6-e7f6a50babd3_FDId5pYUjFNffHaevKY3" }
[RoomItem.js:65](http://localhost:3000/home/george/Projects/Landmarks-FrontEnd/src/components/Rooms/RoomItem.js)
getMessage from other users 
Object { messageText: "25", sentBy: "FDId5pYUjFNffHaevKY3", timestamp: "Wed, 21 Sep 2022 14:18:52 GMT", chatId: "a6bc3be0-125f-4ac3-aab6-e7f6a50babd3_FDId5pYUjFNffHaevKY3" }
[RoomItem.js:65](http://localhost:3000/home/george/Projects/Landmarks-FrontEnd/src/components/Rooms/RoomItem.js)
getMessage from other users 
Object { messageText: "25", sentBy: "FDId5pYUjFNffHaevKY3", timestamp: "Wed, 21 Sep 2022 14:18:52 GMT", chatId: "a6bc3be0-125f-4ac3-aab6-e7f6a50babd3_FDId5pYUjFNffHaevKY3" }
[RoomItem.js:65](http://localhost:3000/home/george/Projects/Landmarks-FrontEnd/src/components/Rooms/RoomItem.js)
getMessage from other users 
Object { messageText: "25", sentBy: "FDId5pYUjFNffHaevKY3", timestamp: "Wed, 21 Sep 2022 14:18:52 GMT", chatId: "a6bc3be0-125f-4ac3-aab6-e7f6a50babd3_FDId5pYUjFNffHaevKY3" }
[RoomItem.js:65](http://localhost:3000/home/george/Projects/Landmarks-FrontEnd/src/components/Rooms/RoomItem.js)
getMessage from other users 
Object { messageText: "25", sentBy: "FDId5pYUjFNffHaevKY3", timestamp: "Wed, 21 Sep 2022 14:18:52 GMT", chatId: "a6bc3be0-125f-4ac3-aab6-e7f6a50babd3_FDId5pYUjFNffHaevKY3" }
[RoomItem.js:65](http://localhost:3000/home/george/Projects/Landmarks-FrontEnd/src/components/Rooms/RoomItem.js)
getMessage from other users 
Object { messageText: "25", sentBy: "FDId5pYUjFNffHaevKY3", timestamp: "Wed, 21 Sep 2022 14:18:52 GMT", chatId: "a6bc3be0-125f-4ac3-aab6-e7f6a50babd3_FDId5pYUjFNffHaevKY3" }
[RoomItem.js:65](http://localhost:3000/home/george/Projects/Landmarks-FrontEnd/src/components/Rooms/RoomItem.js)
newMessage 
Object { messageText: "25", sentBy: "FDId5pYUjFNffHaevKY3", timestamp: "Wed, 21 Sep 2022 14:18:52 GMT", chatId: "a6bc3be0-125f-4ac3-aab6-e7f6a50babd3_FDId5pYUjFNffHaevKY3" }
[RoomItem.js:77](http://localhost:3000/home/george/Projects/Landmarks-FrontEnd/src/components/Rooms/RoomItem.js)

This is the server:

//  Connecting
io.on('connection', async (socket) => {
  // Join room
  socket.on('joinRoom', async ({ id, chatId, name }) => {
    const user = userJoin(id, chatId, socket.id, name);
    console.log(`User ${name} - ${socket.id} joined chat ${chatId}`);
    console.log(socket.id);
    await socket.join(user.chatId);
    console.log(socket.id);

    // Send user and room info
    io.to(user.chatId).emit('getUserRooms', {
      chatId: user.chatId,
      users: getRoomUsers(user.chatId),
    });

    // Send message
    socket.on('sendMessage', ({ chatId, messageText }) => {
      console.log(socket.id);

      io.to(chatId).emit(
        'getMessage',
        messageFormat(messageText, user.id, chatId)
      );
    });
    console.log(users);
  });

  // Disconnecting
  socket.on('disconnect', () => {
    const user = userLeave(socket.id);

    console.log('User has disconnected');
  });
});

P.S: The strange thing is that I have another useEffect() in the same Room component that handles joining rooms and one other event that works beautifuly:

  useEffect(() => {
    if (currentChat) {
      socket.emit('joinRoom', {
        id: currentUserID,
        chatId: currentChat,
        name: name,
      });
      console.log('joinRoom socket event');
      const getUserRoomsHandler = ({ chatId, users }) => {
        console.log('getUserRooms');};
      socket.on('getUserRooms', getUserRoomsHandler);
      return () => {
        socket.removeListener('joinRoom');
        socket.removeListener('getUserRooms', getUserRoomsHandler);
      };
    }
  }, [currentChat, socket]);

This is the log whenever I change a room:

joinRoom socket event [RoomItem.js:43](http://localhost:3000/home/george/Projects/Landmarks-FrontEnd/src/components/Rooms/RoomItem.js)
getUserRooms [RoomItem.js:45](http://localhost:3000/home/george/Projects/Landmarks-FrontEnd/src/components/Rooms/RoomItem.js)

[FelipeAsenjo]

Hello guys, yesterday i was running into the same problem and i would like to share my solution.

[client side] ---> I simply declare the socket outside the component (lib/socket.io in my case) and then import the same instance of the socket for the entire app.
So if i need to use the socket in more than one component or page, i no longer need to depend on whatever magic uses React or Vue to render the components since the socket is declared somewhere else in the app.

/src/libs/socket.io (is just the way i organize my code)

`import { io } from 'socket.io-client'

const socket = io('http://localhost:3000')

export default socket`

That's it, please let me know if you find any problems with this solution. I hope this can help someone.

[ryankc33]

Isn't this just a global variable?

[FelipeAsenjo]

Precisely, it's a global instance so you can import it anywhere you want avoiding the main problem, socket is registering twice.
That comes with a lot of problems in terms of following the communication between two clients.
In my experience the double socket-registration happens when the creation of the socket instance depends on any stage of the component's render cycle, since components re-renders by many reasons, or even the entire app.

It happened to me in VueJS and React as well, and this is a super simple solution that worked for me.

[TheVic489]

I used this solution and works for me, do you had any problem since now?

[darrachequesne]

For anyone interested, please check our React guide: https://socket.io/how-to/use-with-react

[4strodev]

I was having the same problem with angular and observables. This was my solution. If you are using, redux, observables or similar this can help you.

I have a store where the socket is saved. Every time the socket changes I update the store and my observable receive this new socket. That was the problem.

The problem

    // connect-to-room.action.ts
    // Here I was updating the socket but no the variables
    // That says to me if I was connected or no
    roomStore.setState({...roomState, socket});

    socket.on('connect', () => {
      const roomState = roomStore.snapshot();
      
      // Here I update the variable that says to me if I
      // was connected or not
      roomStore.setState({...roomState, connected: true});
    });

Here I was receiving the socket and adding event handlers
That was the problem, I was updating my state 2 times
and I was setting 2 handlers for the same socket

    // a-component.ts
    const subscription = this.socket$.subscribe(socket => {
      if (!socket)
        return;

      socket.on('message', message => {
        console.log(message);
      });

      socket.on("connect_error", (err) => {
        // ...
      })
    });

The solution?

Update state only when socket connects successfully.

    // Here I was updating the socket but no the variables
    // That says to me if I was connected or no
    //roomStore.setState({...roomState, socket});

    socket.on('connect', () => {
      const roomState = roomStore.snapshot();

      // Here I update the variable that says to me if I
      // was connected or not
      roomStore.setState({...roomState, socket, connected: true});
    });

Conclusion

If you are using redux check if you are subscribing to an observable twice