TypeScript - Phaser 3 - mySQL - socket.io: Multiple game instances created after failed login

[RobJonHol]

I am having this issue where after I fail to sign in and then successfully sign into my game it will create a game instance for every time I failed to login. This also happens on failed sign up attempts. Any help would be greatly appreciated.

My repo: https://github.com/RobertHolstein/ElevaidusTS

 

Failed login attemped

 

Two game instances after giving correct sign in info

SERVER

private listen(): void {
        this.server.listen(this.port, () => {
            console.log(`\n\n===============>\t running server on port ${this.port}\n`);
        });

        this.io.on('connect', (socket: socketIo.EngineSocket) => {
            console.log(`\n\n===============>\t connected client on port ${this.port}\n`);
            socket.on('messageFromFrontend', (m: string) => {
                console.log(`\n\n===============>\t ${m}\n`);
                this.io.emit('messageFromBackend', 'Hello from the backend!');
            });

            socket.on('signIn', (signInInfo: any) => {
                let sql = 'SELECT * FROM player WHERE username = ? AND password = ?';
                var query = this.db.query(sql, [signInInfo.username,signInInfo.password], (err, res) => {
                    if (err) {
                        console.log(err);
                        socket.emit('errorFromBackend', err.code);                        
                    }else if(res.length === 0){
                        socket.emit('errorFromBackend', 'username and or password was incorrect');                 
                    }else{
                        console.log(`\n\n===============>\t Player logging in\n`)
                        console.log(`===============>\t username: ${signInInfo.username}\n`)
                        console.log(`===============>\t password: ${signInInfo.password}\n`)
                        this.CreatePlayer(socket, { player: res[0], isNew: false });
                    }
                })
            })

            socket.on('signUp', (signUpInfo) => {
                let postPlayer = { username: signUpInfo.username, password: signUpInfo.password}
                let sql = 'INSERT INTO player SET ?';
                let query = this.db.query(sql, postPlayer, (err, res) => {
                    if(err){
                        console.log(err);
                        if(err.code === 'ER_DUP_ENTRY'){
                            socket.emit('errorFromBackend', 'this username is already in use');
                        }else{
                            socket.emit('errorFromBackend', err.code);
                        }
                    }else{
                        let player = this.CreatePlayer(socket, {player: {id:res.insertId}, isNew: true});
                    }
                }) 
            })
            
            socket.on('disconnect', () => {
            console.log(`\n\n===============>\t client disconnected\n`);
            });
        });
    }

CLIENT

/// <reference path="./phaser.d.ts"/>

import * as io from 'socket.io-client';
import 'phaser';
import { GameScene } from "./scenes/gameScene";

var signInDiv = document.getElementById('signInDiv');
var signInUsername = document.getElementById('signInUsername') as HTMLInputElement;
var signInPassword = document.getElementById('signInPassword') as HTMLInputElement;
var signInBtn = document.getElementById('signInBtn');
var signUpBtn = document.getElementById('signUpBtn');

const config: GameConfig = {
  title: "Elevaidus",
  version: "1.0",
  width: 640,
  height: 640,
  type: Phaser.AUTO,
  parent: "game",
  scene: [ GameScene ],
  input: {
    keyboard: true
  },
  physics: {
    default: "arcade",
    arcade: {
      gravity: { y: 0 },
      debug: false
    }
  },

};



export class ioService {
  private socket: SocketIOClient.Socket;

  constructor() {
    this.socket = io.connect();
    this.sendMessage('hello from the frontend!');
  }

  // EMITTER
  private sendMessage(msg: string) {
    this.socket.emit('messageFromFrontend', msg );
    this.socket.on('messageFromBackend', (m: string) => {
      console.log(`\n\n===============>\t ${m}\n`);
      });
  }

      public SignIn(): void {
        this.socket.emit('signIn', {username: signInUsername.value, password: signInPassword.value })
        this.socket.on('signedIn', (playerInfo: any) => {
          this.CreateGame(playerInfo);
        })
        this.socket.on('errorFromBackend', (err: string) => {
          alert(err);
        })
      }
      
      public SignUp(): void {
        this.socket.emit('signUp', {username: signInUsername.value, password: signInPassword.value })
        this.socket.on('signedUp', (playerInfo: any) => {
          this.CreateGame(playerInfo)
        })
        this.socket.on('errorFromBackend', (err: string) => {
          alert(err);
        })
      }
  
  private CreateGame(playerInfo: any): void{
    signInDiv.hidden = true;
    var game = new Phaser.Game(config);
    console.log(playerInfo)
  }
}

var socket = new ioService();

signInBtn.onclick = () => {
  socket.SignIn();
}
signUpBtn.onclick = () => {
  socket.SignUp();
}

 

[bryangalli]

The reason your getting multiple load is because every time you call SignIn() in the client script, it binds the signedIn event to the socket .. so once you finally get a successful login, it has multiple instances of signedIn event bound to the socket and thus calls createGame x (number of bad logins)  times.... make sense?

[RobJonHol]

14 hours ago, bryangalli said:

The reason your getting multiple load is because every time you call SignIn() in the client script, it binds the signedIn event to the socket .. so once you finally get a successful login, it has multiple instances of signedIn event bound to the socket and thus calls createGame x (number of bad logins)  times.... make sense?

This makes absolute sense. I actually figured this out a couple weeks ago and I should of came back here and updated my question. Anyways, thanks for you help on this!

[bryangalli]

Np! Glad you got it working!