1

一个带有模块 socket.io 和 express 的 node.js 项目。

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

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

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

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

动画功能在客户端，它在接收到来自服务器的初始化数据时启动。

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

那么如何缩小这个差距呢？

非常感谢。

4

3 回答 3

0

您需要航位推算技术来模拟客户端状态尽可能接近服务器上的真实状态。
您可能会定期向客户端发送状态包，例如每 200 毫秒（每秒 5 次），并在客户端从该数据推断。

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

于 2013-06-27T10:59:50.377 回答
0

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

于 2013-06-26T03:10:54.770 回答
0

这是一个简单的公式和例程，适用于 socket.io、php 或其他任何东西。我用它在直播前 10 秒淡入直播视频流。鉴于固有的滞后和设备性能模式以及错误的时区，您只能期望获得大约 30 毫秒的向前或向后精度，但对于大多数观察者来说，这一切都是“同时”发生的。

这是一个比模拟客户端（你）晚两分钟的服务器的模拟，服务器希望客户端在 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  
  });

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

于 2013-06-26T07:44:17.743 回答