全体像を把握していなくても、いくつかのDBに接続された2つのWebサービスを構築することを考えています(ほとんどの場合)。
1つ目は、一部のユーザーが実行したアクション(クリック座標、時間、userIDなど)に関連するいくつかのパラメーターを受け入れ、それらをDBに保存し、ステータスの詳細(成功、失敗など)で応答します。
他のAPIはパラメーターとして時間を受け入れ、その時間以降に発生したすべてのアクティビティを(JSONまたはXML形式で)返します(チャットプログラムのように...最後に更新してからのメッセージは次のとおりです)...または、ゲームの構成に応じて、CUMULATIVE状態...たとえば、ゲームがタイルを赤から青に反転する2つのチームで構成されている場合、この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');
?>
これを2台のマシンで開くと、一方のマシンでボールを動かすことができ、もう一方のマシンで更新すると、最新の位置が表示されます(その逆も同様です)。