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 .

Léon Bérelle, 21/06/2009 20:56:

Bonjour,

J'ai un problème que je n'arrive pas à résoudre avec votre script :

→ Le script ne fonctionne pas lorsque le fichier “testfile.tmp” est sur un autre site (j'ai bien mis l'adresse complète dans la variable fichier) Par contre le script fonctionne quand le fichier de test est à un autre endroit de l'arborescence du même site.

PS : j'ai mis le fichier ici : http://leon3d.free.fr/Test/testfile.tmp

Si vous pouviez m'aider, merci d'avance.

iDo_, 22/06/2009 08:46:

Le XMLHTTPREQUEST ne fonctionne pas en crossdomain. Ce qui signifie qu'il ne peux appeler des fichiers uniquement si ceux si sont sur le même nom de domaine que le script javascript.

dZastreux (Fabrice), 17/09/2009 05:00:

Salut et merci pour cette source. Un gros regret toutefois, ça ne marche pas avec Internet Explorer 7 : “Impossible d'effectuer l'opération à cause de l'erreur suivante : C00ce514” …Un message d'erreur des plus clairs, comme d'habitude avec ces “regarde-par-la-fenêtre” de chez MS ! Je ne suis pas très familier avec Ajax et autres XMLHttpRequest mais cette méthode m'aurait franchement dépannée, si seulement elle avait pu fonctionner sur IE 6,7 et 8 en plus de Firefox…

J'ai bien essayé quelques trucs en vain, comme par exemple:

if(window.ActiveXObject) { // Internet Explorer

   var aXMLHTTP = new Array("Msxml2.XMLHTTP.7.0","Msxml2.XMLHTTP.6.0","Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0",
                            "MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP"); 
   for (var i = 0; i < aXMLHTTP.length &&!success; i++) {
        try {	xhr_object = new ActiveXObject(aXMLHTTP[i]);
        } catch (ex) {
       alert("Votre version d'Internet Explorer ne supporte pas les objets XMLHTTPRequest... Essayez FireFox ?");
        }
   }

}

…Mais ça n'a pas servi à grand chose… Apparamment, ça ne bloque pas à cet endroit-là , mais sur le : if (methode == “GET” && data != null) {

   page += "?"+data;
   data = null;

}

Si on remplace ”?” par sa version URLencode (%3F), on n'a plus l'erreur, mais bon, le code ne marche pas pour autant (les bytes de “data” ne sont plus passés par le GET… ) Je n'ai qu'une chose à dire de plus : “AU SECOURS !!”

dZastreux (Fabrice), 17/09/2009 05:50:

Rectificatif : En fait, le code fonctionne bien, même avec IE7, MAIS pourvu que le contenu du fichier téléchargé soit du texte (!) En effet, lors de mes premiers tests, j'avais utilisé une image ( un .JPG servant de bannière, faisant ainsi d'une pierre deux coups puisque je pouvais estimer grossomodo la bande passante du client tout en récupérant des données qu'il me fallait de toute façon télécharger… ) Ce procédès fonctionne parfaitement sous Firefox avec des fichiers de tous type, mais, donc, en revanche, il semblerait qu'il soit nécessaire d'utiliser un fichier de type texte pour que IE7 accepte convenablement l'envoi et la récupération de “bytes” (Vraiment, du coup ?) avec XMLHttpRequest Je reste preneur de toute info complémentaire ou de toute astuce à ce sujet… Encore merci !

Chargement en cours...

Tester votre bande passante avec XMLHTTPREQUEST

Principe de base

Scripts

Paramètres

Exemple

Sauter le test

Discussion