Same event emitting multiple times in socket.io-client reactjs

Solution 1:

I had the same issue, and I solved it with useEffect hook. in your case it would be (on client side):

useEffect(()=>{
socket.on('msg', (result) => {
    let messageHtml = 'messages working!';
    let messageBox = document.getElementById('messageBox');

    if (messageBox ) {
        messageBox.appendChild(messageHtml);
    })
return function cleanup() {socket.off('msg')}
},[])

I'm sure you could do this also with ComponentDidUpdate or ComponentDidUnmount, but useEffect is eassier.

Solution 2:

In the useEffect() hook, checking if socket connection already exists using socket.current helped me get rid of this problem -

useEffect(() => {
  (async () => {
    if (!socket.current) {
      socket.current = io(`http://localhost:8080/`)
      .on("connect", () => {
        //do something 
      });

      socket.current.on("message", (instance) => {
          //receive message from server 
      });
    }
  })();
});