NodeJS 中 requestAnimationFrame() 的服务器端实现答案

【问题标题】：Server Side Implementation of requestAnimationFrame() in NodeJSNodeJS 中 requestAnimationFrame() 的服务器端实现
【发布时间】：2015-08-07 04:52:57
【问题描述】：

我对广泛使用的requestAnimationFrame() 函数有一些疑问。最近我在多人游戏中遇到了一些实现，他们在客户端而不是服务器端使用它。

这样做有什么好处吗？
您能否参考 NodeJS 中的任何“最佳实践”服务器端实现？

更新

我对动画和游戏循环有点困惑 - 我正在寻找的是 NodeJS 中的实现 => 例如 setInterval。

示例 - 客户端实现

(function () {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame =
            window[vendors[x] + 'CancelAnimationFrame'] ||
            window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function (callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function () {
                callback(currTime + timeToCall);
            }, timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function (id) {
            clearTimeout(id);
        };
}());

【问题讨论】：

“动画帧”在服务器应用程序中意味着什么？
我的错误，我的意思是游戏循环而不是动画循环本身 - 我应该更清楚。我一直在寻找的是 NodeJS 中服务器端游戏循环的实现。

标签： javascript node.js client server

【解决方案1】：

这样做有什么好处吗？

在客户端 - 有。虽然setTimeout 和它的朋友在计时器队列中运行 - requestAnimationFrame 同步到浏览器的页面呈现（绘制它）所以当你使用它时没有抖动，因为你告诉它要绘制什么并且浏览器绘制是同步。

通常游戏有两个循环——渲染循环（绘制什么）和游戏循环（事物在哪里的逻辑）。第一个在requestAnimationFrame 中，另一个在setTimeout 中 - 两者都必须运行得非常快。

这里是 Paul Irish 的 a reference on requestAnimationFrame。

您可以参考我在 NodeJS 中的任何“最佳实践”服务器端实现吗？

由于服务器不渲染任何图像 - 在服务器中填充 requestAnimationFrame 毫无意义。您将在 Node/io.js 中使用 setImmediate 在客户端中使用 requestAnimationFrame。

简单地说 - 添加 requestAnimationFrame 是为了解决服务器中不存在的问题（图形数据的无抖动渲染）。

【讨论】：

我确实需要在 NodeJS 中为物联网设备渲染一些东西。
@stevemao 您仍然不会在 Node 中渲染它 - 您将使用 IoT 设备为您提供的任何绑定来绘制它，并且可能会提供请求动画帧。你也是 stevemao 所以你会知道这让我想知道你想表达什么观点？该节点不只在服务器上运行？
我正在尝试使用 Arduino 为我的 LED 灯设置动画。 github.com/stevemao/neoclock-js看johnny-5的源码，好像在用setImmediate
> 您将使用物联网设备为您提供的用于绘制事物的任何绑定渲染它，并且可能会提供 requestAnimationFrame。如果 nodejs 正在为设备供电怎么办？假设它真的没有大脑......
感谢本杰明，您的解释很有道理。不幸的是，npm 上似乎还没有库可以做彩色动画:(

【解决方案2】：

function requestAnimationFrame(f){
  setImmediate(()=>f(Date.now()))
}

【讨论】：

嗨！请添加一些关于这如何解决 OP 问题的解释。通常不鼓励在 SO 上仅发布代码答案，因为它们无助于 OP 或未来的访问者理解答案。谢谢！ -- 来自评论。

【解决方案3】：

if(!window.requestAnimationFrame) 
    window.requestAnimationFrame = window.setImmediate

【讨论】：