如果没有全貌，我想我会构建两个 Web 服务，连接到某个数据库（很可能）。
第一个将接受一些与某些用户执行的操作相关的参数（单击坐标、时间、用户 ID 等），将这些参数保存到数据库中，并以一些状态详细信息（成功、失败等）进行响应。
另一个 API 将接受时间作为参数，并返回（以 JSON 或 XML 格式）自那时以来发生的所有活动（如在聊天程序中......这是自上次更新以来的消息） ...或者，取决于游戏构造，累积状态...例如，如果游戏由两个团队组成，将一块瓷砖从红色翻转到蓝色，则此 API 将返回瓷砖的当前状态。然后，在客户端代码中，我会处理响应以向该用户反映当前的游戏状态。
这是一些示例代码。这不会按原样自动更新，您可以设置超时以定期轮询新数据，或设置某种长轮询 (wiki)。哦，因为这是教育性的，所以没有输入验证（除了长度）：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Game</title>
<style>
html, body {margin:0;padding:0;height:100%;width:100%;}
#board {width:298px;height:298px;border:thin solid #000;position:relative;}
#puck {width:58px; height:58px; display:block; background-image:url('al.png'); background-size:contain; position:absolute; top:120px; left:120px;}
</style>
</head>
<body onload="update();">
<div id="board">
<div id="puck"></div>
</div>
<button onclick="update();">Update</button>
</body>
<script>
var x,y;
document.getElementById('board').addEventListener('click',move);
function move(e){
a1=((window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP"));
x=(e.clientX-29);
y=(e.clientY-29);
a1.abort();
a1.onreadystatechange=function()
{
if (a1.readyState==4&&a1.status==200){
document.getElementById('puck').style.left = x+'px';
document.getElementById('puck').style.top= y+'px';
}
}
params='x='+x+'&y='+y;
a1.open("POST","al_accept.php",true);
a1.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
a1.setRequestHeader("Content-length", params.length);
a1.setRequestHeader("Connection", "close");
a1.send(params);
}
function update(){
a2=((window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP"));
a2.onreadystatechange=function()
{
if (a2.readyState==4&&a2.status==200){
res=JSON.parse(a2.responseText)
x=res.x;
y=res.y;
document.getElementById('puck').style.left = x+'px';
document.getElementById('puck').style.top= y+'px';
}
}
params='x='+x+'&y='+y;
a2.open("POST","al_respond.php",true);
a2.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
a2.setRequestHeader("Content-length", params.length);
a2.setRequestHeader("Connection", "close");
a2.send(params);
}
</script>
</html>
您会看到 move 函数将数据发送到 al_accept.php 存储它（这里只是写入文件，因为每次移动都会覆盖之前的任何内容）并且 update 函数调用 al_respond.php 到检索最新数据。
al_accept.php：
<?php
$x=(strlen($_REQUEST['x'])>3)?substr($_REQUEST['x'],0,3):$_REQUEST['x'];
$y=(strlen($_REQUEST['y'])>3)?substr($_REQUEST['y'],0,3):$_REQUEST['y'];
$pos=fopen('al.txt','w');
$str='{"x":'.$x.',"y":'.$y.'}';
fwrite($pos,$str);
fclose($pos);
?>
al_respond.php：
<?php
header('content-type:application/json');
echo file_get_contents('al.txt');
?>
如果你在两台机器上打开它，你可以在一台机器上移动球，当你在另一台机器上更新时，你会看到最新的位置（反之亦然）。