Checking someones bandwidth and loading content based on it

Question

I have seen a number of questions that don\'t answer this, is it possible to check someones bandwidth using java script and load specific content based on it?

The BBC se

Answer 1

1. Start a timer.
2. Send a AJAX request to your server, requesting a file of known size.
3. When the AJAX request's done loading, stop the timer, and calculate the bandwidth from the passed time and file size.

The problem with JavaScript is that users can disable it. (Which is more common on phones, that happen to be better off with smaller images)

Answer 2

I've knocked this up based on timing image downloads (ref: http://www.ehow.com/how_5804819_detect-connection-speed-javascript.html)

Word of warning though:

It says my speed is 1.81Mbps,

But according to SpeedTest.Net my speeds are this:

The logic of timing the download seems right but not sure if it's accurate?

Answer 3

Basically you do this like this:

• Start a timer
• Load an fixed size file e.g a image through an ajax call
• Stop the timer
• Take some samples and compute the average badwidth

Somethign like this could work:

//http://upload.wikimedia.org/wikipedia/commons/5/51/Google.png
//Size = 238 KB
function measureBW(cnt, cb) {
    var start = new Date().getTime();
    var bandwidth;
    var i = 0;
    (function rec() {
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open('GET', 'http://upload.wikimedia.org/wikipedia/commons/5/51/Google.png', true);

        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4) {
                var x = new Date().getTime() - start;
                bw = Number(((238 / (x / 1000))));
                bandwidth = ((bandwidth || bw) + bw) / 2;
                i++;
              if (i < cnt) {
                start = new Date().getTime();rec();
              }
                else cb(bandwidth.toFixed(0));
            }
        };
        xmlHttp.send(null);
    })();

}

measureBW(10, function (e) {
    console.log(e);
});

Not that var xmlHttp = new XMLHttpRequest(); won't work on all browsers, you should check for the UserAgent and use the right one

And of course its just an estimated value.

Heres a JSBin example

Answer 4

Well, like I said in my comments, you can choose 2 approaches:

1) You are in the context of a mobile app, then you can query the technology used by the device directly so you can notify the server directly what type (and size) of content you area able to render. I think phone gap can help you with accessing some of the native mobile API's using JavaScript.

2) The server-timer thing. You can "serve" some files yourself, lets say you have a magic file in your landing page, that, as soon as the client request the file, you grab this HTTP request with a custom handler. You "manually" serve the file by writing to the output stream, and you measure the bytes send and the time it took to reach the EOF, then you can somehow measure the bandwith. Combine this with the session cookie and you have this information per connected browser.