没有分配功能的 Web Sockets 对象

Posted 2023-02-16

【中文标题】没有分配功能的 Web Sockets 对象

【英文标题】：Web Sockets Objects not having assigned functions

【发布时间】：2020-07-15 15:49:46

【问题描述】：

我正在使用带有 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 不是函数”

关于什么是错的以及如何解决它的任何想法？如果需要，我有服务器代码。

【问题讨论】：

这能回答你的问题吗？ Socket.io how to send JavaScript object

我的猜测是。 emit() 在后台使用JSON.stringify，因此一旦解析回来，您在单元实例中拥有的任何函数都不会被保留。也许考虑在你的 Cell 类上创建一个.fromData() 方法

@BENARDPatrick 我不这么认为，因为我已经在我的服务器代码中使用了 socket.broadcast.emit()...

@NickParsons 我对 .fromData() 一点也不熟悉，请您详细说明一下吗？

【参考方案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();        
);

【讨论】：

这需要两个 Cell 构造函数吗？一个用于服务器，一个用于客户端，您必须在两个地方维护？

@NickParsons - 它需要在客户端和服务器上都有 Cell 代码，但您可以使用适当的模块和代码布局共享一个实现。

@jfriend00 如果您查看我的原始帖子，我已经为您的函数（数据）更改了我的“测试”函数......我测试了它，我不再有错误但我仍然没看到细胞？我还没有编辑服务器代码，我是不是要在那里改变一些东西？

@user769321 - 我们必须看到更多的实现才能知道可能还缺少什么。

@jfriend00 你介意我编辑我的问题并添加不同服务器、草图和单元文件的屏幕截图吗？