Javascript - 带有 WebSockets 的 requestAnimationFrame - 性能问题答案

【问题标题】：Javascript - requestAnimationFrame with WebSockets - performance issuesJavascript - 带有 WebSockets 的 requestAnimationFrame - 性能问题
【发布时间】：2018-10-04 05:55:22
【问题描述】：

我计划为业余爱好编写一个实时“游戏”。我的想法是使用 websockets 和画布，我想模仿和 slimher.io 相同的行为，所以我想要一个功能，当用户移动时，其他用户可以同时看到他的移动。

首先想到我的想法是使用 WebSockets 和 requestAnimationFrame，这样我就可以通过套接字从客户端向服务器发出每个帧的事件，并将有关我的坐标的信息提供给其他套接字。

我的问题是我担心这不会有效并且会因为事件而杀死我的服务器。

那么这是在浏览器游戏中设计实时通信的好方法还是有更好的方法来做到这一点？

【问题讨论】：

不确定这是否是您要查找的内容。但是，如果 RAF 至少可以达到 ~60fps，您仍然不希望或不需要每秒执行 60 次 websocket 操作。我假设您只需要每个播放器的侦听器和广播器，并执行必要的操作。在上述移动的情况下，您可能可以每 n 秒一次以块的形式发送玩家移动数据，并为其他玩家制作动画。
当然可以，但是举个例子，2个用户不停地移动，所以它应该通过websocket每秒执行60次操作
取决于幕后的运动逻辑。但是，也可以将这些帧数据以块的形式发送（例如每秒一次），并将它们存储为一系列要播放的动画。但是，最终会有几秒钟的中断，我认为这在大多数 RTC 中可能是不可避免的。

标签： javascript websocket

【解决方案1】：

你当然可以使用 WebSockets，这里有一些很棒的资源：@987654321@

您应该考虑比只为每个动画帧执行一次更慢的滴答速度。对每个视频帧进行状态更新，这可能每秒发生多达 60 次，这可能是矫枉过正。为了比较，守望先锋是一款节奏适中的游戏，每 20 秒就会进行一次。

要独立进行状态更新，例如在socket.io，您可以使用setInterval

var dataTickRate = 30;

setInterval(function() {
  socket.emit('playerState', playerState);
}, 1000 / dataTickRate);

【讨论】：