[SOLVED] Colyseus is not working with Playcanvas - MultiPlayer Demo not work

Help & Support
1

Hey guys, I am following the Colyseus MultiPlayer Tuturial: Real-time Multiplayer with Colyseus | Learn PlayCanvas and trying to make it work.

After setting up the server(I download the server code with this git and didn’t change the code: GitHub - colyseus/tutorial-playcanvas-server: Server code for Tutorial: Real-time Multiplayer with PlayCanvas and Colyseus), and following the tuturial and write the client-side code, it shows up an error Like this:

join error
Cannot read properties of undefined (reading 'players')

I tried to change the code for the whole day but still cannot fix it, and my client-code is very simple:

var NetworkManager = pc.createScript('networkManager');

// initialize code called once per entity
NetworkManager.prototype.initialize =  function() {
  //
  // instantiate the SDK
  // (no connection is established at this point)
  this.app.colyseus = new Colyseus.Client("ws://localhost:2567");
  
  this.player = this.app.root.findByName('Player');

  // we will assign each player visual representation here
  // by their `sessionId`
  this.playerEntities = {};
  
  try {
    this.room = this.app.colyseus.joinOrCreate("my_room", {/* options */});
    console.log("joined successfully", this.room);
    this.initPlayers(this.room);
      
  } catch (e) {
    console.error("join error", e);
  }


  
};


NetworkManager.prototype.initPlayers = function (room) {
    // Listening to schema for player addition.

    room.state.players.onAdd(() => {
    /*
     * a player has been added
   *     room.state.players.onAdd((player, sessionId) => {  >>>>> This is not working as well
     */
      console.log("A player has joined! Their unique session id is", sessionId);
    }, false);

    return room;

};

Also, I searched up on the playcanvas forum and Colyseus forum, I found a relative related topic: Colyseus Arena Room Create - Error Loading Scripts: utf8Read Invalid Byte 81

So is it because the version of Colyseus 0.15@preview？ But I am not using the Arena and the tuturial indicades to use this version of Colyseus.

Here is my project: PlayCanvas 3D HTML5 Game Engine

I am looking forward your reply and many thanks to PlayCanvas and Colyseus developers! You are making amazing tools!

@Lahiru_Pathirage @yaustar @endel

1 Like
2

Hi @dkthegreat and welcome,

I think there is a number of things going on here:

  1. When you execute the initPlayers() method, you don’t wait first for the server connection to complete and receive the active room. One easy way to fix that is to use async/await in your initialize method:
// initialize code called once per entity
NetworkManager.prototype.initialize =  async function() {

  // instantiate the SDK
  // (no connection is established at this point)
  this.app.colyseus = new Colyseus.Client("ws://localhost:2567");
  this.player = this.app.root.findByName('Player');

  // we will assign each player visual representation here
  // by their `sessionId`
  this.playerEntities = {};
  
  try {
    this.room = await this.app.colyseus.joinOrCreate("my_room", {/* options */});
    this.initPlayers(this.room);
  } catch (e) {
    console.error("join error", e);
  }  
};
  1. After you add the player to the active room, you try to print the sessionId, but that fails because you are missing the callback parameters there. Fix:
NetworkManager.prototype.initPlayers = async function (room) {

    await room.state.players.onAdd((player, sessionId) => {
      console.log("A player has joined! Their unique session id is", sessionId);
    }, false);

    return room;
};
5 Likes
3

Oh Thanks a lot!

It works and I understand it now! :heart_eyes: :heart_eyes::heart_eyes:

Thanks again!

2 Likes