EmailLinkedInGoogle+TwitterFacebook

Many a times engineers run into a complex issue of delivering acceptable user experience over varying network speeds. You tube is a great example of this use case. It measures available bandwidth and adjusts its video resolution. This it does automatically using its flash plugin. Unfortunately flash is a luxury many web engineers do not have. Such a feature is important for applications such as google maps where large number of image tiles are delivered to the browser. If browser could sense low connection speeds then it can adjust some of the features on the fly to prioritize the data fetch. Or it could even tell server only to send slightly lower resolution images. This is a complex problem because effective bandwidth available for a webpage will easily be affected with client side usage, server load and any network bottlenecks along the path. In any case being able to measure server latency dynamically will let a webpage behave in more friendly ways with its end user.

Here I am outlining a simple way to measure server latency. My solution is to host a standard image at your HTTP end point. For my demo I am using Lenna in her BMP avatar. Then measure the time it takes to get Lenna on the client side. Since you know exact data size it is trivial to compute server latency. To avoid the effect of client side caching that most browsers would do, I am using an intelligent dynamic url scheme that would still deliver same image as long as url fits a specific pattern. My example code uses a NodeJS server. However this service can obviously be implemented using any server side technology.

Here is the Demo [I might remove this live demo in the future...may be]

Server listens on PORT 3000, Serves a static home page and also serves the same Lenna.bmp for any requests matching URL pattern ‘**/checkimage/**’

var express = require('express');
var app = express();

app.configure(function(){
  app.use(express.static(__dirname + '/public'));
});

app.get('/', function(req, res){
  res.sendfile('index.html');
});

app.get('/checkimage/*', function(req, res){
  res.setHeader('Content-Type', 'image/bmp');
  res.sendfile(__dirname + '/public/image/lenna.bmp');
});

app.listen(3000);

Client has one big large blue button. Clicking that will call a javascript that will make an ajax request back to the server for Lenna’s picture. Here we are constructing the request URL in such a way that browser cache will not know it is the same data we are querying again and again.

    	function checkLatency(){
            testLatency("/checkimage/" + new Date().getTime(),
              function(latency){
                $('#latency').text(latency);
                $('#latencymodal').modal('show');
              },
              function(error){
                console.log(error);
              }
            );
    	}

      function testLatency(url,fnSuccess, fnError){
            var start = new Date().getTime();
            $.ajax({
              url: url,
              processData: false,
              contentType: "image/jpeg",
              method:"GET",
              success:function(data) {
                var end = new Date().getTime();
                fnSuccess(end - start);
              },
              error:function(error) {
                fnError(error);
              }
            });

      }
  

Finally we show the measured latency numbers on the webpage – along with Lenna’s picture.

server_latency

While method is not very scientific, it is guaranteed to give you an accurate measure of the response time you can expect from the server real time.Once you have the latency numbers with you proceed to decide whether the QoS is GOOD, BAD or UGLY, as defined by your application needs. On detecting a higher than acceptable latency application can either let the user know through a friendly message that things are a bit slow or can proceed to serve content appropriate for the connection speeds.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Post Navigation