使用 socket.io 在其他客户端计算机中显示鼠标指针移动

Question

我正在使用 socket.io 引擎来跟踪浏览器中的鼠标指针移动并将其发送到多个 Web 浏览器。在这里，我得到鼠标指针的 x、y 坐标，然后使用 socket.io 引擎发送它。

socket.emit('mouse_position', {mx : x, my : y});

之后我通过以下代码从应用程序中获取相关数据

socket.on('mouse_position', function(data) {
    socket.broadcast.emit('mouse_position_update', data);
});

我使用一个raphael对象在其他浏览器中显示鼠标指针，并使用animate函数根据父鼠标指针的移动显示鼠标指针。

var paper = new Raphael(canvas, 200, 200);
var cur = paper.circle(0, 0, 3);
cur.animate({
    cx : data.mx,
    cy : data.my
}, 1, 'linear');

此代码中的问题是，如果我有很多用户 (>100) 登录到这个系统，将使用大量带宽并且系统可能会崩溃。谁能告诉我有没有更好的方法来使用 socket.io 引擎来实现这个系统，或者有什么算法可以用来解决带宽问题。 任何形式的帮助对我来说都是很大的帮助。

Answer 1

您应该减少向您发送鼠标坐标的时间。以您的方式更改鼠标的每个像素，发送您的数据。 （将 console.log(1) 放入回调中并移动鼠标几秒钟）。

您可以通过以下方式减少向您发送数据的时间：

var prevMouseX, prevMouseY;
var intervalID = window.setInterval(function(){
   ... you get your mouse coordinates

   if (prevMouseX !== x || !prevMouseY !== y) {
      socket.emit('mouse_position', {mx : x, my : y});
   }
}, 500);

这样，您将每 0.5 秒发送一次鼠标坐标，并且仅在它们发生变化时发送。