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 🙂
Related Posts
About The Author
Ashesh
सयौ थुङ्गा फूलका हामी एउटै माला नेपाली, Welcome to my webpage. I'm from the Himalayan Country of Nepal. Well talking about me, I like mostly Web programming and Designing and furthermore I like Philosophical literature, Photography, Social networking. And I am Romantic and Sentimental person to some extent. Read more...
Leave a Reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Interesting. However I don’t quiet understand how this works, and how i could get it to work…
But what is the URL cargo.html?s=….. ?
And where is the reference to data.txt?