如何减少客户端在socket.io中接收数据之间的时间差

Question

一个node.js项目，包含socket.io和express模块。

现在每个客户端都有一个画布，在画布上运行动画。当服务器发出initiate参数时，动画就可以开始了。

现在的问题是，当客户端的动画开始时，客户端之间存在时间间隔。动画运行的时间越长，差距就越明显。人物的位置就会变得非常不同。但我希望每个人都能在屏幕上看到同样的东西

以下是服务器传递数据的方式：

   socket.broadcast.emit('init', initData);
   socket.emit('init', initData);

动画功能在客户端中，它在从服务器接收到启动数据时启动。

我不确定这是否是因为每个客户端接收这些数据的时间不同。

那么，如何缩小这种差距呢？

非常感谢。

Answer 1

我认为您应该尝试以下操作：确保（使用onLoad事件并在带有socket.io的服务器上收集该事件）每个客户端都下载了动画，然后发送信号启动它。

Answer 2

这里有一个简单的公式和例程，可以与socket.io、php或任何真正的东西一起使用。我用它在直播前10秒淡出视频流。考虑到固有的滞后和设备性能模式，以及错误的时区，你只能期望向前或向后获得约30ms的精度，但对大多数观察者来说，这一切都是"同时"发生的。

这是一个服务器的模拟，它比模拟的客户端（你）晚了大约两分钟，服务器希望客户端在1.2秒内显示一个弹出窗口：

//the first two vars should come from the server:
var serverWant=+new Date() - 123456 + 1200; // what server time is the event ?
var serverTime=+new Date() - 123456; // what server  time is now ?

//the rest happens in your normal event using available info:
var clientTime=+new Date();       // what client time is now ?
var off= clientTime - serverTime; // how far off is the client from the server?
var clientWant= serverWant + off; // what client time is the event ?
var waitFor = clientWant -  +new Date(); // how many millis to time out for until event ?
setTimeout(function(){ alert( 'SNAP!' );}, waitFor);

这有多可靠？尝试将"-123456"更改为"+12345"，看看弹出窗口是否仍等待1.2秒才能启动，尽管在计算中没有使用Math.abs。。。

在socket.io中，您可以将服务器时间和计划时间发送到客户端，以便在预事件中进行计算：

 socket.broadcast.emit('pre-init', { 
     serverTime: +new Date(), 
     serverWant: +new Date() + 1200  
  });

然后根据需要，使用这些值和上面的数学运算将动画安排在几分钟或几个小时内，按需（您的）到一瞬间。

Answer 3

您需要Dead Reckoning技术，以便在服务器上模拟尽可能接近真实状态的客户端状态
您可以定期向客户端发送状态包，例如每200ms（每秒5次），并在客户端根据这些数据进行推断。

除此之外，您还必须记住不同客户端的不同延迟。所以，若你们想保持相同的状态，通常有两种方法——插值（使用最后一次已知和数据之前的一次），或者外推法（使用最后已知并根据自己的延迟预测未来）
外推更适合实时交互式内容，但在纠错方面会有问题——当客户端进行错误预测时（对象突然停止，但基于延迟客户端预测它仍在移动）
插值会使所有事情都延迟并成为过去，但不会出现错误，因为没有预测。这样做的缺点是，在插值等于最慢延迟用户的时间之前需要等待。这意味着较慢的用户将迫使每个人也放慢速度。