私は、学習プロジェクトとして、マルチユーザのJavaScriptベースの描画アプリケーションを作成しています。今、それは一つの方法です:transmitter.htmlの "トランスミッタ"クライアントは、HTML5キャンバス要素で描画するデータを送信します。receiver.htmlの "レシーバ"クライアントは、それを自分のキャンバスに複製します。PHP/AJAXマルチユーザアプリ - 何とかデータが失われています
トランスミッタは、mouseMoveイベントに応答して(previousX、previousY)と(currentX、currentY)の間に線を描くだけです。これらの2つの座標セットをAJAX経由でtransmitter.phpに送ります。受信者がAJAX経由でreceiver.phpを呼び出してそれらを収集するまで、彼らはセッション変数に座ります。少なくともそれはどのように動作すべきかです。
これはtransmitter.phpです:これはreceiver.phpある
<?php
session_start();
if (!isset($_SESSION['strokes'])) $_SESSION['strokes'] = '';
$_SESSION['strokes'] .= $_GET['px'] . "," . $_GET['py'] . "," . $_GET['x'] . "," . $_GET['y'] . ';';
?>
:私はセッションVARを使用していますなぜあなたは迷っている場合は
<?php
session_start();
echo($_SESSION['strokes']);
$_SESSION['strokes'] = "";
?>
それは最速だから、それはです他のスクリプトがアクセスできるような方法でデータを格納すると思います。私は代替のためのグーグルを試みたが、何も見つかりませんでした。より良い方法があれば、それについて聞いてみたいと思います。
とにかく、問題はすべてのデータがそれを通過しているわけではないということです。これは受信者のキャンバスに描かれた線の隙間によって明らかになる。私はまた、トランスミッタとレシーバのJavaScriptファイルに小さなカウンタを設定して、どれだけの "ストローク"が送受信されているかを正確に確認しました。送信されたデータより常に受信されるデータ量が少なくなるため、データがサーバー側で失われているようです。あなたが見るために必要以上のコードを与えるリスクでは、これはサーバーにデータを送信する(nは、私が言及したカウンタである)transmitter.jsのコードである
:
function mouseMoveHandler(e)
{
var x = e.pageX - canvasX;
var y = e.pageY - canvasY;
if (mouseDown)
{
canvas.moveTo(prevX, prevY);
canvas.lineTo(x, y);
canvas.stroke();
sendToServer(prevX, prevY, x, y);
n++;
}
prevX = x;
prevY = y;
}
これは戻ってそれを取得し、それを描く受信機のコードである(再び、nはカウンタである):
function responseHandler()
{
if (xhr.readyState == 4)
{
var strokes = xhr.responseText.split(';');
n += strokes.length - 1;
for (var i = 0; i < strokes.length - 1; i++)
{
stroke = strokes[i].split(',');
canvas.moveTo(stroke[0], stroke[1]);
canvas.lineTo(stroke[2], stroke[3]);
canvas.stroke();
}
setTimeout("contactServer()", 500);
}
}
ありがとう、NodeJSを調べます。あなたが指摘したセッションの問題は関連しているとは思えません。両方のクライアントが同じSIDを使用しています。 SIDはAJAXコードにハードコードされていますが、PHPによって自動生成されません。 –