Manchmal benötigt man ohne großen Installations-Aufwand einen System Monitor, der die Antwortzeiten einer Web-Site überwacht und visuell sowie in auswertbarer Form bereitstellt.

Clipboard01.jpg

Antwortzeiten größer als 1500msec. werden gelb, Antwortzeiten größer als 5000msec. werden rot marktiert.

Das Polling geschieht mit einer Frequenz von 10sec. Ist ein Fehler (z.B. Timeout) aufgetreten, so wartet das Script 60sec. bis es überhaupt eine neue Anfrage abschickt.

# HTML für einfachen System-Monitor #

<html>
<head>
    <title>BargePoller</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>

    <style type="text/css" media="screen">
      body{ background:#000;color:#fff;font-size:.9em; }
      .msg{ background:#aaa;padding:.2em; border-bottom:1px #000 solid}
      .old{ background-color:#246499;}
      .wait{ background-color:#246499;}
      .new{ background-color:#3B9957;}
      .warn { background-color:yellow; color:black;}
      .error{ background-color:red; color:white;}
    </style>

<script type="text/javascript" charset="utf-8">
<!--//

    var dt = new Date();
    var urls = new Array();
    urls[1] = "/site/content/news/document_1_1/";
    urls[2] = "/site/content/concept/search_ger.html?searchform=1&raw=Lorem&option=AND&search_range=";
    urls[3] = "/site/content/concept/document_3_1/";
    urls[4] = "/site/content/documentation/";
    

    function randint(i) {
      return Math.floor(Math.random()*i);
    }

    function get_url() {
      return urls[randint(urls.length)];
    }

    function addmsg(type, msg){
        /* Simple helper to add a div.
        type is the name of a CSS class (old/new/error).
        msg is the contents of the div */
        var now = new Date();
        var msec = now.getTime()-dt.getTime();
        if (msec > 1500) {
          type = "warn";
        }
        if (msec > 5000) {
          type = "error";
        }
        $("#messages div").remove(
            ".wait"
        );
        $("#messages").prepend(
            "<div class='msg "+ type +"'>"+now+" "+msg+" (in "+msec+"msec.)</div>"
        );
    }

    function waitForMsg(){
        /* This requests the url When it complete (or errors)*/
        /* status.html */
        /* /site/content/concept/ */
        dt = new Date();
        $("#messages").prepend(
            "<div class='msg wait'>Waiting...</div>"
        );
        $.ajax({
            type: "GET",
            url: get_url(),

            async: true,
            cache: false,
            timeout:15000,

            success: function(data){
                addmsg("new", "SUCCESS");
                setTimeout('waitForMsg()',10000);
            },
            error: function(XMLHttpRequest, textStatus, errorThrown){
                addmsg("error", "ERROR: " + textStatus + " (" + errorThrown + ")");
                setTimeout('waitForMsg()',60000);
            },
        });
    };

    $(document).ready(function(){
        waitForMsg(); /* Start the inital request */
    });

//-->
</script>
</head>
<body>
    <div id="messages">
        <div class="msg old">
            BargePoll message requester!
        </div>
    </div>
</body>
</html>