Search code examples
javascriptjsonflaskpostget

Need javascript to verify server is up and prevent page drop when it isn't

I have a server that drives displays in my house remotely. Currently it knows to update links by refreshing the page every 5minutes, but I noticed when the server is down it refreshes and wipes out the page. I want it to continue showing the last slide show until the server comes back up.

The code below seems to make the page go blank when the server dies and it returns when the server comes back up which is nice, but it destroys the slideshow so long as the server is down. It also doesn't execute the failed mode alert for some reason. Eventually I want to replace the alert with a small red box in the bottom right of the pictures, but currently I can't even get it to execute the alert code.

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>

Solution

  • It could be that the browser is caching the /static/img/aol.png resource, so when you call checkServerStatus again, even if the server is down, the browser gives you the prior cached image - which loads properly, resulting in location.reload, which wipes out the page.

    You might add a query string to the src, to ensure that it gets re-downloaded every time:

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