web-dev-qa-db-ja.com

プログラムでブラウザを更新するにはどうすればよいですか

3台のコンピューターがあります。 ServerClient、およびViewer。私はサーバーとビューアを管理しています。 workflow

  1. ClientのユーザーはServerに接続し、Webページが表示されます。
  2. ユーザーはphpスクリプトを使用して画像をアップロードします。
  3. 画像はいくつかのhtmlに埋め込まれています。
  4. Viewerは、ユーザーの操作がまったくないコンピューターです。キーボードはありません。 Viewerは常にWebブラウザを実行し、画像ページを表示します。

私の問題は、サーバーディスク上の画像が変更されても、Webページが更新されないことです。ビューアーまたはWebページの一部でWebブラウザーを更新するにはどうすればよいですか?

私はhtml、css、javascript、php、ajaxを知っていますが、明らかに十分ではありません。

32
hpekristiansen

これを実現するには、少なくとも3つの方法があります。

純粋なHTML

Amitd のコメントで指摘されているように、「show.html」で次の_<meta>_タグをドキュメントの_<head>_要素に追加します。

_<meta http-equiv="refresh" content="5" />
_

これにより、5秒ごとにページが自動的に更新されます。 content属性の値を目的の秒数に調整します。

純粋なJavaScript:

MeNoMore で指摘されているように、document.location.reload()は呼び出し時にページを更新します。

_<script type="text/javascript">
    //put this somewhere in "show.html"
    //using window onload event to run function
    //so function runs after all content has been loaded.
    //After refresh this entire script will run again.
    window.onload = function () {
        'use strict';
        var millisecondsBeforeRefresh = 5000; //Adjust time here
        window.setTimeout(function () {
            //refresh the entire document
            document.location.reload();
        }, millisecondsBeforeRefresh);
    };
</script>
_

tpower AJAXリクエストで指摘されているように、リクエストを使用できますが、目的の画像へのURLを返すWebサービスを記述する必要があります。 AJAXリクエストを行うJavaScriptは次のようになります。

_<script type="text/javascript">
    //put this somewhere in "show.html"
    //using window onload event to run function
    //so function runs after all content has been loaded.
    window.onload = function () {
        'use strict';
        var xhr,
            millisecondsBeforeNewImg = 5000;    // Adjust time here
        if (window.XMLHttpRequest) {
            // Mozilla, Safari, ...
            xhr = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            // IE
            try {
                // try the newer ActiveXObject
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    // newer failed, try the older one
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                    // log error to browser console
                    console.log(e);
                }
            }
        }
        if (!xhr) {
            // log error to browser console
            console.log('Giving up :( Cannot create an XMLHTTP instance');
        }
        xhr.onreadystatechange = function () {
            var img;
            // process the server response
            if (xhr.readyState === 4) {
                // everything is good, the response is received
                if (xhr.status === 200) {
                    // perfect!
                    // assuming the responseText contains the new url to the image...
                    // get the img
                    img = document.getElementById('theImgId');
                    //set the new src
                    img.src = xhr.responseText;
                } else {
                    // there was a problem with the request,
                    // for example the response may contain a 404 (Not Found)
                    // or 500 (Internal Server Error) response code
                    console.log(xhr.status);
                }
            } else {
                // still not ready
                // could do something here, but it's not necessary
                // included strictly for example purposes
            }
        };
        // Using setInterval to run every X milliseconds
        window.setInterval(function () {
            xhr.open('GET', 'http://www.myDomain.com/someServiceToReturnURLtoDesiredImage', true);
            xhr.send(null);
        }, millisecondsBeforeNewImg)
    };
</script>
_

その他の方法:

最後に、 tpower の答えに対する質問に答えるために... $.ajax()はAJAX呼び出しを行うために jQuery を使用しています。 jQueryはAJAX呼び出しとDOM操作をはるかに簡単にするJavaScriptライブラリです。 jQueryライブラリを使用するには、_<head>_要素にバージョンへの参照を含める必要があります(バージョン1.4.2を例として使用):

_<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
_

「jquery.min.js」をダウンロードして、代わりにローカルでホストすることもできますが、もちろん、スクリプトのロード元のURLのみを変更します。

上記のAJAX関数は、jQueryを使用して記述された場合、次のようになります。

