0

Web開発の2日目に入りますので、優しくしてください。

ユーザーがサイトにアクセスし、画面をクリック/タップして別の画面にドットを表示できるようにする小さなWebアプリをコーディングしようとしています。これを行うために、データを処理するDjangoサーバーをセットアップしました。Javascriptを使用してクリック/タップ位置を取得し、POSTデータを介してサーバーに送信し、Processing.jsを使用して描画します（上司は大きいです）処理について、これは実際には携帯電話などを介した大画面での処理との対話性のテストです）。

私はWeb開発者ではないので、この単純なタスクでさえかなりの挑戦でした。これまではかなり気持ち良かったです。ユーザーがインタラクションWebページをロードすると、アプリの任意のユーザーIDが割り当てられ、特定のドットを制御できるようになります。ユーザーがページを離れるときにそのドットを削除したい。後でバックアップタイムアウトを実装する予定ですが、期待に最も近い最高のエクスペリエンスを実現するために、最初にインスタント削除を実行したいと思います。（私たちの最終目標は、人々が通りかかって、画面上のQRコードを使用してインタラクションサイトを起動し、ゲームに参加できる、シンプルなゲームを実行する素敵な大画面を作成することです。退屈したら、閉じるだけです。サイトとそれはゲーム画面からそれらを削除します、簡単です）。

私のインタラクションページには、次のコードがあります（変数名が不十分な場合はお詫びします）。

<body onload="load()" onbeforeunload="unload()"> 
<canvas id="canv" width="1000" height="1000"/>

<script type="text/jscript">
    var userid;
    
    function load() {       
        userid = Math.floor(Math.random()*1000) //this will of course be changed
        var canv = document.getElementById('canv');
        canv.addEventListener('click', onCanvasClick);
        //$(window).unload(unload());
    }
    
    function onCanvasClick(event) {
        var cx, cy;
        var canvv = document.getElementById('canv');
        
        canoffset = $(canvv).offset();
        cx = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - Math.floor(canoffset.left);
        cy = event.clientY + document.body.scrollTop + document.documentElement.scrollTop - Math.floor(canoffset.top) + 1;
        
        cx = (((cx - 500) / 500) * 3);
        cy = (((cy - 500) / 500) * 3);
        
        var data = {
            x: cx,
            y: cy,
            id : userid,
            deleteMe : 0
        };
        $.post("", data);
    }
    
    function unload() {
    //send remove code for this user
        var data = {
            x: 0,
            y: 0,
            id: userid,
            deleteMe : 1
        };
        $.post("", data);
        //alert("test");
    }
</script>

このPOSTデータはDjangoサーバーに送信されることになっています。関数から送信されたPOSTonCanvasClickが正常に受信され、ドットが計画どおりに移動しているのがわかります。ただし、 orイベント（またはコメントアウトされているように、JQuery ）を使用しても、関数から送信されたPOSTunload()は受信されません。ただし、コメントアウトされたアラートは引き続き発生します。beforeunloadunloadunload

ここで何が欠けていますか？ユーザーがページを離れたことをサーバーに伝えるための実証済みの方法はありますか？

4

2 に答える 2

1

誰かがあなたのページを離れたことを100％信頼できる方法はありません。最善の方法は、AJAXポーリングを使用し、ポーリングが停止したらユーザーが離れたと想定するか、接続を開いたままにするためにWebソケット（普遍的に利用可能ではない）を使用することです。

たとえば、タブレットでサイトを閲覧していると、インターネット接続が失われます。beforeunloadそのような状況では役に立ちません。

于 2012-06-07T18:55:23.473 に答える
0

基本的に、ブラウザが通常勝つ競合状態があります。

現代のブラウザは、ページをできるだけ速く高速化しようとします。人々は次のページがロードされるのを待つのを嫌うので、彼らがしたことはアンロード/アンロード前に開かれたリクエストを殺すことでした。古いブラウザはforループを待ちますが、それを殺しました。

于 2012-06-07T19:01:10.543 に答える