0

学習プロジェクトとして、マルチユーザーの JavaScript ベースの描画アプリを作成しています。現在、それは 1 つの方法です。transmitter.html の「送信側」クライアントは、ユーザーが HTML5 キャンバス要素に描画するときにデータを送信し、receiver.html の「受信側」クライアントはそれを独自のキャンバスに複製します。

送信機は、mouseMove イベントに応答して、(previousX, previousY) と (currentX, currentY) の間に線を引くだけです。これら 2 つの座標セットを AJAX 経由でtransmitter.php に送信します。それらは、レシーバーが同様に AJAX を介して receiver.php を呼び出してそれらを収集するまで、セッション var に置かれます。少なくともそれが機能するはずです。

これはトランスミッター.php です:

<?php

session_start();

if (!isset($_SESSION['strokes'])) $_SESSION['strokes'] = '';

$_SESSION['strokes'] .= $_GET['px'] . "," . $_GET['py'] . "," . $_GET['x'] . "," . $_GET['y'] . ';';

?>

これは receiver.php です:

<?php

session_start();

echo($_SESSION['strokes']);

$_SESSION['strokes'] = "";

?>

なぜセッション変数を使用しているのか疑問に思われている方のために説明すると、それは、他のスクリプトからアクセスできるようにデータを格納するための、私が考える最速の方法だからです。代替案をグーグルで検索してみましたが、何も見つかりませんでした。もっと良い方法があれば、ぜひ聞きたいです。

とにかく、問題は、すべてのデータが通過しているわけではないということです。これは、受信者のキャンバスに描かれた線のギャップによって現れます。また、送信機と受信機の JavaScript ファイルに小さなカウンターを設定して、送受信された「ストローク」の数を正確に確認しました。常に送信よりも受信の方が少ないため、サーバー側でデータが失われているようです。

必要以上のコードを提供するリスクがありますが、これはデータをサーバーに送信する transmit.js のコードです (n は前述のカウンターです)。

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);
    }
}
4

1 に答える 1

0

あなたの質問を正しく読んだら; 異なるクライアントから同じセッションにアクセスしようとしていますか? この場合、これは不可能です。セッションはクライアント/ユーザーにバインドされます。

リアルタイムのマルチユーザーが必要な場合は、おそらく NodeJS 、特にNodeJS Eventsを確認する必要があります。これは JS ベースなので、アプリケーションにうまく統合できると思います。

于 2012-04-03T21:09:19.173 に答える