Question

该应用程序旨在使用Web套接字将绘图从客户端画布传输到管理画布，这是最顺利的。在每次mousemove事件中，客户端画布都被压缩为png并通过websocket发送到服务器，最终到达管理窗口，在那里将图像绘制到管理画布中。

实际上，代码在管理窗口中有点滞后。似乎瓶颈是ctx.drawImage()，但我不确定。

我想知道是否有办法首先找到瓶颈，然后用debounce或网络工作者或其他方式优化传输。

客户端：

<canvas id="clientCanvas" style="position: absolute; top: 0px; left: 0px;" width="1563" height="528">

function onMouseMove(e) {
    var canvas = document.getElementById('clientCanvas');
    var ctx = canvas.getContext("2d");
    var imageData = canvas.toDataURL("image/png");

    socket.emit('SS_onMouseMove', {imageData: imageData});
};

管理员方：

<canvas id="adminCanvas" style="position: absolute; top: 0px; left: 0px;" width="1563" height="528">

var canvas = document.getElementById("adminCanvas");
var ctx = canvas.getContext("2d");
var image = new Image();
image.onload = function() {
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   ctx.drawImage(image, 0, 0);
};

socket.on("SS_onMouseMove", function(response) { onClientMouseMove(response); });

function onClientMouseMove(response) {
    image.src = response.imageData;
}

Answer 1

问题是你每秒都会多次传递整个图像，这对于生成图像的客户端来说是一个沉重的负载，而且每秒传输大约2 mb（图像为dataUrl）的连接是30到40次。 / p>

解决方案是：

建立连接后，发送原始图像
当客户端上发生鼠标事件时，仅将这些鼠标事件发送给管理员，并使用客户端上使用的相同功能在管理员上呈现鼠标事件的更改。

这将显着减少连接上的负载，并且在客户端上需要较少的处理，因为它不必生成png - ＆gt; dataUrl每秒多次

使用Web套接字将画布内容从客户端传递给管理员

1 个答案: