habilitar - instalar javascript
¿Cómo actualizo un navegador mediante programación? (10)
Tengo tres computadoras; Server , Client y Viewer . Tengo el control del servidor y del espectador.
- El usuario en el
Clientconecta alServery se le presenta una página web. - A través de un script php, el usuario carga una imagen.
- La imagen está incrustada en algunos html.
- The
Vieweres una computadora totalmente sin interacción del usuario; no hay teclado. ElViewersiempre está ejecutando un navegador web, mostrando la página de la imagen.
Mi problema ahora es que aunque la imagen cambia en el disco del servidor, la página web no se actualiza. ¿Cómo actualizo el navegador web en el visor o parte de la página web?
Sé html, css, javascript, php y ajax, pero al parecer no lo suficientemente bien.
Debe implementar una conexión de larga duración del cliente con el servidor lo que se llama COMET o hacer uso del socket si su navegador es compatible con websocket.
En javascript, hay algunas formas de actualizar mediante programación.
El método preferido es location.reload()
Otra forma es establecer la propiedad location.href , el navegador automáticamente va a la nueva url, por lo que location=location o location.href=location.href también lo haría.
Aunque el segundo método probablemente se ve raro.
Para recapitular, eso es:
location.reload();
//or
location.href=location.href;
//or
location=location;
Espero que esto haya ayudado.
Hay al menos tres formas de lograr esto.
HTML puro
Como se señala en el comentario de Amitd, en "show.html" agregue la siguiente etiqueta <meta> al elemento <head> su documento:
<meta http-equiv="refresh" content="5" />
Esto actualizará automáticamente la página cada 5 segundos. Ajuste el valor del atributo de content al número deseado de segundos.
JavaScript puro:
Como lo señala MeNoMore , document.location.reload() actualizará la página cuando la llame.
<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>
Y como lo señalan las solicitudes de tpower AJAX, podría ser necesario, pero necesitaría escribir un servicio web para devolver una url a la imagen deseada. El JavaScript para hacer una solicitud AJAX se vería así:
<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>
Otros metodos:
Finalmente, para responder su pregunta a la respuesta de tpower ... $.ajax() está usando jQuery para hacer la llamada AJAX. jQuery es una biblioteca de JavaScript que hace que las llamadas AJAX y la manipulación de DOM sean mucho más simples. Para utilizar la biblioteca de jQuery, debe incluir una referencia en su elemento <head> (la versión 1.4.2 se utiliza como ejemplo):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
También podría descargar el "jquery.min.js" y alojarlo localmente, pero eso, por supuesto, solo cambiaría la url desde la que está cargado el script.
La función AJAX anterior, cuando se escribe usando jQuery se vería más como esto:
<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>
Como espero que sea evidente, la versión de jQuery es mucho más simple y limpia. Sin embargo, dado el pequeño alcance de su proyecto, no sé si desea molestarse con la sobrecarga adicional de jQuery (no es que sea demasiado). Tampoco sé si los requisitos de su proyecto permiten la posibilidad de jQuery. Incluí este ejemplo simplemente para responder a su pregunta de qué $.ajax() era.
Estoy igualmente seguro de que hay otros métodos por los cuales puede lograr refrescar la imagen. Personalmente, si la URL de la imagen siempre está cambiando, usaría la ruta AJAX. Si la url de la imagen es estática, probablemente use la etiqueta de actualización <meta> .
La mejor solución sería escribir un pequeño script php en el navegador web del espectador para revisar periódicamente la imagen y, si está modificada, volverá a cargarla. Como el código php se ejecuta en el servidor, puede hacerlo fácilmente. Espero que esto ayude si necesitas un fragmento de código. Avísame.
Lo más fácil es usar la agrupación AJAX.
Para eso, en el archivo php que entrega la carga, cuando se carga una nueva foto, guarde una marca de tiempo de unix en un archivo:
file_put_contents(''lastupload.txt'', strval(time())); // Save timestamp of upload
Cree otro archivo php (por ejemplo, polling.php) que administre las llamadas AJAX y devuelva la marca de tiempo de unix de la última carga:
echo file_get_contents(''lastupload.txt''); // Send last upload timestamp
En el código JavaScript del Visor, realice un sondeo AJAX que detectará un cambio en la marca de tiempo y actualizará la imagen cuando sea necesario:
$(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;
}
}
});
}
No he probado el código, por lo que puede haber errores, pero esta es la idea.
No creo que necesites muchas secuencias de comandos para eso. Resolví ese problema simplemente agregando un signo de interrogación y un número aleatorio justo después de la url de la imagen. Si no cambia la imagen, el navegador url lo llama desde la memoria caché.
Para mostrar la imagen más nueva en la página:
<img src="<?php echo $image_url; ?>?<?php echo rand(10,99); ?>"/>
Imprime algo como:
http://static.example.com/myimage.jpg?56
Tu pregunta y mi solución actualizan la url de la imagen al cambiarla con un número aleatorio usando Jquery y la función de número aleatorio de JavaScript en mi problema. Creo que entendiste el punto y lo adaptarías a tu necesidad.
$(''#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'');
}
});
});
Puede usar las solicitudes de AJAX para ayudar. Por ejemplo, lo que está haciendo es sondear el servidor de la imagen cada cinco segundos. En su lugar, puede sondear el servidor para obtener una nueva identificación de imagen y usar esa identificación en lugar del número aleatorio para la fuente de la imagen. En este caso, el atributo src solo cambiará / volverá a cargarse cuando haya una imagen nueva.
<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">
Una alternativa es recibir una notificación del servidor cuando la imagen cambia a través de un socket web.
Tengo exactamente la misma aplicación. Solo use WebSockets .
Puede iniciar una websocket connection y el servidor informará al Viewer siempre que reciba una actualización. Puede enviar la imagen actualizada a través de websocket, totalmente asíncrona sin perturbar la visualización o la interacción del usuario.
Si usa temporizadores, no obtendrá actualizaciones rápidas o mantendrá la página actualizada sin uso.
Detalles:
Necesitará un servidor Websocket como pywebsocket o phpwebsocket .
Cliente:
Necesitará compatibilidad con HTML5 websocket, todos los navegadores actuales lo admiten.
Necesita registrarse para recibir un mensaje cuando ocurre una actualización de imagen. Es como registrar una devolución de llamada.
Ejemplo:
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);
}
Cada vez que el servidor envía una actualización, se wSocket.onmessage a la función asignada a wSocket.onmessage y podrá hacer lo que tenga que hacer con ella.
Servidor:
Escuchará la conexión del cliente (se puede hacer para admitir múltiples clientes). Una vez que se establece una conexión y se recibe el mensaje "sendImageUpdates" , el servidor esperará cualquier actualización en la imagen. Cuando se carga una nueva imagen, el servidor creará un nuevo mensaje y lo enviará al cliente.
Pros
- Obtendrá actualizaciones tan pronto como se cargue una imagen y solo cuando se cargue una imagen.
- El cliente sabrá que la imagen ha cambiado y puede hacer funciones adicionales.
- Totalmente asíncrono y dirigido por el servidor.
Utilizar.
document.location.reload();
Por ejemplo, para reaccionar a un botón, haga clic en:
<input type="button" value="Reload Page" onClick="window.location.reload()">
Volver a cargar la página en un intervalo de tiempo específico podría hacer el truco.
setTimeout(function(){
window.location.reload(1);
}, 5000);
El código anterior vuelve a cargar la página actual en 5 segundos.
O
También puede elegir una llamada ajax que será asincrónica y tampoco tendrá que actualizar toda la página. Verifica el siguiente código:
$.ajax({
url: "test.aspx",
context: document.body
}).done(function() {
$(this).addClass("done");
});
Esto se puede usar instaed de window.location.reload(1);
[** test.html: ** Esta página debe incluir todos los archivos de imagen en carga, es decir, un servicio que trae las imágenes a la página.]
Al hacer esto obtendrás el resultado como data en el done(function() que puedes asignar a un elemento html en la página actual. Ejemplo:
done(function() {
$(''#ImageId'').attr(''src'', data);
});
Esto establecerá el src de la etiqueta img en los data de test.aspx
Ventaja: toda la página no se actualiza y solo se agrega la nueva imagen.
Vaya a través de este link para saber más sobre jQuery Ajax ...