How do I play online with react js + phaser 3 + socket.io?

Phaser 3
1

I’m doing an online game with phaser 3, react js and socket.io, but I do not know how to add socket.io to the project. the tutorials do not work for me, I’m desperate. I don’t know how to connect

2

Socket.io is very easy to use. Just read its documentation.

Have also a look at this multiplayer game example.

1 Like
3

If you’ve done the tutorial and it still isn’t working, perhaps you can post some code here so others can see what’s wrong with it?

4

I have a question, I want to use the reaction state, to validate some things in the game. but if I try to see the content of the state it does not appear

if(this.game.react.state.player2===true){
  player2= true
}
5

Since you ask me directly, I assume you are refering to my phaser react example.

This is not how I would recommend getting and setting the react state. I would pass the phaser scene to the react component and access the state via event emitter.

6

I am new using react, and I do not understand how to do what you tell me

7

this is my game component

class GameRoom extends Component{
constructor(){
super();
this.state ={
inGame: true,
player2:false,

    }
}

componentDidMount() {
    this.game = new init(this)
  }
render(){

    return(
       
            
            <div> 
                <Fragment className="room">
                
                <div id="container" />
               
                </Fragment>
               
            </div>
       
       
            
       
        
    );
}

}
export default GameRoom;

this is my main

class Main extends Component {
constructor(){
super();
this.state ={
inGame:false,
player2:false
};

}
changeState(inGame,player2){
    this.setState({
        inGame:inGame,
        player2:player2
    });
    
    
}
componentDidMount(){
   
   
}
render(){
    console.log(this.state.player2)
    if (this.state.inGame===false){ 
        return ( 
            <div className="Home">  
            
            <div className="Contenido">
            < CardLogin onChangeState={this.changeState.bind(this)}/>
              
            </div>
            
            
            
        </div>
        
        ); }
    else{ 
        const Height = window.innerHeight;
        return(
            <Scrollbars  style={{  height: Height }} >
                 <div className="GameRoom"> 
                <Navegation/>
                
                 <GameRoom/>
                 <Footer/>
            </div>
           
          </Scrollbars>
           
        );
      

    }
     


}

}
export default Main;

the component cardlogin change the state, but in gameroom the state does not change

8

quiero poder heredar a gameroom un estado o un prop desde el main @yannick

9

Because you do never change the state of GameRoom. You only change the state of Main. States are not share between components. Each stateful component has its own state.

I guess you just need to practice react a bit more first.

10

Thank you very much, I was misunderstanding the functioning of the states. everything is already working. I will see how you manage the addition of players because I did it in the most complicated way possible.
sorry if I express myself badly, English is not my native language

1 Like