node.js - 与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;
  }

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

在我的前端，我一直在监听我的事件:

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

    });

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

当我输入第二个帐户时

在我的后端，我已经有我的玩家一个在队列中，然后有了队列中的这个新用户，我可以形成一场战斗，这样我的玩家中就不会出现空值，会返回一个包含两个玩家的数组，如下所示:

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 或其他一些事件系统。