具有socket.io的逻辑/和node / react

Question

当用户登录到站点时，我将他们的数据保存到本地存储中，并使用套接字将其发送到后端：

const player = JSON.parse(localStorage.getItem('user'));
this.socket.emit('addPlayer-Queue', player);

在我的后端获取此数据我将把此播放器放入队列，等待下一个播放器进入

在我的后端：

  socket.on('addPlayer-Queue', (result) => {
      const player = {
        id: result.id,
        name: result.name,
        mmr: result.mmr
      }
      queue.addPlayer(player)
      const makeMatch =  queue.searching(player.id);   
      console.log(makeMatch);
      console.log(queue);
  socket.emit('match', makeMatch) 
  });

我将玩家添加到队列中，并使用此功能为他寻找对手

  searching(id) {
    const firstPLayer = this.players.find(p => p.id == id)
    const { mmr } = firstPLayer
    const secondPlayer = this.players.find((playerTwo) => playerTwo.mmr < (5 / 100) * mmr + mmr && playerTwo.mmr > mmr - ((5 / 100) * mmr) && playerTwo.id != firstPLayer.id);
    if(!secondPlayer){
      return null;
    }
    const matchedPlayers = [
      firstPLayer,
      secondPlayer
    ]
    // remove matched players from this.players
    this.removePlayers(matchedPlayers);
    // return new Match with matched players
    return matchedPlayers;
  }

如果有对手，我将返回一个包含玩家+对手的数组，如果我找不到该对手，我会向前端发送空值

并且在前端，我一直在听我的活动：

  this.socket.on('match', (result) => {
      if(!result){
        console.log('sem match');
      }
      else{
        this.setState({
          players: result
        })
      }

    });

我与第一个用户一起进入，然后我的状态玩家为空因为我找不到他的对手

当我输入第二个帐户时

在我的后端，我将已经有一个玩家排队，然后有了这个新用户，我可以组成一场战斗，因此我的玩家不会出现null，这将使两个玩家都返回一个数组，如下所示：

Array(2)
0: {id: 3, name: "test", mmr: 1000}
1: {id: 2, name: "spt", mmr: 1000}
length: 2
__proto__: Array(0)

但是我想知道如何将它卖给我的玩家？

因为我的state.players仍然为null即使找到了匹配的数组，它仍然是一个空数组。像这样：[]

我不知道我对此无能为力，我也想如果同时有4个玩家排队怎么办？我会有问题吗？

我的前端：；

 import React, { Component } from 'react';
import io from 'socket.io-client';
import Loading from './Loading'
import Players from './Players'
class Home extends Component {

  constructor(props, context) {
    super(props, context);
    this.socket = null;
    this.state = {
      queue: [],
      loading: true,
      players: [],
    };
  }

  componentDidMount() {
    // io() not io.connect()
    this.socket = io('http://localhost:9000');

    const player = JSON.parse(localStorage.getItem('user'));
    this.socket.emit('addPlayer-Queue', player);
    this.socket.on('match', (result) => {
      if(!result){
        console.log('sem match');
      }
      else{
        this.setState({
          players: result
        })
      }

    });
/*
      this.socket.on('queue', (queue) => {
        console.log('ae');
        if (queue === 1) {
          this.setState({
            queue: queue,
            loading: false,
          })
        }else if(queue != 1)
        this.setState({
          queue: queue,
          loading: true,
        })
      });*/

    this.socket.open();
  }

  componentWillUnmount() {
    this.socket.close();
  }
  render() {
    const { queue } = this.state;
    const { loading } = this.state;
    const { players } = this.state
    const visibility = loading ? 'hidden' : 'visible';
    return (
     <div className="container">

       <div className="result">
       </div>
       <div className="ctnFlex">
    <div className="playerOne">{players.map(pls => <p>{pls.name}</p>)}</div>

           <Loading loading={loading} message='in queue.' />
         <div className="playerTwo" style={{ visibility }}>
         <Players players={players}/>
         </div>

       </div>

     </div>
   )
   }
}

export default Home;

具有第一个帐户排队的SS

具有第二个帐户排队的SS

Answer 1

是的，您遇到了设计问题。您需要将匹配算法与玩家注册解耦。在服务器上，您应该有一个与玩家匹配的定时事件，而不是在玩家加入时立即进行，因为如您所见，只有新加入的玩家才能获得该事件。我无法为您编写代码，但是大致的想法是：

• 保留一系列无与伦比的玩家
• 当玩家注册时，将它们添加到不匹配的玩家数组中>>
• [当服务器启动时，使用setInterval(matchPlayers, 1000)每1秒运行一次匹配项。
• matchPlayers将查看您不匹配的玩家数组，如果其中包含> 1个玩家，它将创建一个匹配并向玩家的套接字发出match事件。 （尚不清楚如何跟踪将哪些事件发送给哪些玩家）。

使用setInterval每两秒钟左右运行一次匹配，并将匹配事件发送到相关的套接字。您不清楚如何关联

通常，您的代码中没有足够的“关注点分离”。例如，您具有在套接字事件处理程序内部的前端组件上设置状态的代码。那太紧了。相反，您应该将所有套接字处理代码都包含在自己的服务中，然后从那里将事件发送到组件，例如通过redux或其他事件系统。