私は 3 台のコンピューターを持っています。Server、ClientおよびViewer。私はサーバーとビューアーを管理しています。
Client接続しServer、Web ページが表示されます。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()は、jQueryを使用して AJAX 呼び出しを行うことです。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またはのようなWebsocketサーバーが必要になりますphpwebsocket。
クライアント：
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 秒でリロードします。
また
また、非同期になる ajax 呼び出しを使用することもできます。また、ページ全体を更新する必要はありません。次のコードをチェックアウトします。
$.ajax({
url: "test.aspx",
context: document.body
}).done(function() {
$(this).addClass("done");
});
これは代わりに使用できます window.location.reload(1);
[**test.html:** このページは、読み込み時にすべての画像 src を取り込む必要があります。つまり、画像をページに取り込むサービスです。]
これを行うと、現在のページの html 要素に割り当てることができる結果が得dataられます。done(function()例：
done(function() {
$('#ImageId').attr('src', data);
});
これにより、img タグの src がdatafrom test.aspxに設定されます。
利点:ページ全体が更新されず、新しい画像のみが追加されます。
jQuery Ajax の詳細については、このリンクを参照してください。
使用する。
document.location.reload();
ボタンのクリックに反応する例:
<input type="button" value="Reload Page" onClick="window.location.reload()">
JavaScriptでは、プログラムで更新する方法がいくつかあります。
推奨される方法はlocation.reload()
もう1つの方法は、location.hrefプロパティを設定することで、ブラウザが自動的に新しいURLに移動するため、location=locationまたはそれlocation.href=location.hrefを実行します。
2番目の方法はおそらく奇妙に見えますが。
要約すると、それは次のとおりです。
location.reload();
//or
location.href=location.href;
//or
location=location;
COMET と呼ばれるサーバーとのクライアント ロング ポーリング接続を実装するか、ブラウザーが websocket をサポートしている場合はソケットを利用する必要があります。
そのために多くのスクリプトを作成する必要はないと思います。画像のURLの直後に疑問符と乱数を追加するだけで、その問題を解決しました。画像の URL を変更しない場合、ブラウザはキャッシュから呼び出します。
ページに最新の画像を表示するには:
<img src="<?php echo $image_url; ?>?<?php echo rand(10,99); ?>"/>
次のようなものが出力されます。
http://static.example.com/myimage.jpg?56
あなたの質問と私の解決策は、私の問題でJqueryとjavascriptの乱数関数を使用して乱数で変更することにより、画像の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');
}
});
});
最も簡単な方法は、AJAX プーリングを使用することです。
そのために、アップロードを処理する 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;
}
}
});
}
私はコードをテストしていないので、間違いがあるかもしれませんが、これがアイデアです。
最良の解決策は、ビューアの Web ブラウザに小さな php スクリプトを記述して定期的に画像をチェックし、変更された場合は画像をリロードすることです。PHPコードはサーバー側で実行されるため、簡単に実行できます。コードスニペットが必要な場合は、これが役立つことを願っています。