如何更快地将大数组发送给客户端

Question

我现在正在编码 r/place 克隆，但在将存储的像素数据从服务器发送到连接的客户端时遇到问题。虽然它有效，但根据画布大小，需要花费太多时间。

对于 1000x1000 像素大小的画布，将整个画布发送到客户端只需要 0.8 秒，这还不错，但对于 3000x3000 像素大小的画布，最多需要 6 秒，这有点太长了。

现在我使用socket.io作为连接部分。我将服务器端的像素数据存储在数组内并将其发送到客户端，如下所示：

let canvasData = [];

//more code where i retrieve the canvasData from a txt file    

io.on('connection', (socket) => {
    socket.emit('initialCanvasData', canvasData); //this part here takes a long time
});

然后在客户端我是这样读的：

function drawInitialCanvas(canvasData) {
  const imageData = new ImageData(newCanvasWidth, newCanvasHeight);
  const data = new Uint8ClampedArray(imageData.data.buffer);

  let dataIndex = 0;
  for (let y = 0; y < newCanvasHeight; y++) {
    for (let x = 0; x < newCanvasWidth; x++) {
      const colorObj = canvasData[y][x];
      const color = colorObj.color;
      const rgbValues = color.match(/\d+/g);

      data[dataIndex++] = parseInt(rgbValues[0]);
      data[dataIndex++] = parseInt(rgbValues[1]);
      data[dataIndex++] = parseInt(rgbValues[2]);
      data[dataIndex++] = 255; // Alpha (255 means fully opaque)
    }
  }

  newContext.putImageData(imageData, 0, 0); // Draw pixel data onto new canvas context
  context.drawImage(newCanvas, newCanvasX, newCanvasY);
}

数组看起来像这样，根据画布大小可能会变得很长：

[[{"颜色":"rgb(255,255,255)","用户":null},{"颜色":"rgb(125,255,255)","用户":null},{"颜色":"rgb(255,125,255) )","user":null},{"color":"rgb(255,255,80)","user":null},...{"color":"rgb(125,125,255)","user":空}]]]

我基本上存储了RGB值，以及每个像素绘制该像素的用户的名字。

现在我想知道是否还有另一种更有效的方法，这样加载画布就不会花那么多时间了。

我已经尝试在服务器端将数组压缩为字符串，将其发送到客户端，然后解压缩，这将发送过程从 4 秒缩短到 0.4 秒，但压缩和解压缩总共需要 8 秒，甚至更长比我发送整个数组未压缩的情况要好。

也许有人有其他想法

Answer 1

首先，您不断向每个像素发送 user: null ，这应该会节省大量所需时间。

此外，您可以删除每个条目的一些冗余数据，例如“rgb”。

您可以发送如下对象：

{ “用户”：空， “像素”：[“255,255,255”，“125,255,255”，...] }

此外，您可以在服务器上对字符串进行 Base64 编码并在客户端上进行解码。

这一切都假设您的计时问题是由于网络延迟造成的。

此外，正则表达式非常慢，不必为每个像素运行正则表达式也应该有助于加快速度。

希望这有帮助