title: separating clients' actions when using socket.io
body: <p>I'm new to socket.io, so I need some help. I'm building a tic-tac-toe game using socket.io and I want it to be played by two people on an ngrok server. I want the player that runs the server(me) to play for X and the player that connects to the server to play for O and I also need them to take turns. I can't figure out how to implement that, so I'd be very grateful if someone helps. The snippets of code that are responsible for that are below.</p>
  
  <p>The function that handles a move:</p>
  
  <pre><code>handleClick(i) {
  const squares = this.state.squares;
  
  if (calculateWinner(squares) || squares[i]) {
    return;
  }
  const buttons = document.querySelectorAll('.square');
  buttons[i].classList.add('flip');
  squares[i] = this.state.xIsNext ? 'X' : 'O';
  let index = i;
  const step = {
    squares: squares,
    xIsNext: !this.state.xIsNext,
    number: index,
    toggleSound: true
  };
  this.state.xIsNext
  ? this.socket.emit('moveX', step)
  : this.socket.emit('moveO', step)
  }
  </code></pre>
  
  <p>Server:</p>
  
  <pre><code>socket.on('moveX', step =&gt; {
  socket.broadcast.emit('moveX', {
    squares: step.squares,
    xIsNext: step.xIsNext,
    number: step.number,
    toggleSound: step.toggleSound
  })
  })
  socket.on('moveO', step =&gt; {
  socket.broadcast.emit('moveO', {
    squares: step.squares,
    xIsNext: step.xIsNext,
    number: step.number,
    toggleSound: step.toggleSound
  })
  })
  </code></pre>
  
  <p>Code from my component:</p>
  
  <pre><code>componentDidMount () {
      this.socket.on('moveX', step =&gt; {
      this.setState({
      squares: step.squares,
      xIsNext: step.xIsNext,
      toggleSound: step.toggleSound
    })
    const buttons = document.querySelectorAll('.square');
    buttons[step.number].classList.add('flip');
  })
  this.socket.on('moveO', step =&gt; {
    this.setState({
      squares: step.squares,
      xIsNext: step.xIsNext,
      toggleSound: step.toggleSound
    })
    const buttons = document.querySelectorAll('.square');
    buttons[step.number].classList.add('flip');
  })
  }
  </code></pre>