Skip to content

Detect connection speed with JavaScript

Recently i created JavaScript application which tests user connection speed, in fact it measures connection speed between user and my server, but that aside, i decided to share with you mechanics and technology i used to create this tool, maybe some of you guys will find this helpful. Also i want to promote interesting small AJAX framework :).

Before we start, you need to have basic idea of what AJAX is, if you need to you can read my Introduction to AJAX post. Also, this time instead of creating all functions by myself i used advAJAX, it is lite (only 15kB) and very easy to use AJAX framework, created by Polish web developer who goes by the name Anakin. You can download it here. Full english documentation can be found here.

JavaScript connection speed basics

Measuring connection speed is very easy, you only need to download some file from the internet, check how much time did it took and then divide file size by time needed to download file. We will do exactly the same in three steps: when user clicks (let’s call it “test connection speed”) buttonf we will read timestamp with JavaScript and save it to variable time1, next advAJAX will download file from the server, it can be just about any file, however do not make it to big, 200kB is just enough. Third step starts when the file download finishes, than we have to again read timestamp (and save it as time2).

Well actually, there is also fourth step, we need to calculate connection speed and there are few things that you should keep in mind when doing this:

  • difference between time2 and time1 will be in miliseconds, so you have to multiply it by 1000 to get number of seconds needed to download file
  • common connection speed unit is kbps (kilo bits per second), in our example we will use kBps which stands for kilo bytes per second. If you do not know what is the difference between them checkout wikipedia for more information.
  • we are not really measuring real connection speed because, final result is affected by many other factors, but it still will be a pretty good estimation

JavaScript connection speed example

Here is full source code. after clicking check button function is executed and whole process of testing connection speed starts, it goes like i described earlier: read timestmp, download file, read timestamp, calculate and display results. You maybe also wondering why i used advAjax instead of some known AJAX library, and the reason for this is that advAJAX has built in custom event: onProgress, which passes three arguments to the function; obj: AJAX object, intReceived: number of bytes downloaded, intTotal: total number of bytes to download, nice, right? :) Unfortunately onProgress event works only with FireFox and Opera.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="advajax.js"></script>
<script type="text/javascript">
var time1;  
var bytesLoaded = 0;  
function test() 
{
    var d = new Date;
    time1 = d.getTime();
 
    advAJAX.get({
        url : 'cargo.html?s='+time1,
        onComplete : function(obj) 
	{
	    var d = new Date;
	    var time = Math.round((d.getTime()-time1)/10)/100;
	    var connSpeed = Math.round(bytesLoaded/time/1000);
 
	    alert("Total time: \t\t\t"+time+" second"+
		"\nTotal bytes: \t\t\t"+bytesLoaded+" bytes"+
		"\nConnection speed: \t"+connSpeed+" kBps");
 
	},
        onProgress : function(obj, intReceived, intTotal) 
	{
            var completed = Math.round(intReceived/intTotal*100)+"%";
	    bytesLoaded = intTotal;
	    var prog = document.getElementById('progress');
	    prog.innerHTML += completed+"\n";
	}
});
}    
</script>
 
</head>
	<body>
		<button onclick="test()">Test</button>
		<div id="progress" style="width:200px; border:thin solid black; overflow:scroll; height:200px;"></div>
	</body>
</html>

In last tutorial i promised full source code for download to every tutorial, however this time full source code is already on screen, just download advAjax, copy and paste code above to new file, create data.txt and fill it with random content. Remember to keep all files in the same directory and … have fun with it :)

Published inGeneral

14 Comments

  1. Anwar Anwar

    Hi,

    The link to download the advAjax is broken.

    Thank you for sharing your valuable work, I really like your website

  2. This worked great in FF and Safari, but didn’t work in IE6/7.

    ‘bytesLoaded’ is undefined

    is what comes up.

  3. This code looks great, but I can not find any place to acquire the advAjax download. Every link I find online to download it seems to be broken. Is it no longer available?

    Maybe I can make the principles of your code work with jQuery instead. I’m just not sure what function jQuery has that can substitute the “onProgress” function of advAjax, but it looks like I can just omit that.

  4. Narendra Narendra

    Hi guys,
    Thanks for nice tutorial. One small question – how we can find out connection type ( ie dial up, broadband or DSL etc) using JavaScript.

  5. That’s a nice tip, thanks for sharing.

  6. Hello,

    Does it mean that we can use the script to check the connection speed of the user? So, we can select which things o our website to load , depending on the individual connectivity.

  7. I can’t see how this is going to end up.

  8. I did like the article really much, was really informative and the best part was that only the required part was elaborated, to the point concise information always helps and keeps readers running around digging for the information’s will never require a reread. I really wish spammers read these articles and check how easy it is to be human and respect knowledge.

  9. Shirish Shirish

    What if in another tab I am watching live streaming of Cricket match and one Torrent download and one Torrent upload is going on ?

    Will it still give you the really Approx measurement ? or We need to give a User Pop up ‘Please close all http connections for checking your internet speed” ?

  10. Hmm, good question, i am not networking expert, but i believe you will have to ask user to close all other windows.

  11. Chris Chris

    Hi Guys
    could you share source and documentation?
    both links are broken

  12. prabu prabu

    Not a good answer…
    advajax.js is not found first you provide the js file and carry on..

  13. Ad Ad

    since it’s been 2 yrs since thread was not been active, I am not sure if someone can help me. But I still thought I should ask.

    1. where do I download advAjax from?
    2. what part of the script is calling “data.txt”

    thanks,

Leave a Reply

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