Javascript: Check if server is online?

XMLHttpRequest does not work cross-domain. Instead, I'd load a tiny <img> that you expect to come back quickly and watch the onload event:

function checkServerStatus()
{
    setServerStatus("unknown");
    var img = document.body.appendChild(document.createElement("img"));
    img.onload = function()
    {
        setServerStatus("online");
    };
    img.onerror = function()
    {
        setServerStatus("offline");
    };
    img.src = "http://myserver.com/ping.gif";
}

Edit: Cleaning up my answer. An XMLHttpRequest solution is possible on the same domain, but if you just want to test to see if the server is online, the img load solution is simplest. There's no need to mess with timeouts. If you want to make the code look like it's synchronous, here's some syntactic sugar for you:

function ifServerOnline(ifOnline, ifOffline)
{
    var img = document.body.appendChild(document.createElement("img"));
    img.onload = function()
    {
        ifOnline && ifOnline.constructor == Function && ifOnline();
    };
    img.onerror = function()
    {
        ifOffline && ifOffline.constructor == Function && ifOffline();
    };
    img.src = "http://myserver.com/ping.gif";        
}

ifServerOnline(function()
{
    //  server online code here
},
function ()
{
    //  server offline code here
});

Here's how I achieved checking server availability using Fetch to manage the request and AbortController to handle a timeout within a Node.js application.

function checkServer(url, timeout) {
  const controller = new AbortController();
  const signal = controller.signal;
  const options = { mode: 'no-cors', signal };
  return fetch(url, options)
    .then(setTimeout(() => { controller.abort() }, timeout))
    .then(response => console.log('Check server response:', response.statusText))
    .catch(error => console.error('Check server error:', error.message));
}

Add to gilly3 answer

In practice, I found the need to use document.body.appendChild quite slow.

Although the question is about pure JavaScript, using some HTML will make that solution much faster.

So I am leaving this code here for anyone looking for speed.

<html>
<head>
    <title>Some page</title>
</head>

<body>
  <img src="https://myserver.com/ping.gif"  onload="pageOnline()" onerror="pageOffline()">

  <script>


  function pageOnline() {
    // Online code
  }

  function pageOffline() {
    // Offline code
  }
</script>
</body>
</html>

Tags:

Javascript

Recent Posts