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 :

C'est tendance
ça permet d'afficher la progression du test
Une technique n'en vaut pas une autre donc essayons quelque chose de moins répandu

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 :

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

Taille	500Ko	_
Temps	3000ms	1000ms (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 –

Discussion

Je recherche pour completer ce script le test de l'upload de bande passante, 22/03/2008 14:46:

Je recherche pr completer ce script le test de l'upload … bien sur en Javascript …

si quelqu'un a cette info je suis preneur .

Chargement en cours...

Tester votre bande passante avec XMLHTTPREQUEST

Principe de base

Scripts

Paramètres

Exemple

Sauter le test

Discussion