1

我有这个类游戏。

    class Game {
      constructor(player) {
        this.player1 = player;
      }

      getHost() {
        // player has property nickname
        return `Host: ${this.player1.nickname}`;
      }
    }

我相信我遇到的问题是 getHost() 从它的上下文中变得不受约束，但是我不确定如何解决它。我正在学习 JS，我对这种语言的this. 我也是第一次使用socket.io，所以这给我增加了很多困惑。
我的服务器脚本（服务器工作，只显示相关部分）：

io.on('connection', (socket) => {
    // passed defined player
    socket.on('host game', (player) => { 
        const game = new Game(player);
        console.log(game.getHost()); // still works here
        io.sockets.emit("game created", game);
    });

});

客户：

socket.on("game created", (game) => {
    const gameElement = document.createElement("li");
    gameElement.innerHTML = game.getHost(); // ERROR
    games.appendChild(gameElement);
});

在上面的标记线上，我得到Uncaught TypeError: game.getHost is not a function.

抱歉，如果 socket.io 函数让它更加混乱，基本上只是当游戏从服务器传递到客户端时，它不再起作用了。
谢谢您的帮助

4

1 回答 1

1

问题是 socketio 正在为您序列化对象。由于 websocket 仍然只是 HTTP，因此您无法通过它发送实际的 JS 对象。socketio 使用JSON.stringify(game)幕后处理将您的对象序列化为 JSON。它还会将该 JSON 字符串转换回客户端上的对象。

不幸的是，当您这样做时，您会丢失方法。例如：

let game = new Game({nickname: 'Bob Vance'});
game = JSON.stringify(game);
console.log(game) // will output {"player1":{"nickname":"Bob Vance"}}

您应该{"player1":{"nickname":"Bob Vance"}}在控制台中看到，因为序列化为 JSON 会删除方法但保留属性。这只是正常的 JavaScript 行为。

因此，要恢复这些方法，您必须在客户端创建一个新的游戏实例，然后使用它Object.assign()来构建对象备份。

例子

let serializedGame= JSON.parse(game);
let newGameInstance = new Game({nickname: game.nickname});
Object.assign(newGameInstance, serializedGame);

现在你应该可以打电话了newGameInstance.getHost()

于 2020-05-11T21:36:50.747 回答