Socket.io Issues with Phaser 3

Phaser 3
1

I’m following a walkthrough on creating a Multiplayer Card Game using Phaser 3 and Socket.io
Linked here: https://www.youtube.com/watch?v=6KaGqh1spfs&list=PLCbP9KGntfcEDAiseVwYVbrmJdoYajNtw&index=6

But when implementing the socket.io, it has an error:

image
image973×416 26.8 KB

Below is the code I currently have:

import io from 'socket.io-client';

export default class SocketHandler {
    constructor(scene){

        // Port 3000 is where the server is listening to as well
        scene.socket = io('http://localhost:3000');

        // Log that the connection is established, Activate the "Deal Cards""
        scene.socket.on('connect', () => {
            console.log('Connected!');
            scene.scoket.emit('dealDeck', scene.socket.id);
        })

        // When acknowledging that the first turn is commencing, change the turn
        scene.socket.on('firstTurn', () => {
            scene.GameHandler.changeTurn();
        })

        // Recieve the current "Game State" and respond accordingly
        scene.socket.on('changeGameState', (gameState) => {
            scene.GameHandler.changeGameState(gameState);

            // If Initializing, Deal one card each to signify which card back
            if (gameState === "Initializing") {
                scene.DeckHandler.dealCard(1000, 860, "cardBack", "playerCard");
                scene.DeckHandler.dealCard(1000, 125, "cardBack", "opponentCard");

                // Set the Deal Cards button to interactive, and change its colour to signify
                scene.dealCards.setInteractive();
                scene.dealCards.setColor('#00ffff');
            }
        })

        // If the socketID is the same as the one recieved
        scene.socket.on('dealCards', (socketId, cards) => {
            if (socketId === scene.socket.id) {

                // Give the player the cards, offset the cards so they aren't all stacked
                for (let i in cards) {
                    let card = scene.GameHandler.playerHand.push(scene.DeckHandler.dealCard(155 + (i * 155), 860, cards[i], "playerCard"));
                }

                // Otherwise, deal the opponent "card backs"
            } else {
                for (let i in cards) {
                    let card = scene.GameHandler.opponentHand.push(scene.DeckHandler.dealCard(155 + (i * 155), 135, "cardBack", "opponentCard"));
                }
            }
        })

        scene.socket.on('cardPlayed', (cardName, socketId) => {
            if (socketId !== scene.socket.id) {

                // Remove cards from opponents hand when played
                scene.GameHandler.opponentHand.shift().destroy();
                scene.DeckHandler.dealCard(scene.dropZone.x, scene.dropZone.y, cardName, "opponentCard");
            }
        })
    }
}

and also:

const server = require('express')();
const http = require('http').createServer(server);
const cors = require('cors');
const shuffle = require('shuffle-array');
let players = {};
let readyCheck = 0;

const io = require("socket.io")(http, {
    cors:{
        origin:'http://localhost:8080',
        methods:["GET", "POST"]
    }
});

io.on('connection', function (socket) {
    console.log('A User Connected: ' + socket.id);

    players[socket.id] = {
        inDeck: [],
        inHand: [],
        isPlayerA: false
    }

    if (Object.keys(players).length < 2) {
        players[socket.id].isPlayerA = true;
        io.emit('firstTurn');
    }

    socket.on('dealDeck', function(socketId) {
        players[socketID].inDeck = shuffle(["boolean", "ping"]);
        console.log(players);
        if(Object.keys(players).length < 2) return;
        io.emit('changeGameState', "Initializing")
    })
})

http.listen(3000, function () {
    console.log('Server Started!');
})

Any help would be greatly appreciated!

2

Probably scene is undefined here.

3

Where & How would I define scene in this issue?

I’m not very practiced with phaser, and am mostly just following the walkthrough

4

Maybe scene wasn’t passed in the constructor. Check Game.create() in game.js.

If you turn on Pause on exceptions in the browser’s debugger you can go backwards in the error stack and look at the values.