开发多人Tic Tac Toe前端：如何实现无高CPU占用的服务器持续轮询？

你的代码目前没有设置轮询间隔，大概率是在循环或组件渲染周期里反复调用grabBoard，导致无间断发起请求，直接拉满CPU占用。以下是几种靠谱的优化方案：

1. 带固定间隔的可控轮询 #

给轮询加上固定时间间隔，同时在组件卸载时清除定时器，避免内存泄漏。示例代码（React环境）：

useEffect(() => {
  if (!boardId) return;
  
  // 初始化先拉一次数据
  const fetchInitial = async () => {
    setIsLoaded(false);
    setBoardData(await getBoard(boardId));
    setIsLoaded(true);
  };
  fetchInitial();

  // 设置轮询定时器
  const intervalId = setInterval(async () => {
    const latestData = await getBoard(boardId);
    // 只有数据变化时才更新，避免不必要的渲染
    if (JSON.stringify(latestData) !== JSON.stringify(boardData)) {
      setBoardData(latestData);
    }
  }, 1500); // 1.5秒间隔，可根据需求调整

  // 组件卸载时清除定时器
  return () => clearInterval(intervalId);
}, [boardId]);

注意：用JSON.stringify对比数据只是简单实现，实际项目建议用更高效的深比较方法，比如lodash的_.isEqual

2. 指数退避轮询（应对请求失败场景） #

如果遇到服务器响应慢或请求失败，逐步延长轮询间隔，避免频繁重试浪费资源：

useEffect(() => {
  if (!boardId) return;

  let timeoutId;
  let currentDelay = 1000; // 初始1秒
  const maxDelay = 10000; // 最大间隔10秒

  const fetchBoard = async () => {
    try {
      const latestData = await getBoard(boardId);
      if (JSON.stringify(latestData) !== JSON.stringify(boardData)) {
        setBoardData(latestData);
        currentDelay = 1000; // 请求成功重置间隔
      }
    } catch (err) {
      // 请求失败，间隔翻倍
      currentDelay = Math.min(currentDelay * 2, maxDelay);
    } finally {
      // 安排下一次请求
      timeoutId = setTimeout(fetchBoard, currentDelay);
    }
  };

  fetchBoard();

  return () => clearTimeout(timeoutId);
}, [boardId]);

3. WebSocket 替代轮询（最优方案） #

轮询本质是前端主动"拉"数据，WebSocket是服务器主动"推"数据，实时性更强，也能彻底解决CPU占用问题。前端示例：

useEffect(() => {
  if (!boardId) return;

  // 建立WebSocket连接，传递boardId
  const socket = new WebSocket(`ws://your-server-url/board/${boardId}`);

  // 接收服务器推送的棋盘数据
  socket.onmessage = (event) => {
    const latestData = JSON.parse(event.data);
    setBoardData(latestData);
    setIsLoaded(true);
  };

  // 连接关闭时处理
  socket.onclose = () => {
    // 可选：添加断线重连逻辑
    console.log("WebSocket连接关闭，尝试重连...");
  };

  // 组件卸载时关闭连接
  return () => socket.close();
}, [boardId]);

服务器端需要实现WebSocket服务，当棋盘数据变化时主动推送给所有连接的客户端，这样前端不需要主动轮询，CPU占用会大幅降低。

内容的提问来源于stack exchange，提问作者user19394369