反应节点js套接字io发出未到达前端

时间:2019-12-01 01:51:37

标签: node.js reactjs socket.io

你好,我有一个函数可以发送两个套接字值

  getMatchConfigurationFor = players => {
    console.log(sessionMap.all())
    if(players){
      const match = new Match(players);
      const result = {
        idMatch: match.id,
        playerOne: match.players[0],
        playerTwo:match.players[1]
      }
      return result;
    }
  }
  configurePlayersForNewMatch = (matchedPlayers) => {
    matchedPlayers.forEach(player =>
      sessionMap.get(player.socketId)
        .broadcast.to(player.socketId)
        .emit('match',
          this.getMatchConfigurationFor(matchedPlayers)));
  }

我测试了所有这些,并且运行良好,但是我尝试听前端的sme成功,我不知道为什么

我的前端:

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) => {
      console.log('a')
      console.log(result);
    });

    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;

我有一个进入服务器的所有套接字的会话图:

var SessionMap = {};
module.exports = {
    set: function(key,value){
        SessionMap[key] = value;
    },
    get: function(key){
        return SessionMap[key]
    },
    delete: function(key){
        delete SessionMap[key]
    },
    all: function(){
        return SessionMap
    }
}

我调试了所有代码,没有任何错误 控制台。发送的套接字之一的日志

https://pastebin.com/XHDXH9ih

0 个答案:

没有答案