GitHub Documentation Patreon donate button

How to get arrays on javascript client?



  • Hey guys!

    I just started working with Colysus and liked it a lot!
    But there is something I can't understand yet...

    This is my Player class:

    import { Schema, type } from '@colyseus/schema';
    
    class PlayerState extends Schema {
      @type('number') level: number = 0;
      @type('number') timer: number = 300;
      @type('number') points: number = 0;
      @type('number') errors: number = 0;
      @type('boolean') error: boolean = false;
    }
    
    class GameState extends Schema {
      @type(['number'])
      game: number[] = [];
    }
    
    export class Player extends Schema {
      @type('string')
      sessionId: string;
    
      @type('string')
      name: string;
    
      @type(PlayerState)
      state: PlayerState = new PlayerState();
    
      @type(GameState)
      gameState: GameState = new GameState();
    }
    

    When I listen to changes on PlayerState, for example, it's ok I get the information:

    player.state.onChange = (changes) => {
        changes.forEach((c) => {
          this.players[this.getPlayerIndex(key)].state[c.field] = c.value;
        });
    };
    
    [{op: 128, field: "level", dynamicIndex: undefined, value: 0, previousValue: undefined},
    {op: 128, field: "timer", dynamicIndex: undefined, value: 300, previousValue: undefined},
    {op: 128, field: "points", dynamicIndex: undefined, value: 0, previousValue: undefined},
    {op: 128, field: "errors", dynamicIndex: undefined, value: 0, previousValue: undefined},
    {op: 128, field: "error", dynamicIndex: undefined, value: false, previousValue: undefined}]
    

    But when get the information from GameState ('game' wich is an array) I get this:

    [{op: 128, field: "game", dynamicIndex: undefined, value: Proxy, previousValue: undefined}]
    
    Proxy {$changes: ChangeTree, $items: Map(16), $indexes: Map(16), $refId: 0, $proxy: true}
    

    How can I deal with this 'Proxy'?
    I've tried a lot of stuff and nothing works...
    I would like to understand how to read it, get the original array from this and get the changes.

    Thanks in advance!


  • administrator

    Hi @leal32b, glad you're enjoying using Colyseus so far!

    Arrays are accessible on the client-side via a Proxy - you can expect them to have exactly the same methods from a JavaScript Array object, which you can see the documentation here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

    If you'd like to debug the values from the array, you can use console.log(Array.from(proxy)). You can access and manipulate the Proxy instance just like a regular though, it just does not print properly via console.log().

    Docs about the ArraySchema can be found here as well: https://docs.colyseus.io/state/schema/#arrayschema



  • @endel said in How to get arrays on javascript client?:

    console.log(Array.from(proxy))

    Thanks a lot, endel!! Worked perfectly!
    Colyseus rocks! xD


 

© 2020 Endel Dreyer