_<script type="text/javascript">
    //put this somewhere in "show.html"
    //document.ready takes the place of window.onload
    $(document).ready(function () {
        'use strict';
        var millisecondsBeforeNewImg = 5000;    // Adjust time here
        window.setInterval(function () {
            $.ajax({
                "url": "http://www.myDomain.com/someServiceToReturnURLtoDesiredImage",
                "error": function (jqXHR, textStatus, errorThrown) {
                    // log error to browser console
                    console.log(textStatus + ': ' + errorThrown);
                },
                "success": function (data, textStatus, jqXHR) {
                    //get the img and assign the new src
                    $('#theImgId').attr('src', data);
                }
            });
        }, millisecondsBeforeNewImg);
    });
</script>
_

明らかなように、jQueryバージョンははるかにシンプルでクリーンです。ただし、プロジェクトの範囲が狭いため、jQueryのオーバーヘッドを増やす必要があるかどうかはわかりません(それだけではありません)。また、プロジェクトの要件がjQueryの可能性を許可しているかどうかもわかりません。 $.ajax()とは何かという質問に答えるために、この例を含めました。

同様に、画像の更新を行うことができる他の方法があると確信しています。個人的に、画像のURLが常に変化する場合は、AJAXルートを使用します。画像のURLが静的な場合は、おそらく_<meta>_更新タグを使用します。

49
pete

私はまったく同じアプリケーションを持っています。 WebSocketsを使用してください。

websocket connectionを開始すると、サーバーは更新を取得するたびにViewerに通知します。表示やユーザーの操作を妨げることなく、完全に非同期のwebsocketを介して更新された画像を送信できます。

タイマーを使用する場合、迅速な更新を取得できないか、使用せずにページを更新し続けます。


詳細:

pywebsocketphpwebsocketなどのWebsocketサーバーが必要になります。

クライアント:

HTML5 websocketサポートが必要になります。現在のすべてのブラウザーがサポートしています。

イメージの更新が発生したときにメッセージに登録する必要があります。コールバックを登録するようなものです。

例:

wSocket = new WebSocket('ws://' + serverIP + ':' + serverPort + '/images');

wSocket.onopen = function() {
    console.log("Primary Socket Connected.");

    connectedPrimary = true;

    wSocket.send("sendImageUpdates");
};

wSocket.onmessage = function(evt) {
    // evt is the message from server

    // image will be representated as a 64 encoded string

    // change image with new one
    $("#image").attr('src', 'data:image/png;base64,' + evt.data);
}

wSocket.onclose = function() {
    console.log("Primary Socket Closed.");

    wSocket = null;
};

wSocket.onerror = function(evt) {
    alert(evt);
}

サーバーが更新を送信するたびに、wSocket.onmessageにマッピングされた関数が呼び出され、必要なことは何でもできます。

サーバー:

クライアントからの接続をリッスンします(複数のクライアントをサポートするために作成できます)。接続が確立され、メッセージ"sendImageUpdates"が受信されると、サーバーはイメージの更新を待機します。新しい画像がアップロードされると、サーバーは新しいメッセージを作成してクライアントに送信します。

長所

  1. 画像がアップロードされるとすぐに、画像がアップロードされるときにのみ更新を取得します。
  2. クライアントは、画像が変更されたことを認識し、追加の機能を実行できます。
  3. 完全に非同期でサーバー駆動型。
19
ATOzTOA

AJAXリクエストを使用してください。たとえば、5秒ごとにサーバーのイメージをポーリングしています。代わりに、サーバーに新しいイメージIDをポーリングし、そのIDを使用できます画像のソースの乱数ではなく、この場合、src属性は、新しい画像が存在する場合にのみ変更/リロードされます。

<script language="JavaScript"><!--
function refreshIt() {
   if (!document.images) return;
   $.ajax({
      url: 'latest-image-id.json',
      success: function(newId){
          document.images['doc'].src = 'doc.png?' + newId;        
      }
   });
   setTimeout(refreshIt, 5000); // refresh every 5 secs
}
//--></script>
</head>
<body onLoad=" setTimeout(refreshIt, 5000)">
<img src="doc.png" name="doc">

別の方法は、Webソケットを介して画像が変更されたときにサーバーから通知を受け取ることです。

11
tpower

特定の時間間隔でページをリロードすると、うまくいくかもしれません。

_setTimeout(function(){
window.location.reload(1);
}, 5000);
_

上記のコードは、現在のページを5秒で再読み込みします。

OR

また、非同期であるajax呼び出しを使用することもできます。また、ページ全体を更新する必要もありません。次のコードをチェックアウトします。

_$.ajax({
  url: "test.aspx",
  context: document.body
}).done(function() {
  $(this).addClass("done");
});
_

