web-dev-qa-db-ja.com

ページを更新せずにUIを活発に更新する方法

Struts2フレームワークを使用してWebアプリケーションを実行しています。ユーザーのログイン後、ユーザーの現在のステータスに関するダッシュボードを表示します。ダッシュボードUI（JSP）を表示するために、私はバックエンド（Mysql）から情報を取得するために使用しました。ページの読み込み時に、たとえば「getDashboardInformation」（Jquery Ajax経由）などのリクエストをトリガーして、ユーザーの現在のダッシュボード情報を取得し、その情報をUIに表示します。

したがって、ページが読み込まれたときにのみリクエストがトリガーされます。ここで、ユーザーのダッシュボード情報がmysqlテーブル（ダッシュボードに関連する）で更新/挿入されるたびにリクエストをトリガーしたいと思います。

次に、ページを更新する必要なしに、ダッシュボード情報（例：cricinfo-スコアがUIで自動的に更新される）を生き生きと取得するにはどうすればよいですか。

javajqueryajaxjspstruts
1
user3214145

これにはWebソケットを使用できますが、Webソケットは新しいテクノロジーであり、ブラウザーがサポートされている場合は問題が発生する可能性があることに注意してください。

Webソケットは、ある種のイベントリスナーです。 socket.onopen- eventのようなサーバーからのイベントを待っています。

したがって、クライアント側でこれを行うには、次のようにします。

まずはレスポンスデータを扱う関数があります...

function handleResponseData(data) {
    // data could be JSON string for example
    alert(data);
}

次に、データ処理のWebソケットバージョンを作成します...

function doSocket() {
    socket = new WebSocket("ws://echo.websocket.org/");
    socket.onmessage = function(event) {
        handleResponseData(event.data);
    }
}

そして、代替バージョン...

function doAlternative() {
    window.setInterval(function() {
        var xmlhttp;

        if(window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange=function() {
            if(xmlhttp.readyState==4 && xmlhttp.status==200 &&
                // Also check if server responded with data:
                xmlhttp.responseText)
            {
                handleResponseData(xmlhttp.responseText);
            }
        }

        xmlhttp.open("GET","echo.websocket.org",true);
        xmlhttp.send();
    }, 2000);
}

あとは、Webソケットがサポートされているかどうかを確認し、適切な関数を実行するだけです。

function initialize() {
    if(typeof(WebSocket) == "function") {
        doSocket();
    }
    else {
        doAlternative();
    }
}

window.addEventListener("load", initialize, false);

このコードをクライアント側で使用すると、定期的な更新を処理できるようになります。ただし、両方のバージョンを実行している限り、これを処理するためにサーバー側で2つのメカニズムが必要になることに注意してください。

  1. クライアントに更新を定期的に送信するソケット
  2. インターバル関数で送信されたリクエストを処理するサーブレット。

最後に、Webソケットに関する詳細情報 here を取得できます。

0
narranoid