Message format issues in Tic-Tac-Toe Phaser-Nakama tutorial

Documentation
,
1

I’m following the setup described in the Tic-Tac-Toe PhaserJS Tutorial

The setup described there didn’t work right away. Some additional serializing/deserializing had to be done on the client side. If this understanding is correct, please consider revising the tutorial accordingly.

InGame.js: result.data needs to be deserialized before its components can be accessed.

InGame.js (original)

//...
    nakamaListener() {
        Nakama.socket.onmatchdata = (result) => {
            switch (result.op_code) {
                case 1:
                    this.gameStarted = true;
                    this.setPlayerTurn(result.data)
                    break;
                case 2:
                    console.log(result.data)
                    this.updateBoard(result.data.board)
                    this.updatePlayerTurn()
                    break;
                case 3:
                    this.endGame(result.data)
                    break;
            }
        };
    }
//...

InGame.js (revised)

//...
    nakamaListener() {
        Nakama.socket.onmatchdata = (result) => {
            var data = JSON.parse(String.fromCharCode(... result.data));
            switch (result.op_code) {
                case 1:
                    this.gameStarted = true;
                    this.setPlayerTurn(data)
                    break;
                case 2:
                    console.log(result.data)
                    this.updateBoard(data.board)
                    this.updatePlayerTurn()
                    break;
                case 3:
                    this.endGame(data)
                    break;
            }
        };
    }
//...

nakama.js: data needs to be converted to String before passing to server

nakama.js (original)

//...
    async makeMove(index) {
        var data = { "position": index };
        await this.socket.sendMatchState(this.matchID, 4, data);
        console.log("Match data sent")
    }
//...

nakama.js (revised)

//...
    async makeMove(index) {
        var data = { "position": index };
        var dataStr = JSON.stringify(data)
        await this.socket.sendMatchState(this.matchID, 4, dataStr);
        console.log("Match data sent")
    }
//...

:tv: Media:

2

Thanks @raghu-ma , we’ll have a look and update the tutorial accordingly :+1:

1 Like