Как программно обновить браузер

У меня три компьютера; Server, Client и Viewer. Я контролирую сервер и зрителя. workflow

  • Пользователь в Client подключается к Server и представлен веб-страницей.
  • Через php script пользователь загружает изображение.
  • Изображение вложено в некоторый html.
  • Viewer - это компьютер полностью без взаимодействия с пользователем - клавиатура отсутствует. Viewer всегда всегда работает с веб-браузером, отображая страницу с картинками.

Теперь моя проблема заключается в том, что даже если изображение изменяется на диске сервера, веб-страница не обновляется. Как обновить веб-браузер в средстве просмотра или на веб-странице?

Я знаю html, css, javascript, php и ajax, но явно недостаточно.

Ответы

Ответ 1

Существует как минимум три способа выполнить это.

Чистый 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-адрес желаемому изображению. JavaScript для выполнения запроса AJAX будет выглядеть примерно так:

<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 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 - это библиотека JavaScript, которая делает AJAX-вызовы и DOM-манипуляции намного проще. Чтобы использовать библиотеку 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-адрес, на который вы загрузили script.

Функция 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>.

Ответ 2

У меня есть то же самое приложение. Просто используйте WebSockets.

Вы можете запустить websocket connection, и сервер будет сообщать Viewer всякий раз, когда он получает обновление. Вы можете отправить обновленное изображение через websocket, полностью асинхронное, не нарушая отображение или взаимодействие с пользователем.

Если вы используете таймеры, вы не получите быстрых обновлений или не будете обновлять страницу без использования.

Детали:

Вам понадобится сервер Websocket, например pywebsocket или phpwebsocket.

Клиент:

Вам понадобится поддержка websocket HTML5, поддерживаются все текущие браузеры.

Необходимо зарегистрировать сообщение, когда произойдет обновление изображения. Это похоже на регистрацию обратного вызова.

Пример:

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" сервер будет ожидать обновления в изображении. Когда новое изображение будет загружено, сервер создаст новое сообщение и отправит клиенту.

Pros

  • Получает обновления, как только изображение загружается, и только когда изображение загружается.
  • Клиент будет знать, что изображение изменилось и может выполнять дополнительные функции.
  • Полностью асинхронный и управляемый сервером.

Ответ 3

Вы можете использовать запросы AJAX, чтобы помочь. Например, то, что вы делаете, это опрос сервера для изображения каждые пять секунд. Вместо этого вы можете опросить сервер для нового идентификатора изображения и использовать этот идентификатор вместо случайного числа для источника изображения. В этом случае атрибут 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">

Альтернативой является получение уведомления с сервера при изменении изображения через веб-сокет.

Ответ 4

Перезагрузка страницы в определенный промежуток времени может сделать трюк.

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

Приведенный выше код перезагружает текущую страницу за 5 секунд.

ИЛИ

Вы также можете пойти на вызов ajax, который будет асинхронным, а также вам не придется обновлять всю страницу. Оформить следующий код:

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

Это можно использовать instaed для window.location.reload(1);

[** test.html: ** На этой странице должно быть загружено все изображение src при загрузке, т.е. служба, которая приносит изображения на страницу.]

При этом вы получите результат как data в done(function(), который вы можете определить для элемента html на текущей странице. Пример:

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

Это установит src тега img на data из test.aspx

Преимущество:. Вся страница не обновляется и добавляется только новое изображение.

Пройдите эту ссылку , чтобы узнать больше о jQuery Ajax...

Ответ 5

Использовать.

document.location.reload();

Для того, чтобы реагировать на кнопку, нажмите:

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

Ответ 6

Вам нужно внедрить клиентское длинное опросное соединение с сервером, что называется COMET, или использовать сокет, если ваш браузер поддерживает websocket.

Ответ 7

В javascript есть несколько способов обновления программно.

Предпочтительным методом является location.reload()

Другой способ заключается в установке свойства location.href, браузер автоматически переходит к новому URL-адресу, поэтому location=location или location.href=location.href также это сделает.

Хотя второй метод, вероятно, выглядит странно.

Чтобы повторить, вот что:

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

Надеюсь, это помогло.

Ответ 8

Самый простой способ - использовать объединение AJAX.
Для этого в файле php, передающем загрузку, при загрузке новой фотографии сохраните временную метку unix в файле:

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

Создайте еще один php файл (ex: polling.php), который будет обрабатывать вызовы AJAX и вернуть временную метку unix последней загрузки:

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

В javascript-коде Viewer сделайте опрос 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;
          }
      }
   });
}

Я не тестировал код, поэтому могут быть ошибки, но это идея.

Ответ 9

Я не думаю, что для этого вам нужно много сценариев. Я решил эту проблему просто добавить знак вопроса и случайное число сразу после URL-адреса изображения. Если вы не измените изображение, браузер URL-адресов вызывает его из кеша.

Чтобы отобразить самую новую страницу на странице:

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

Он печатает что-то вроде:

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

Ваш вопрос и мое решение обновляют URL-адрес изображения, изменяя его случайным числом с использованием функции случайных чисел JQuery и javascript в моей проблеме. Я думаю, вы поняли, что приспособились бы к ней.

$('#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');
        }
    });
});

Ответ 10

Лучшим решением было бы написать небольшой PHP скрипт в веб-браузере зрителя, чтобы периодически проверять изображение, и если его изменение будет перезагружать его. Поскольку PHP-код работает на стороне сервера, вы можете сделать это легко. Я надеюсь, что это поможет, если вам понадобится фрагмент кода, дайте мне знать.