title: ReactJS Socket io other user not receiving socket
body: <p>I have a web application that is Reactjs and Expressjs. I'm trying to make the socket io work on reactjs, and im encountering problem where, when i emit something from the frontend, the backend gets the socket but when it emits back to the frontend, the user who sends the socket gets it, but the other user isn't.</p>
  
  <p>Here's is the code:</p>
  
  <p><strong>Server</strong></p>
  
  <pre><code>io.on('connection', (client) =&gt; {
  
    setInterval(() =&gt; {
      client.emit('testing', 'From backend')
    }, 2000)
  
    client.on('sendMessage', (data) =&gt; {
      client.emit('fromBackend', 'This is from Backend boi');
    });
  
  });
  </code></pre>
  
  <p><strong>client - apisocket.js</strong></p>
  
  <pre><code>import openSocket from 'socket.io-client';
  
  const socket = openSocket('http://localhost:8000');
  
  export const sendMessage = (data) =&gt; {
    socket.emit('sendMessage', data)
  }
  
  export const messageListen = (cb) =&gt; {
    socket.on('fromBackend', data =&gt; {
      return cb(null, data);
    });
  }
  
  export const messageTestListen = (cb) =&gt; {
    socket.on('testing', data =&gt; {
      return cb(null, data);
    });
  }
  </code></pre>
  
  <p><strong>Component</strong></p>
  
  <pre><code>import React, { Component } from "react";
  import { sendMessage, messageListen, messageTestListen } from "../../api";
  
  class Controls extends Component {
    constructor() {
      super();
      this.state = {
        message: ""
      };
    }
  
    componentDidMount() {
      messageListen((err, data) =&gt; {
        console.log("Message from the Backend: ");
        console.log(data);
      });
      messageTestListen((err, data) =&gt; {
        console.log("Interval");
        console.log(data)
      })
    }
  
    socketTest = () =&gt; {
      sendMessage();
    };
  
    render() {
      return (
        &lt;button className="btn btn-primary" onClick={this.socketTest}&gt;
          Test
        &lt;/button&gt;
      );
    }
  }
  
  export default Controls;
  </code></pre>
  
  <p>So this is my code,
  Now i tried to debug it and im encountering 3 weird behaviors:</p>
  
  <p>First one(Both 2 tabs are receiving sockets from the backend through setInterval), i open 2 tabs, connected to the io server (expressjs), i have a setInterval running on my expressjs where every 2 seconds it runs "client.emit"
  2 clients are receiving it and console logging it.</p>
  
  <p>Second one (Front-end clicks the "Test" button, emitting a socket to the backend), same, opened 2 tabs, the first user clicks the TEST button which emits a socket to the backend, then on the backend, it listens to the socket event, now it emits back to the frontend which has the event name "fromBackend", which on the component im listening on it, ran the "messageListen" to the ComponentDidMount lifecycle. Now the problem is, the user who clicks the TEST button, receives back the data from the backend, but the other user didn't receive anything</p>
  
  <p>Last one (Changed the client.emit('fromBackend') to client.broadcast.emit('fromBackend') ), same as the second scenario, the first user clicks the TEST button, emits to the backend, now emits back to the frontend, this time, the user who clicks the TEST button didn't receive anything(Because of the broadcast), but now the other user receives the socket from the backend.</p>
  
  <p>Why is it behaving like this? Any help would be appreciated.</p>
  
  <p>Thank you!</p>