Minimal server online status checker (HTML/JavaScript)

Starbuck, noooooo!

Above is an example of a nifty server status script I have been using in a recent project.

Here is the base code for monitoring a web server:

<img src="http://site-to-check.com/online.png" alt="status" onerror="this.src='files/offline.png'" />

The setup is:

  • An online icon (online.png) on the remote server you want to see the status of.
  • An offline icon (offline.png) on the server that is going to show the status page.

If the image on the remote server fails to load, the onerror event is triggered and the javascript rewrites the image tag to show the offline image. You can use relative or absolute paths for the offline image. This snippet is fully compatible with all major browsers, including Internet Explorer down to version 5.5!

Demo
Click here for a demo.

Resources
Below are the images I use, found on Clker, an excellent online clipart resource.

Online
Offline

Participate
If you find this useful or have any suggestions for improving it, feel free to write in the comments!

Advertisements
Explore posts in the same categories: Computers, Development, Programming, Technical solutions, Tutorials

Tags: , , , , , , , , , , , ,

You can comment below, or link to this permanent URL from your own site.

11 Comments on “Minimal server online status checker (HTML/JavaScript)”

  1. Chri Wall Says:

    And if you want statistics on that as well?

    • khromov Says:

      Then you’re probably looking for a full-fledged monitoring service like Pingdom and not a script that is literally 11 characters long. 🙂

      • Chri Wall Says:

        Correct answear is:

        Where offline.php serves up:

        Easy fix 😉
        The code now allows to register how many times a website has been down when a user has requested it.

  2. Chri Wall Says:

    Comments removes code…

    Jesus!

  3. Chri Wall Says:

    <?php$im = imagecreatefrompng("test.png");header('Content-Type: image/png');imagepng($im);imagedestroy($im);?>

  4. Chri Wall Says:

    Correct answear is:

    <img src="http://site-to-check.com/online.png" alt="status" onerror="this.src='files/offline.php'" />

    Where offline.php serves up:

    <?php//Code to register website down count//Serve up image$im = imagecreatefrompng("offline.png");header('Content-Type: image/png');imagepng($im);imagedestroy($im);?>

    Easy fix! 😉

    The code now allows to register how many times a website has been down when a user has requested it.

    • khromov Says:

      Hi!

      Posting code in comments isn’t easy on WordPress.com – Pastebin is a good resource for this.

      There are’s some basic problems with your suggestion:

      First – the snippet is PHP, a server-based technology which has prequisites on the hosting environment.

      Second – it doesn’t actually register anything, as you provide no code for it, just a shell for serving up an image via PHP.

      Third – You can get this information from your web server logs without any additional code, should you need it. Generally though, you’re not interested in how many people couldn’t access your site, but rather how long it has been down.

      • Chri Wall Says:

        Response:

        First – Yes, it would indeed require prequisites. I can’t come to think of a way that would not need prequisites.

        Second – I left that blank so that the implementer could specify their prefered way of registering it. Just plain text output to a local file, database insertation or E-mail to name a few of the alternatives.

        Third – How would you achieve to see when a remote server is down through local serverlogs? If you mean by checking the amount of offline.png requests there are that is true. Although since you brought up prequisites the website has to be set up to monitor that. A common tendency on default setups is to remove old logs.

        I do agree that the frequency and duration of actual downtime is more interesting than the amount of users that could not access a resource – hence my outbreak!

  5. Alex Says:

    Thank you, kind man!
    This quick’n’simple approach is something that I’m looking for!

  6. Cavier Says:

    And now we have CDN which render this hard.


  7. What’s Going down i’m new to this, I stumbled upon this I’ve found It absolutely useful
    and it has helped me out loads. I’m hoping to contribute & assist different customers like its helped me.
    Good job.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s