Web套接字对象没有分配函数

Question

我使用的是javascript(p5.js(和node.js w/express和socket.io.

这是我当前代码的一部分，我认为问题在于：

for (var i = 0; i < 3; i ++){
for (var j = 0; j < 3; j ++){
for (var k = 0; k < 3; k ++){
for (var l = 0; l < 3; l ++){
socket.emit('grid', grid[i][j][k][l]);
}
}
} 
}
socket.on('grid', test);
}
function test(gridElement){
gridElement.show();
console.log('showing');
}

这个想法是有一个4维的"网格"，网格中的每个元素都是一个CELL。每个单元格都有以下相关属性：

function Cell(x, y, w, val){
this.x = x;
this.y = y;
this.w = w;
this.revealed = true;
this.val = round(val);

}

Cell.prototype.show = function(){
rect(this.x, this.y, this.w, this.w);
text(this.val, this.x + this.w/2, this.y + this.w/2);
}

正如它所说，每个单元格都有一个"显示"功能来显示单元格。这通常是有效的。

问题是，在我从服务器发出元素并尝试运行之后：

gridElement.show();

我收到一个错误，说"gridElement.show不是函数">

有什么问题以及如何解决的想法吗？如果需要，我有服务器代码。

Answer 1

您可以在客户端和服务器之间发送单元格数据，但当它到达另一端时，它将是一个普通对象，而不是cell对象。socket.io使用JSON作为数据传输格式，JSON不保留对象的类型，只保留对象的数据。

你必须编写代码才能将它变成一个带有方法的Cell对象。通常，你可以通过为对象创建一个构造函数来实现这一点，该构造函数接受一个普通对象作为参数，它从该普通对象中获取数据，然后当你从另一端接收到数据时，你创建一个新的Cell物体，并将你刚刚收到的数据传递给它：

function Cell(data) {
this.x = data.x;
this.y = data.y;
this.w = data.w;
this.val = data.val;
}
socket.on('grid', function(data) {
// data here is a plain object
let gridElement = new Cell(data);
gridElement.show();        
});

或者，使用构造函数，您的问题已经显示：

socket.on('grid', function(data) {
// data here is a plain object
let gridElement = new Cell(data.x, data.y, data.h, data.val);
gridElement.show();        
});