Socket.io - 发出 JS 对象导致最大递归错误，然后根本不发送

Question

我有一个存储其他两个对象的对象。自上次加载页面以来第一次将此特定对象发送到服务器时，我收到此错误：

Uncaught RangeError: Maximum call stack size exceeded
at Function.[Symbol.hasInstance] (<anonymous>)
at r (socket.io.js:1)
at r (socket.io.js:1)
at r (socket.io.js:1)
at r (socket.io.js:1)
at r (socket.io.js:1)
at r (socket.io.js:1)
at r (socket.io.js:1)
at r (socket.io.js:1)
at r (socket.io.js:1)

我在谷歌上搜索了可能的答案，并尝试发送其他不太大的对象，效果很好。

此外，一旦抛出错误，再次发送对象，发送对象，但没有收到。我不知道如何处理这个问题。

我试图发送的对象是：

data {
    p1: {
        name: "Player 1",
        obj: {
            angle:0,
            dir:0,
            health:100,
            name:"Player 1",
            pos:p5.Vector {p5: p5, x: 0, y: 0, z: 0},
            projectiles:[],
            show: {
                noStroke();
                fill(255);

                for (let i in this.projectiles) { this.projectiles[i].show() }

                push();
                translate(this.pos.x, this.pos.y);
                rotate(PI - this.angle);
                imageMode(CENTER);
                image(pgraphic, 0, 0, this.health / 2, this.health / 2);
                pop();
            }
            update: function () {
                if (this.useControls) {
                if (keyIsDown(68))
                this.angle -= 0.125;
                else if (keyIsDown(65))
                this.angle += 0.125;

                if (keyIsDown(87)) {
                this.dir = 1;
                } else if (keyIsDown(83)) {
                this.dir = -1;
                } else if (!keyIsDown(87) && !keyIsDown(83))
                this.dir = 0;

                if (keyIsDown(32))
                this.shoot()

                this.pos.x += ((this.health / 10) * sin(this.angle)) * this.dir;
                this.pos.y += ((this.health / 10) * cos(this.angle)) * this.dir;

                this.pos.x = constrain(this.pos.x, 0 - width / 2, width / 2);
                this.pos.y = constrain(this.pos.y, 0 - height / 2, height / 2);

                for (let i in this.projectiles) {
                this.projectiles[i].update()

                if (this.projectiles[i].pos.x <= 0 - (width / 2) || 
                this.projectiles[i].pos.x >= (width / 2) || 
                this.projectiles[i].pos.y <= 0 - ((height / 2) * 1.5) || 
                this.projectiles[i].pos.y >= (height / 2)) {
                this.projectiles.splice(i, 1)
                }}}
            }
            useControls:true,
            vel:p5.Vector {p5: p5, x: 0, y: 0, z: 0},
        }
    },
    p2: {
        name: "Player 2",
        obj: {
            angle:0,
            dir:0,
            health:100,
            name:"Player 2",
            pos:p5.Vector {p5: p5, x: 0, y: 0, z: 0},
            projectiles:[],
            show: {
                noStroke();
                fill(255);

                for (let i in this.projectiles) { this.projectiles[i].show() }

                push();
                translate(this.pos.x, this.pos.y);
                rotate(PI - this.angle);
                imageMode(CENTER);
                image(pgraphic, 0, 0, this.health / 2, this.health / 2);
                pop();
            }
            update: function () {
                if (this.useControls) {
                if (keyIsDown(68))
                this.angle -= 0.125;
                else if (keyIsDown(65))
                this.angle += 0.125;

                if (keyIsDown(87)) {
                this.dir = 1;
                } else if (keyIsDown(83)) {
                this.dir = -1;
                } else if (!keyIsDown(87) && !keyIsDown(83))
                this.dir = 0;

                if (keyIsDown(32))
                this.shoot()

                this.pos.x += ((this.health / 10) * sin(this.angle)) * this.dir;
                this.pos.y += ((this.health / 10) * cos(this.angle)) * this.dir;

                this.pos.x = constrain(this.pos.x, 0 - width / 2, width / 2);
                this.pos.y = constrain(this.pos.y, 0 - height / 2, height / 2);

                for (let i in this.projectiles) {
                this.projectiles[i].update()

                if (this.projectiles[i].pos.x <= 0 - (width / 2) || 
                this.projectiles[i].pos.x >= (width / 2) || 
                this.projectiles[i].pos.y <= 0 - ((height / 2) * 1.5) || 
                this.projectiles[i].pos.y >= (height / 2)) {
                this.projectiles.splice(i, 1)
                }}}
            }
            useControls:true,
            vel:p5.Vector {p5: p5, x: 0, y: 0, z: 0},
        }
    }
}

这只是我尝试发送的一小部分，但是，这是导致错误的部分。

GitHub 上的完整代码

Answer 1

我想出了问题所在：此错误仅在发送类实例时发生。通过从一个实例中提取数据并通过标准的 JavaScript 对象字面量发送它，然后将数据重新应用到一个单独的实例就可以了。