Click here to Skip to main content
13,046,474 members (72,108 online)
Click here to Skip to main content
Add your own
alternative version

Stats

37.8K views
17 bookmarked
Posted 21 Dec 2007

Bandwidth Meter for Web Application

, 22 Dec 2007
Rate this:
Please Sign up or sign in to vote.
Create a bandwidth meter using JavaScript to measure network bandwidth.

Introduction

This article describes how to create a bandwidth meter to measure the network speed for your web application.

Background

One of our clients requested to have a bandwidth meter for his web application. It was a big challenge to make a bandwidth meter in a browser. After thinking for several hours, I got an idea to make it using JavaScript. In this article, I will share my code to make a bandwidth meter using JavaScript.

Using the code

When a page is rendered to the browser, a stream of text is sent from the server. I used JavaScript and measured the time to transfer some dummy text. I then convert this time into a bandwidth measurement.

Below are the steps to create a bandwidth meter using JavaScript:

  1. Get the starting time before transferring dummy text:
  2. <script language="javascript" type="text/javascript"> 
       time = new Date();
       time1 = time.getTime();
    </script>
  3. Transfer a dummy text of 45000 bytes in the HTML comment tag. We use this text to measure the time to transfer 45000 bytes to the browser.
  4. <!-- Dummy Text to measure transfer speed -->
    <!-- Place dummy text of 45000 bytes (sample included in attachment)-->
  5. Here comes the real stuff. We have the start time before transferring the 45000 bytes, and the current time. We calculate the time difference to get the time taken to transfer 45000 bytes. Using this time difference, we calculate the actual bandwidth used to transfer 45000 bytes. That's it; now you are done with your own bandwidth meter :)
  6. <script language="javascript" type="text/javascript"> 
       time = new Date();
       time2 = time.getTime();
       ttime = time2 - time1;
    
         if (ttime == 0)
            ttime = .1;
    
       ttime = ttime / 1000; //thousand mili seconds
       kbps = 45 / ttime;
       kbps = kbps * 8; // multiply by 8 to make kiloBITS instead of kiloBYTES
       kbps = Math.round (kbps);
       document.getElementById("lblBandwidth").innerHTML=kbps + " kbps"; 
    </script>

History

  • 22 December, 2007: Initial version.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Ritesh Sutaria has about 7+ years of IT experience on various technologies like ASP.net, PHP, VB, Oracle, PGSql, Sql Server. He has worked on various platforms including Windows, Linux. He has a powerfull problem solving skills which actually makes complex problems into simple problems.

You may also be interested in...

Pro
Pro

Comments and Discussions

 
GeneralMy vote of 1 Pin
Nasir Razzaq13-Feb-10 7:26
memberNasir Razzaq13-Feb-10 7:26 
QuestionBandwidth is based on the time? Pin
Michael Sync21-Dec-07 23:48
memberMichael Sync21-Dec-07 23:48 
AnswerRe: Bandwidth is based on the time? Pin
Jcmorin22-Dec-07 2:56
memberJcmorin22-Dec-07 2:56 
AnswerRe: Bandwidth is based on the time? Pin
Ritesh Sutaria22-Dec-07 9:54
memberRitesh Sutaria22-Dec-07 9:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170713.1 | Last Updated 22 Dec 2007
Article Copyright 2007 by Ritesh Sutaria
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid