Нужен javascript для проверки работоспособности сервера и предотвращения удаления страницы, когда это не так

#javascript #json #flask #post #get

#javascript #json #flask #Публикация #получить

Вопрос:

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

Приведенный ниже код, похоже, делает страницу пустой, когда сервер умирает, и она возвращается, когда сервер снова включается, что приятно, но это разрушает слайд-шоу, пока сервер не работает. Также по какой-то причине не выполняется предупреждение о сбое режима. В конце концов, я хочу заменить предупреждение маленьким красным прямоугольником в правом нижнем углу картинок, но в настоящее время я даже не могу заставить его выполнить код предупреждения.

 function checkServerStatus()
{
    var img = document.createElement("img");
    img.onload = function()
    {
        //Change to reload only if links change in server
        location.reload(1);
    };
    img.onerror = function()
    {
        //does not display alert and kills page when running live, works here though. Page returns if server comes back up
        alert('nope!');
    };
    img.src = "/static/img/aol.png";
}

 <!DOCTYPE html>
<html lang="en">
  <head>
    <!--Kill Favicon request -->
    <link rel="icon" href="data:,">
    
    <title>Display: Home</title>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!--My styles sheet -->
    <link rel="stylesheet" type="text/css" href="/static/styles.css">
    <!-- My Java Scripts -->
    <script src="/static/js/moment.min.js"></script>
    <!-- Script from server for moment text generator -->
    <script src="/static/scripts.js"></script>
  </head>
  
<script>var myVar = setInterval("checkServerStatus()", 60000);</script>

<div class="full-screen-scroller" style="width: 400px;" background-color: powderblue;>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      
      <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
          <img style="width: 100%; max-height: 400px;" src="https://media.giphy.com/media/r1fDuPIcs18d2/giphy-downsized-large.gif" alt="Snoop Dog!">
          <div class="carousel-caption"><h3>Snoop Dog!</h3></div>
        </div>
        
        <div class="item">
          <img style="width: 100%; max-height: 400px;" src="https://media.giphy.com/media/WZ5tDWAQrUeuk/giphy.gif" alt="Wowzers!">
          <div class="carousel-caption"><h3>Wowzers!</h3></div>
        </div>
    </div>
  </div>
</div>


  </body>
</html>

Ответ №1:

Возможно, браузер кэширует /static/img/aol.png ресурс, поэтому при повторном вызове checkServerStatus , даже если сервер не работает, браузер выдает вам ранее кэшированное изображение, которое загружается должным образом, в результате чего location.reload страница стирается.

Вы могли бы добавить строку запроса к src , чтобы гарантировать, что она загружается повторно каждый раз:

 img.src = "/static/img/aol.png?t="   Date.now();