プログラムでブラウザを更新するにはどうすればよいですか
3台のコンピューターがあります。 Server、Client、およびViewer。私はサーバーとビューアを管理しています。 
ClientのユーザーはServerに接続し、Webページが表示されます。- ユーザーはphpスクリプトを使用して画像をアップロードします。
- 画像はいくつかのhtmlに埋め込まれています。
Viewerは、ユーザーの操作がまったくないコンピューターです。キーボードはありません。Viewerは常にWebブラウザを実行し、画像ページを表示します。
私の問題は、サーバーディスク上の画像が変更されても、Webページが更新されないことです。ビューアーまたはWebページの一部でWebブラウザーを更新するにはどうすればよいですか？
私はhtml、css、javascript、php、ajaxを知っていますが、明らかに十分ではありません。
これを実現するには、少なくとも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>_更新タグを使用します。
私はまったく同じアプリケーションを持っています。 WebSocketsを使用してください。
websocket connectionを開始すると、サーバーは更新を取得するたびにViewerに通知します。表示やユーザーの操作を妨げることなく、完全に非同期のwebsocketを介して更新された画像を送信できます。
タイマーを使用する場合、迅速な更新を取得できないか、使用せずにページを更新し続けます。
詳細：
pywebsocketやphpwebsocketなどの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"が受信されると、サーバーはイメージの更新を待機します。新しい画像がアップロードされると、サーバーは新しいメッセージを作成してクライアントに送信します。
長所
- 画像がアップロードされるとすぐに、画像がアップロードされるときにのみ更新を取得します。
- クライアントは、画像が変更されたことを認識し、追加の機能を実行できます。
- 完全に非同期でサーバー駆動型。
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ソケットを介して画像が変更されたときにサーバーから通知を受け取ることです。
特定の時間間隔でページをリロードすると、うまくいくかもしれません。
_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 .
使用する。
document.location.reload();
ボタンのクリックに反応する例の場合：
<input type="button" value="Reload Page" onClick="window.location.reload()">
最も簡単な方法は、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;
}
}
});
}
私はコードをテストしていないので、間違いがあるかもしれませんが、これはアイデアです。
ブラウザがwebsocketをサポートしている場合は、COMETと呼ばれるサーバーとのクライアントロングポーリング接続を実装するか、ソケットを使用する必要があります。
JavaScriptでは、プログラムで更新する方法がいくつかあります。
推奨される方法はlocation.reload()です
別の方法は、location.hrefプロパティ、ブラウザは自動的に新しいURLに移動するため、location=locationまたはlocation.href=location.hrefもそうします。
2番目の方法はおそらく奇妙に見えますが。
要約すると、次のとおりです。
location.reload();
//or
location.href=location.href;
//or
location=location;
そのために多くのスクリプトを作成する必要はないと思います。画像の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');
}
});
});
最良の解決策は、ビューアーWebブラウザーで小さなphpスクリプトを作成して、定期的に画像を確認し、変更された場合は再読み込みすることです。 PHPコードはサーバー側で実行されるため、簡単に実行できます。コードスニペットが必要な場合にこれが役立つことを願っています。