没有分配功能的 Web Sockets 对象

Question

我正在使用带有 express 和 socket.io 的 javascript (p5.js) 和 node.js。

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

  
  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

您可以在客户端和服务器之间发送单元格数据，但是当它到达另一端时，它将是一个普通对象而不是一个单元格对象。 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();        
});