これは、window.location.reload(1);の代わりに使用できます。

[** test.html:**このページは、ロード時にすべての画像srcを取り込む必要があります。つまり、ページに画像を取り込むサービスです。]

これを行うと、結果がdataとしてdone(function()に取得され、現在のページのhtml要素に割り当てることができます。例:

_done(function() {
$('#ImageId').attr('src', data);
 });
_

これにより、imgタグのsrcがtest.aspxからdataに設定されます。

利点:ページ全体は更新されず、新しい画像のみが追加されます。

JQuery Ajaxの詳細を知るには、これを徹底してください link .

5
A J

使用する。

document.location.reload();

ボタンのクリックに反応する例の場合:

<input type="button" value="Reload Page" onClick="window.location.reload()">
4
CloudyMarble

最も簡単な方法は、AJAX pooling。
そのため、アップロードを処理するphpファイルで、新しい写真がアップロードされるときに、ファイルにUNIXタイムスタンプを保存します。

file_put_contents('lastupload.txt', strval(time())); // Save timestamp of upload

AJAX呼び出しを処理し、最後のアップロードのUNIXタイムスタンプを返す別のphpファイル(例:polling.php)を作成します。

echo file_get_contents('lastupload.txt'); // Send last upload timestamp

ビューアのJavaScriptコードで、AJAX=ポーリングを行います。これにより、タイムスタンプの変更が検出され、必要に応じて画像が更新されます。

$(function() {
   setInterval(polling, 1000); // Call polling every second.
});
var lastupload = 0;
function polling() {
   $.ajax({
      url: 'polling.php',
      success: function(timestamp){
          if (timestamp > lastupload) { // Is timestamp newer?
              document.images['image'].src = 'image.png?' + timestamp; // Refresh image
              lastupload = timestamp;
          }
      }
   });
}

私はコードをテストしていないので、間違いがあるかもしれませんが、これはアイデアです。

1
qwertzguy

ブラウザがwebsocketをサポートしている場合は、COMETと呼ばれるサーバーとのクライアントロングポーリング接続を実装するか、ソケットを使用する必要があります。

1
Yuriy Bilogub

JavaScriptでは、プログラムで更新する方法がいくつかあります。

推奨される方法はlocation.reload()です

別の方法は、location.hrefプロパティ、ブラウザは自動的に新しいURLに移動するため、location=locationまたはlocation.href=location.hrefもそうします。

2番目の方法はおそらく奇妙に見えますが。

要約すると、次のとおりです。

location.reload();
//or
location.href=location.href;
//or
location=location;

1
Braden Best

そのために多くのスクリプトを作成する必要はないと思います。画像のURLの直後に疑問符と乱数を追加するだけで、この問題を解決しました。画像のURLを変更しない場合、ブラウザはキャッシュから呼び出します。

ページに最新の写真を表示するには:

<img src="<?php echo $image_url; ?>?<?php echo Rand(10,99); ?>"/>

次のように表示されます。

http://static.example.com/myimage.jpg?56 

あなたの質問と私の解決策は、私の問題でJqueryとjavascriptの乱数関数を使用して乱数で画像のURLを変更することで画像のURLを更新することです。あなたはポイントを得て、あなたのニーズにそれを適応させると思います。

$('#crop_image').live('click',function(){
    $(this).html(ajax_load_fb);
    var x = $('#x').val();
    var y = $('#y').val();
    var w = $('#w').val();
    var h = $('#h').val();
    var dataString = 'process=image_crop&x='+x+'&y='+y+'&w='+w+'&h='+h;
    $.ajax({
        type: 'POST',
        url: '<?php echo $siteMain;?>ajax/ajaxupload.php',
        data: dataString,
        cache: false,
        success: function(msg) {
            $('#crop_image').html('Crop Selection');
            $('.crop_success_msg').slideDown('slow');
            var numRand = Math.floor(Math.random()*101);
            $('#current_img').html('<img src="/images/large_<?php echo $user['username'];?>.jpg?'+numRand+'"/>');
        },
        error: function(response, status, error)
        { 
            $(this).html('Try Again');
        }
    });
});
1
Kemal

最良の解決策は、ビューアーWebブラウザーで小さなphpスクリプトを作成して、定期的に画像を確認し、変更された場合は再読み込みすることです。 PHPコードはサーバー側で実行されるため、簡単に実行できます。コードスニペットが必要な場合にこれが役立つことを願っています。

0
sumeet kumar