Table des matières
Niveau
..........
En rapport...

Tester votre bande passante avec XMLHTTPREQUEST

On pourrait se demander pourquoi utiliser AJAX pour tes

ter la bande passante…
Plusieurs réponses :

Principe de base

Pour tester la bande passante, on va charger un fichier et faire une moyenne en fonction de temps de ce téléchargement.
Par exemple :

  1. On note l'heure exacte (en milliseconde)
  2. On lance le téléchargement d'un fichier de 500Ko (soit 512000 octets)
  3. On note l'heure exacte de fin de téléchargement (en milliseconde)
  4. On soustrait l'heure de début à l'heure de fin (on obtient par exemple 3000 milliseconde)
  5. Il ne reste plus qu'à faire un produit en croix :
Taille500Ko _
Temps3000ms1000ms (soit 1s)

Et on obtient : (500*1000)/3000 = 166.6 ko/s
Evidement ce test fluctut en fonction de l'occupation de votre bande passante (si vous téléchargez, regardez des vidéo en streaming, etc.)

Scripts

Voici un script qui va tester votre bande passante tout en affichant la progression du test :

javascript
function AJAXRequest(page,retfonc,startload,progress,methode,data) {
	var xhr_object = null;
	if(window.XMLHttpRequest) // Firefox
		xhr_object = new XMLHttpRequest();
	else if(window.ActiveXObject) // Internet Explorer
		xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
	else { // XMLHttpRequest non supporté par le navigateur
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
		return;
	}
	if (data=="")
		data=null;
	if(methode == "GET" && data != null) {
		page += "?"+data;
		data = null;
	}
	xhr_object.open(methode, page, true);
	xhr_object.onreadystatechange = function() {
		if(xhr_object.readyState == 4) {
			var RetAjax=xhr_object.responseText;
			eval(retfonc+'(RetAjax);');
		}
		if(xhr_object.readyState == 1) {
			eval(startload+'();');
		}
		if(xhr_object.readyState == 3) {
			var RetAjax='';
			if (!document.all)
				var RetAjax=xhr_object.responseText;
			eval(progress+'(RetAjax);');
		}	
	}
	if(methode == "POST")
		xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhr_object.send(data);
}
 
function testBp() {
	avant=new Date();
	avant=avant.getTime();
	AJAXRequest(Fichier,"ApresAjax","StartAjax","ProgressAjax","GET",avant);
}
 
 
function StartAjax() {
	document.getElementById('loading_bar').style.width="0px";
}
function ProgressAjax(v) {
	if (v=='')
		var percent=parseInt(document.getElementById('loading_bar').style.width)+10;
	else
		var percent=Math.round((v.length*parseInt(document.getElementById('loading').style.width))/TailleImg,0);
	document.getElementById('loading_bar').style.width=percent+"px";
}
function ApresAjax(v) {
	document.getElementById('loading_bar').style.width=document.getElementById('loading').style.width;
	apres=new Date();
	apres=apres.getTime();
	duree=apres-avant;
	debit=Math.round( (TailleImg/(apres-avant) ) *10 ) /10;
	document.getElementById('resultBp').innerHTML="duree="+duree+"ms debit="+debit+"Ko/s";
}
 
var avant;
var TailleImg=852907;
var Fichier="testfile.tmp";

Et pour la mise en forme, il vous faut le code HTML suivant :

html4strict
<body onload="testBp()">
<div id="loading" style="display:block;height:50px;width:300px;border:1px solid #000;overflow:hidden">
	<div id="loading_bar" style="display:block;height:50px;width:0px;background:#0000CD">
 
	</div>
</div>
<div id="resultBp"></div>
<a href="javascript:testBp();" style="display:block;border:1px solid #000;background:#efefef">Tester la bande passante</a>

Paramètres

Il n'y a que très peu de choses à changer dans ce script.
Vous devez simplement modifier ces 2 variables :

javascript
var TailleImg=852907;
var Fichier="testfile.tmp";

La 1ere est la taille en octet du fichier choisi pour les tests
La 2eme est le nom du fichier.

Vous pouvez voir la taille en octets d'un fichier en faisant :
Bouton droit, <propriété> sur le dit fichier.
A noter que plus le fichier est gros, plus le test est précis (mais la durée augmente d'autant…)

Exemple

Vous pouvez tester ce script sur notre pages d'évaluation de votre bande passante

Sauter le test

Vous pourriez être amené à proposer à vos visiteurs de “sauter” le test de leur connexion et leur permettre ainsi de choisir directement s'il ont une connexion haut debit ou bas debit. Il suffit pour cela de remplacer la ligne suivante:

javascript
debit=Math.round( (TailleImg/(apres-avant) ) *10 ) /10;

par celle ci:

javascript
debit=(debit==0)?(Math.round( (TailleImg/(apres-avant) ) *10 ) /10):debit;

Ensuite, vous pouvez appeler la fonction ApresAjax :

html4strict
<a href="javascript:debit=5;Apresajax('');">Forcer un bas debut</a>
<a href="javascript:debit=500;Apresajax('');">Forcer un haut debut</a>



04/12/2006 15:42 -

iDo –