Comment actualiser un navigateur par programmation
J'ai trois ordinateurs; Server, Client and Viewer. Je contrôle le serveur et le spectateur .
- L'utilisateur de la
Clientse connecte à laServeret se voit présenter une page Web. - Grâce à un script php, l'utilisateur télécharge une image.
- L'image est intégrée dans du HTML.
Viewerest un ordinateur totalement sans interaction de l'utilisateur - il n'y a pas de clavier. LaViewerest toujours à tout moment en cours d'exécution d'un navigateur Web, affichant la page d'image.
Mon problème maintenant est que même si l'image change sur le disque du serveur, la page Web n'est pas mise à jour. Comment actualiser le navigateur Web sur le visualiseur ou sur une partie de la page Web?
Je connais html, css, javascript, php et ajax, mais apparemment pas assez bien.
Il y a au moins trois façons d'accomplir cela.
HTML pur
Comme l'a souligné le commentaire de Amitd , dans "show.html", ajoutez la balise <meta> suivante à l'élément <head> de votre document:
<meta http-equiv="refresh" content="5" />
Cela actualisera automatiquement la page toutes les 5 secondes. Ajustez la valeur de l'attribut content au nombre de secondes souhaité.
JavaScript pur:
Comme indiqué par MeNoMore , document.location.reload() actualisera la page lorsque vous l'appelez.
<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>
Et comme indiqué par tpower AJAX, les requêtes peuvent être utilisées, mais vous devez écrire un service Web pour renvoyer une URL à l’image souhaitée. Le JavaScript pour faire une demande AJAX ressemblerait à ceci:
<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>
Autres méthodes:
Enfin, pour répondre à votre question à la réponse de tpower ... $.ajax() utilise jQuery pour effectuer l 'appel AJAX. jQuery est une bibliothèque JavaScript qui simplifie beaucoup les appels AJAX et la manipulation DOM. Pour utiliser la bibliothèque jQuery, vous devez y inclure une référence dans votre élément <head> (la version 1.4.2 est utilisée à titre d'exemple):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Vous pouvez également télécharger le fichier "jquery.min.js" et l'héberger localement, mais cela ne modifierait bien sûr que l'URL à partir de laquelle le script est chargé.
La fonction AJAX ci-dessus, lorsqu'elle est écrite avec jQuery, ressemble davantage à ceci:
<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>
Comme je l'espère, la version jQuery est beaucoup plus simple et plus propre. Cependant, étant donné la faible portée de votre projet, je ne sais pas si vous voudriez vous embêter avec les frais généraux supplémentaires de jQuery (même si c’est beaucoup). Je ne sais pas non plus si les exigences de votre projet autorisent la possibilité de jQuery. J'ai inclus cet exemple simplement pour répondre à votre question sur ce que $.ajax() était.
Je suis également convaincu qu'il existe d'autres méthodes permettant d'actualiser l'image. Personnellement, si l’URL de l’image change constamment, j’utiliserais la route AJAX. Si l'URL de l'image est statique, j'utiliserais probablement la balise <meta> refresh.
J'ai exactement la même application. Utilisez simplement WebSockets.
Vous pouvez démarrer un websocket connection et le serveur informera la Viewer à chaque fois qu'il recevra une mise à jour. Vous pouvez envoyer l'image mise à jour via Websocket, de manière totalement asynchrone sans perturber l'affichage ou l'interaction de l'utilisateur.
Si vous utilisez des minuteries, vous n'obtiendrez pas de mises à jour rapides ou vous continuerez d'actualiser la page sans l'utiliser.
Détails:
Il faudra un serveur Websocket comme pywebsocket ou phpwebsocket.
Client:
A besoin de la prise en charge de HTML5 websocket, tous les navigateurs actuels la prennent en charge.
Vous devez vous inscrire pour recevoir un message lorsqu'une mise à jour de l'image se produit. C'est comme enregistrer un rappel.
Exemple:
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);
}
Chaque fois que le serveur envoie une mise à jour, la fonction associée à wSocket.onmessage sera appelée et vous pourrez faire ce que vous devez faire.
Serveur:
Écoutera une connexion du client (peut être faite pour prendre en charge plusieurs clients). Une fois la connexion établie et le message "sendImageUpdates" reçu, le serveur attend les mises à jour dans l'image. Lorsqu'une nouvelle image est téléchargée, le serveur crée un nouveau message et l'envoie au client.
Avantages
- Obtiendra des mises à jour dès qu'une image est téléchargée et uniquement lorsqu'une image Est téléchargée.
- Le client saura que l'image a changé et peut effectuer des fonctions supplémentaires
- Entièrement asynchrone et piloté par le serveur.
Vous pouvez utiliser AJAX demandes pour vous aider. Par exemple, vous interrogez le serveur pour obtenir l'image toutes les cinq secondes. À la place, vous pouvez interroger le serveur pour obtenir un nouvel identifiant d'image et utiliser cet identifiant au lieu du nombre aléatoire pour la source de l'image. Dans ce cas, l'attribut src ne changera/rechargera que s'il y a une nouvelle image.
<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">
Une alternative consiste à obtenir une notification du serveur lorsque l'image change via un socket Web.
Recharger la page dans un intervalle de temps spécifique peut faire l'affaire.
setTimeout(function(){
window.location.reload(1);
}, 5000);
Le code ci-dessus recharge la page en cours en 5 secondes.
OR
Vous pouvez également opter pour un appel ajax qui sera assynchrone et vous ne devrez pas actualiser la page entière. Commander le code suivant:
$.ajax({
url: "test.aspx",
context: document.body
}).done(function() {
$(this).addClass("done");
});
Ceci peut être utilisé à la place de la window.location.reload(1);
[** test.html: ** Cette page doit importer toutes les src d’image, c’est-à-dire un service qui apporte les images à la page.]
En faisant cela, vous obtiendrez le résultat sous la forme data dans la done(function() que vous pouvez associer à un élément html de la page actuelle. Exemple:
done(function() {
$('#ImageId').attr('src', data);
});
Cela définira le src de la balise img sur data à partir de test.aspx
Avantage: Toute la page n'est pas actualisée et seule la nouvelle image est ajoutée.
Allez au bout de ce lien pour en savoir plus sur jQuery Ajax ...
Utilisation.
document.location.reload();
Par exemple, pour réagir à un clic de bouton:
<input type="button" value="Reload Page" onClick="window.location.reload()">
Le plus simple consiste à utiliser le pooling AJAX.
Pour cela dans le fichier php qui gère le téléchargement, quand une nouvelle photo est téléchargée, enregistrez un horodatage Unix dans un fichier:
file_put_contents('lastupload.txt', strval(time())); // Save timestamp of upload
Créez un autre fichier php (ex: polling.php) qui gérera les appels AJAX et renverra l'horodatage unix du dernier téléchargement:
echo file_get_contents('lastupload.txt'); // Send last upload timestamp
Dans le code javascript de la visionneuse, lancez une interrogation AJAX qui détectera une modification de l'horodatage et actualisera l'image si nécessaire:
$(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;
}
}
});
}
Je n'ai pas testé le code, donc il pourrait y avoir des erreurs mais c'est l'idée.
Vous devez implémenter une connexion client longue avec le serveur appelée COMET ou utiliser un socket si votre navigateur prend en charge websocket.
En javascript, il existe plusieurs façons d'actualiser par programme.
La méthode préférée est location.reload()
Une autre méthode consiste à définir la propriété location.href, le navigateur accédant automatiquement à la nouvelle URL. location=location ou location.href=location.href le ferait également.
Bien que la deuxième méthode semble probablement bizarre.
Pour récapituler, c'est:
location.reload();
//or
location.href=location.href;
//or
location=location;
J'espère que cela a aidé.
Je ne pense pas que vous ayez besoin de beaucoup de scripts pour cela. J'ai résolu ce problème en ajoutant simplement un point d'interrogation et un nombre aléatoire juste après l'URL de l'image. Si vous ne modifiez pas le navigateur d'URL d'image, appelez-le à partir du cache.
Pour afficher la dernière photo sur la page:
<img src="<?php echo $image_url; ?>?<?php echo Rand(10,99); ?>"/>
Il imprime quelque chose comme:
http://static.example.com/myimage.jpg?56
Votre question et ma solution actualisent l’URL de l’image en la modifiant avec un nombre aléatoire à l’aide de Jquery et de la fonction de nombre aléatoire javascript dans mon problème. Je pense que vous avez compris le point et l’adapteriez à vos besoins.
$('#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');
}
});
});
La meilleure solution consisterait à écrire un petit script php sur le navigateur Web du visualiseur afin de vérifier périodiquement l'image et, le cas échéant, de la recharger. J'espère que cela vous aidera si vous avez besoin d'un extrait de code, faites-le moi savoir.