分离客户＆＃39;使用socket.io时的操作

Question

我是socket.io的新手，所以我需要一些帮助。我正在使用socket.io构建一个tic-tac-toe游戏，我希望它能在ngrok服务器上由两个人玩。我希望运行服务器（me）的播放器为X播放，连接到服务器的播放器为O播放，我也需要它们轮流播放。我无法弄清楚如何实现这一点，所以如果有人帮忙，我会非常感激。负责这部分的代码片段如下。

处理移动的功能：

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)
}

服务器：

socket.on('moveX', step => {
socket.broadcast.emit('moveX', {
  squares: step.squares,
  xIsNext: step.xIsNext,
  number: step.number,
  toggleSound: step.toggleSound
})
})
socket.on('moveO', step => {
socket.broadcast.emit('moveO', {
  squares: step.squares,
  xIsNext: step.xIsNext,
  number: step.number,
  toggleSound: step.toggleSound
})
})

我的组件代码：

componentDidMount () {
    this.socket.on('moveX', step => {
    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 => {
  this.setState({
    squares: step.squares,
    xIsNext: step.xIsNext,
    toggleSound: step.toggleSound
  })
  const buttons = document.querySelectorAll('.square');
  buttons[step.number].classList.add('flip');
})
}