从 socket.io 接收数据时如何重新渲染组件？

Question

我正在尝试使用 React 和 socket.io 构建一个实时多人游戏，所以当用户登录时，我使用 socket.io 在服务器端的数组中传递他的名字，然后游戏组件出现，我映射数组以显示所有玩家的姓名。

所以，第一个玩家登录，他的名字显示在他的窗口上，第二个玩家登录然后在他的窗口上得到他的名字+第一个玩家的名字，但是第一个玩家的窗口没有更新以显示第二个玩家在他之后登录。

知道如何在从 socket.io 接收到数据时触发组件上的渲染吗？

import React, { Component } from 'react'
import { Button } from 'semantic-ui-react'
import socket from '../api'

class connectedUsers extends Component {
  constructor(props) {
    super(props)

    this.state = {players : []}
  }

  handleData = (data) => {
    this.setState({players: data})
    console.log('handleData ' + data);
  }

  componentDidMount() {
    socket.on('playerList', this.handleData)
  }

  render() {
    console.log('render ' + this.state.players);
    return(
      <div>
        {this.state.players.map(player =>
          <Button basic color='violet' key={player}>{player}</Button>
        )}
      </div>
    )
  }

}

export default connectedUsers

import openSocket from 'socket.io-client'

const socket = openSocket('http://localhost:3001')

export default socket

module.exports = function (io) {
  let players = []

  io.on('connection', socket => {


    socket.on('playerConnected', (player) => {

      players.push(player)

      socket.emit('playerList', players)
    })

    socket.on('disconnect', () => {

       console.log('user disconnected')
     })
  })
 }

import React, { Component } from 'react'
import { Form, Message } from 'semantic-ui-react'
import { Redirect } from 'react-router-dom'
import socket from '../api'

class PseudoForm extends Component {
  state = { name: '', pseudoDispo: false, pseudoValide: true, pseudoNonDispo: false}

  handleChange = (e, { name, value }) => this.setState({ [name]: value })

  handleSubmit = (e) => {
    e.preventDefault()

    const { name } = this.state


    this.setState({pseudoDispo: false})
    this.setState({pseudoNonDispo: false})

    if(name.length > 3) {
      this.setState({pseudoValide: true})

      fetch('/postpseudo', {
        method: "POST",
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({pseudo: name})
      })
        .then(res => res.json())
        .then(data => {
          if(data.pseudoDispo) {
            this.setState({pseudoDispo: data.pseudoDispo})
            socket.emit('playerConnected', name)
          } else {
            this.setState({pseudoNonDispo: true})
            }
          })
        .catch(error => console.error(error))


    } else {
      this.setState({pseudoValide: false})
    }
  }

  render() {
    const { name } = this.state
    const redirectToGame = this.state.pseudoDispo ? <Redirect to={{pathname: '/game'}} /> : true
    return(
      <div>
        {redirectToGame}
          <Form
            success={this.state.pseudoDispo}
            error={this.state.pseudoNonDispo}
            warning={!this.state.pseudoValide}
            onSubmit={this.handleSubmit}
          >
            <Form.Input
              placeholder="Pseudo"
              name="name"
              width={4}
              value={name}
              onChange={this.handleChange}
            />
            <Message
              success
              header='Pseudo Disponible'
            />
            <Message
              error
              header='Pseudo déja pris'
            />
            <Message
              warning
              header='Le pseudo est trop court'

            />
            <Form.Button primary >Envoyer</Form.Button>
          </Form>
      </div>
    )
  }
}

export default PseudoForm

Answer 1

好的，现在它可以使用 io.emit 而不是 socket.emit + socket.broadcast.emit 这是工作示例

module.exports = function (io) {
  let players = []

  io.on('connection', socket => {


    socket.on('playerConnected', (player) => {

      players.push(player)

      io.emit('playerList', players)
    })


    socket.on('disconnect', () => {

       console.log('user disconnected')
     })
  })
 }

import React, { Component } from 'react'
import ConnectedUsers from '../components/connectedUsers'
import socket from '../api'


class Game extends Component {
  constructor() {
    super()

    this.state = { players: [] }
  }

  componentDidMount() {
    socket.on('playerList', this.handleData)
  }
  
  handleData = (playerList) => {
    this.setState({players: playerList})
  }

  render() {

    return(
      <div>
        <ConnectedUsers list={this.state.players}/>
      </div>
    )
  }
}

export default Game

import React, { Component } from 'react'
import { Button } from 'semantic-ui-react'

class connectedUsers extends Component {
  constructor(props) {
    super(props)


    this.state = {players : []}
  }



  render() {
    console.log('render ' + this.state.players);
    return(
      <div>
        {this.props.list.map(player =>
          <Button basic color='violet' key={player}>{player}</Button>
        )}
      </div>
    )
  }

}

export default connectedUsers

Answer 2

好的，所以我尝试在服务器端的第一个 socket.emit 之后添加一个 socket.broadcast.emit，它可以工作，所有新窗口都会在更新时获取新的玩家列表，但我不知道为什么！ 有人对此有想法吗？

module.exports = function (io) {
  let players = []

  io.on('connection', socket => {


    socket.on('playerConnected', (player) => {

      players.push(player)

      socket.emit('playerList', players)
      socket.broadcast.emit('playerList', players)
    })


    socket.on('disconnect', () => {

       console.log('user disconnected')
     })
  })
 }