Awesome, thanks :)

it seems it is not a server side problem but rather a client one.

the server is implemented like this:

onJoin(client: Client, options: any) {
    if (Object.keys(this.state.teams).length === 2) {
        this.lock();
    } else {
        // add team
        this.state.addTeam(client.sessionId, options.team);

        // start if we have both teams
        if (this.state.teamCount === 2) {
            this.state.startBattle();

            // broadcast new team
            this.broadcast({
                type: 'STARTED',
                state: this.state,
            });
        }
    }
}

and the client is implemented like this:

this.room = this.client.joinOrCreate('battle', {team}).then(room => {
    room.onJoin(() => this.onRoomJoin(team));
    room.onStateChange((state) => this.onRoomStateChange(state));
    room.onMessage((message) => this.onRoomMessage(message));
    room.onError(() => this.onRoomError());
    room.onLeave(() => this.onRoomLeave());
}).catch(e => {
    console.log('---> JOIN BATTLE FAILED!!!: ', e);
});

onRoomMessage = message => {
        console.log('---> ON MESSAGE: ', this.client.id, this.room.name, message);
}

but the onRoomMessage method is never called

Great, that was exactly it!

However after migrating now every joinOrCreate creates a new room, I have this:

gameServer.define('room', BattleRoom);

and this:

onJoin(client: Client, options: any) {
    console.log('onJoin', Object.keys(this.state.teams).length);
    if (Object.keys(this.state.teams).length === 2) {
        this.lock();
    }
}

debug is always "onJoin 0".

I'm trying to migrate an existing project to version 0.11 so I resolved to start from scratch because it was yielding an error but the error remains. Here's the code:

index.ts

import http from 'http';
import express from 'express';
import { Server } from 'colyseus';
import cors from 'cors';

import { StateHandlerRoom } from './rooms/room';

const port = Number(process.env.PORT || 2567);
const app = express();

app.use(cors());
app.use(express.json());

const server = http.createServer(app);
const gameServer = new Server({ server });

gameServer.define('room', StateHandlerRoom);

gameServer.listen(port);
console.log(`Listening on ws://localhost:${ port }`);

room.ts

import { Room, Client } from 'colyseus';
import { Schema, type, MapSchema } from '@colyseus/schema';

export class Player extends Schema {
    @type("number")
    x = Math.floor(Math.random() * 400);

    @type("number")
    y = Math.floor(Math.random() * 400);
}

export class State extends Schema {
    @type({ map: Player })
    players = new MapSchema<Player>();

    something = "This attribute won't be sent to the client-side";

    createPlayer (id: string) {
        this.players[ id ] = new Player();
    }

    removePlayer (id: string) {
        delete this.players[ id ];
    }

    movePlayer (id: string, movement: any) {
        if (movement.x) {
            this.players[ id ].x += movement.x * 10;

        } else if (movement.y) {
            this.players[ id ].y += movement.y * 10;
        }
    }
}

export class StateHandlerRoom extends Room<State> {
    maxClients = 4;

    onCreate (options) {
        console.log("StateHandlerRoom created!", options);

        this.setState(new State());
    }

    onJoin (client: Client) {
        this.state.createPlayer(client.sessionId);
    }

    onLeave (client) {
        this.state.removePlayer(client.sessionId);
    }

    onMessage (client, data) {
        console.log("StateHandlerRoom received message from", client.sessionId, ":", data);
        this.state.movePlayer(client.sessionId, data);
    }

    onDispose () {
        console.log("Dispose StateHandlerRoom");
    }

}

and in React I'm doing:

this.client = new Client("ws://localhost:2567");
this.room = this.client.joinOrCreate('room').then(room => {
    console.log('---> JOIN BATTLE: ', this.room);
}).catch(e => {
    console.log('---> JOIN BATTLE FAILED!!!: ', e);
});

can't seem to get past this error:

Error: SchemaSerializer error. See: https://docs.colyseus.io/migrating/0.10/#new-default-serializer
    at SchemaSerializer.reset (/SERVER/node_modules/colyseus/lib/serializer/SchemaSerializer.js:13:19)
    at StateHandlerRoom.setState (/SERVER/node_modules/colyseus/lib/Room.js:109:26)
    at StateHandlerRoom.onCreate (/SERVER/rooms/room.ts:42:14)
    at /SERVER/node_modules/colyseus/lib/MatchMaker.js:215:28

ah so it should be:

import { Client } from 'colyseus.js';
//...
this.client = new Client('ws://localhost:2567');

otherwise it yields cannot find Client of undefined.

Thanks, it works now :)

Hi,

I've started a simple react project using create-react-app and then npm install colyseus.js but when I do:

import React, { Component } from 'react';
import Colyseus from 'colyseus.js';

const INITIAL_STATE = {
    myTeamId: null,
    opponentTeamId: null,
    battleState: null,
};

class BattleScreen extends Component {
    state = INITIAL_STATE;

    constructor() {
        super();

        this.client = new Colyseus('ws://localhost:2567');
    }

    render() {
        return (
            <div></div>
        );
    }
}

export default BattleScreen;

it yields the following error:

BattleScreen.js:16 Uncaught TypeError: colyseus_js__WEBPACK_IMPORTED_MODULE_1___default.a is not a constructor

any thoughts?

@endel while putting together the repo I managed to get it working because I linked to the client script in https://raw.githack.com/colyseus/colyseus.js/master/dist/colyseus.js instead of the local one I had, maybe it was just a bug in the old version I was running.

You're right, its not easy to test from what I've shown, I just assumed I was doing something obviously wrong that you would pickup off the bat.

I'll setup a repo with it, at the moment its split into 2 different ones and has a lot of unnecessary code.

Thanks again, I'll let you know when its done.

Hi,

I'm having trouble using Schema for my state. If I comment the setState line it works.

Here's what I got:

import { Room, Client } from 'colyseus';
import { type, Schema } from '@colyseus/schema';

import { BattleState } from './BattleState';
import { MessageType } from '../utils';

export class BattleRoom extends Room {
    @type('number') maxClients = 2;

    onInit(options: any) {
        this.setState(new BattleState());
    }

    onJoin(client: Client, options: any) {
        console.log('onJoin', options);
        
        if (this.clients.length === 2) {
            this.lock();
        }
    }

    onLeave(client: Client, consented: boolean) {
        console.log('onLeave', consented);
    }

    onMessage(client: Client, message: any) {
        console.log('onMessage', message);
    }

    onDispose() {
        console.log('onDispose');
    }
}

import { MapSchema, Schema, type } from '@colyseus/schema';

import { BattleTeam } from '../entities/BattleTeam';

export class BattleState extends Schema {
    @type('uint8') round = 0;
    @type('string') status = 'READY';
    @type('uint8') moves = 0;
    @type('uint8') teamCount = 0;
    @type({ map: BattleTeam }) teams = new MapSchema<BattleTeam>();
}

import { Schema, type } from '@colyseus/schema';

import { BattleTeamData } from '../utils';

export class BattleTeam extends Schema {
    @type('uint8') move: number;

    constructor(teamData: BattleTeamData) {
        super();

        this.move = 0;

        console.log('---- BattleTeam ----');
        console.log(this.toJSON());
    }
}

interface BattleTeamData {
    move: number;
}