如何实现PHP比分板点击加减后无需刷新页面实时更新比分

实现方案总览 #

根据你是否需要多端同步比分，有两类实现路径： #

1. 仅当前操作端即时更新（无需同步给其他在线用户） #

该场景实现成本最低，不需要改动太多现有逻辑：

• 给+、-按钮绑定JS点击事件，触发时先修改本地存储的比分变量
• 直接通过DOM操作更新页面上的比分展示节点，无需等待后端响应
• 异步发送请求到PHP后端，把最新比分存入数据库即可，请求过程不阻塞页面渲染
  前端示例代码：

// 假设比分展示节点ID为score，加按钮ID为addBtn，减按钮ID为minusBtn
const scoreEl = document.getElementById('score');
const addBtn = document.getElementById('addBtn');
const minusBtn = document.getElementById('minusBtn');
let currentScore = Number(scoreEl.textContent);

// 加分按钮逻辑
addBtn.addEventListener('click', () => {
  currentScore += 1;
  // 直接更新页面展示
  scoreEl.textContent = currentScore;
  // 异步提交到后端存储
  fetch('/save_score.php', {
    method: 'POST',
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    body: `score=${currentScore}`
  });
});
// 减按钮逻辑和上述逻辑一致，仅修改运算规则即可

后端save_score.php只需要接收参数存入数据库，返回操作状态即可，无需返回完整页面。 #

2. 多端全量同步更新（所有打开页面的用户都能实时看到比分变化） #

如果需要多个用户端同步比分，可根据并发量选择以下三种方案：

2.1 短轮询（实现最简单，适合低并发场景）

• 前端设置定时器，每隔1-3秒发送异步请求到PHP接口拉取最新比分
• 对比拉取到的比分和当前页面展示的比分，不一致则更新DOM
  前端示例代码：

// 每隔2秒拉取一次最新比分
setInterval(async () => {
  const res = await fetch('/get_latest_score.php');
  const latestScore = await res.text();
  if (latestScore != scoreEl.textContent) {
    scoreEl.textContent = latestScore;
    currentScore = Number(latestScore);
  }
}, 2000);

后端get_latest_score.php只需查询数据库返回最新比分的纯文本即可。

2.2 长轮询（性能优于短轮询）

PHP接口收到请求后，如果当前比分没有更新就挂起请求不返回，等待比分更新或者请求超时后再返回结果，前端收到返回后立刻发起下一次请求，大幅减少无效请求次数。

2.3 WebSocket（性能最好，适合高并发场景）

并发量较高的场景可以使用WebSocket方案，PHP侧可安装Swoole或者Workerman扩展搭建WebSocket服务，所有打开比分板的用户都和服务端建立长连接，当有用户修改比分后，服务端主动把最新比分推送给所有在线客户端，立刻同步更新页面。

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