Nest.js/Vue中使用requestAnimationFrame报未定义错误求助

数据老陈

2026-8-24

解决requestAnimationFrame未定义的问题

问题原因

requestAnimationFrame是浏览器专属的API，Node.js（服务器端）环境里没有这个全局函数。你现在的报错说明调用了requestAnimationFrame的代码跑到服务器端执行了——结合你用socket.io做多人游戏的场景，大概率是把客户端的渲染逻辑（比如moveBall函数）不小心写到了服务器代码里，或是服务器端的socket事件处理里触发了moveBall。

修复步骤

拆分客户端与服务器端代码
游戏的渲染逻辑（Canvas绘制、moveBall函数、requestAnimationFrame调用）必须放在浏览器端的JS文件里，服务器端只负责处理socket通信：比如接收客户端的位置数据、转发给其他玩家、同步游戏状态。

举个示例：

服务器端代码只做事件转发：

socket.on("gameFunctions", data => {
  // 将事件广播给所有玩家
  io.emit("clientGameFunctions", data);
});

客户端监听广播事件后执行渲染逻辑：

socket.on("clientGameFunctions", data => {
  switch(data) {
    case "resetBall":
      ballPosition.y = 250;
      ballPosition.x = 250;
      SocketIo.emit("rectPosition", rectPosition, ballPosition);
      console.log("RESET BALL EVENT TRIGGERED");
      break;
    case "startGame":
      moveBall(); // 此处在浏览器端执行，存在requestAnimationFrame
      SocketIo.emit("rectPosition", rectPosition, ballPosition);
      console.log("START GAME EVENT TRIGGERED");
      break;
  }
});

兼容旧浏览器（可选）
如果是在旧版浏览器中报错，可以在客户端代码最前面加个兼容垫片：

if (!window.requestAnimationFrame) {
  window.requestAnimationFrame = window.webkitRequestAnimationFrame ||
                                 window.mozRequestAnimationFrame ||
                                 function(callback) {
                                   return setTimeout(callback, 1000/60);
                                 };
}