Archive

JavaScript ping host url server jquery plugin

So I have a couple dozens of servers running and since I am not a server guy, accidents happen all the time, so the way I normally find out that something is not running is when one of my users tells me.

I was looking at some of the up-time monitoring services, but was not really happy with any. All I need is a little widget that will check if all the servers are running and are not terribly slow.

Here is a live demo:

And here is the jquery plugin code:

/*

@fileoverview server ping tester
@author pirek@google.com (David Pirek)

// usage: 
$('#content').ping({
  sites: [
    {id: "google", url: "http://google.com"}
});

*/

(function ($, tmpl) {
  
  var truncate = function(string, length) {
    if (typeof string == "undefined" || string == null) {
      return "";
    }
    if (string.length < length) {
      return string;
    }
    return '<abbr title="' + string + '">' + string.substring(0, length) + ' &hellip;</abbr>';
  };

  $.fn.ping = function(op) {
    
    var defaults = {
      sites: [
        {id: "google", url: "http://google.com"}
      ],
      template: '<table>' +
        '{{each sites}}' +
        '<tr id="${id}">' +
          '<td class="url">${url}</td>' +
          '<td class="time">${time}</td>' +
          '<td class="server">${server}</td>' +
          '<td class="charSet">${charSet}</td>' +
          '<td class="message">${message}</td>' +
        '</tr>' +
        '{{/each}}' +
        '</table>',
      callBack: function(){},
      apiUrl: 'http://api.davidpirek.com/test/ping?url='
    };

    $.extend(defaults, op);

    return this.each(function() {

      var content = $(this),
          data = [],
          finishCount = 0

      // Build html table.
      content.html(tmpl(defaults.template, 
        {sites: defaults.sites}, 
        {truncate: truncate}));

      $.each(defaults.sites, function(i, d){
      
          var url = d.url,
              id = d.id;

          // JSONP call.
          $.ajax({
            dataType: "jsonp",
            url: defaults.apiUrl + url,
            jsonp: "callback",
            success: function (d) {
              
              // Element shortcuts.
              var messageWrp = $('#' + id + ' .message', content),
                  serverWrp = $('#' + id + ' .server', content),
                  charSetWrp = $('#' + id + ' .charSet', content),
                  timeWrp = $('#' + id + ' .time', content),
                  urlWrp = $('#' + id + ' .url', content);

              // Update table
              messageWrp.html(truncate(d.message, 20));
              serverWrp.html(truncate(d.server, 10));
              charSetWrp.html(d.charSet);

              // Mark if over 1s.
              if(d.time > 1){
                timeWrp.html(d.time.toFixed(2)).css('color', 'orange');
              } else {
                timeWrp.html(d.time.toFixed(2));
              }

              // Mark sucessful.
              if(d.isSucessful){
                urlWrp.css('color', 'green');
              } else {
                urlWrp.css('color', 'red');
              }

              finishCount++;

              // Create data obect.
              data.push({
                isSucessful: d.isSucessful,
                id: id,
                url: url,
                time: d.time.toFixed(2),
                message: d.message,
                server: d.server, 
                charSet: d.charSet
              });

              // Check if when last site was pinged.
              if(finishCount === defaults.sites.length){
                defaults.callBack(data);
              }
            }
          });
      });
    });
  };
}(jQuery, $.tmpl));

Now this plugin uses a server api, so here is the C# .NET MVC implementation:

        [JsonpFilter]
        public ActionResult httpTest2(string id)
        {
          string message = "sucess";
          string webUrl = Request.QueryString["url"];
          bool isSucessful = true;
          double timeTaken = 0; //TimeSpan timeTaken;
          string serverType = "";
          string charSet = "";
          string pageTitle = "";

          try
          {
            // Request.
            HttpWebRequest request = (HttpWebRequest)WebRequest.Create(webUrl);
            request.Method = "GET";
            request.Timeout = 3000;

            System.Diagnostics.Stopwatch timer = new Stopwatch();
            timer.Start();

            // Response.
            HttpWebResponse WebResp = (HttpWebResponse)request.GetResponse();

            serverType = WebResp.Server.ToString();
            charSet = WebResp.CharacterSet.ToString();

            timer.Stop();
            timeTaken = timer.Elapsed.TotalSeconds; // +timer.Elapsed.TotalMilliseconds.ToString() + "ms"; //.ToString("ss");

            Encoding enc = System.Text.Encoding.GetEncoding(1252);
            StreamReader loResponseStream = new
              StreamReader(WebResp.GetResponseStream(), enc);

            string Response = loResponseStream.ReadToEnd();

            loResponseStream.Close();
            WebResp.Close();



          }
          catch (Exception ex)
          {
            message = ex.Message;
            isSucessful = false;
          }

          return Json(new
          {
            isSucessful = isSucessful,
            message = message,
            time = timeTaken,
            server = serverType,
            charSet = charSet,
            pageTitle = pageTitle
          }, JsonRequestBehavior.AllowGet);
        }

Note that this action is using jsonp filter utility, which allows you to do cross domain client requests.

Comments: