Ping en JavaScript (jQuery.ajax)

Dans cet article, nous allons décou­vrir un moyen de vous faire gagner du temps à tra­vers deux notions étran­gères à la Bio­lo­gie : Le ping et Ajax. Pour les termes tech­niques, repor­tez vous au glos­saire juste après l'introduction.

Mesu­rer le délai entre un ser­veur et un client web (on uti­li­se­ra faci­le­ment angli­cisme "ping", fran­ci­sé en "pin­guer") d'un site consiste à lui deman­der juste l'en-tête de sa page prin­ci­pale (afin de dimi­nuer l'impact du poids du site) et à mesu­rer le temps pas­sé pour rece­voir la réponse. En com­pa­rant les temps de réponse de plu­sieurs miroirs d'un site, cette astuce vous don­ne­ra l'accès au miroir le plus rapide, qui peut varier selon l'ordinateur et la loca­li­sa­tion. Quelle uti­li­té ? Sup­po­sons que je veuille télé­char­ger un mil­lier de records sur une base de don­nées et que le télé­char­ge­ment de 1 record prend envi­ron 100ms. Si le temps de réponse est de 200ms, je vais mettre 300ms pour obte­nir 1 record, donc 5 min (1000 x 300ms) pour tout télé­char­ger. Si par contre j'ai sélec­tion­né un miroir avec un temps de réponse de 700 ms, le télé­char­ge­ment total passe a 13 min (1000 x 800ms). Ce n'est rien si vous devez le faire une seule fois mais cela peut abou­tir a une grosse dif­fé­rence de temps si vous avez plus de don­nées a télé­char­ger ou que vous deviez le faire plu­sieurs fois.

En pers­pec­tive, ceci peut ser­vir à faire une inter­face web qui doit char­ger des don­nées depuis d'autres sites (ex : D.A.S.) ou sim­ple­ment choi­sir le genome brow­ser qui répond le plus vite.

Obser­va­tion : Sou­vent les web­ser­vices popu­laires héber­gés aux USA sont calmes le matin et satu­ré l'après-midi (GMT, rai­son­ne­ment inverse pour les ser­veurs asia­tiques), cette astuce per­met de bas­cu­ler sur un miroir  sans avoir à les éva­luer manuel­le­ment.

Glos­saire

- HTML : lan­gage tex­tuel de mise en forme en uti­li­sant des balises. Sert prin­ci­pa­le­ment à implé­men­ter l'ossature d'un site web (appa­ren­té à XML, la par­tie ML mar­kup lan­guage signi­fie que c'est un lan­gage à balise).

- le ping est le temps de réponse entre deux machines d'un réseau. Par exemple entre votre ordi­na­teur per­son­nel et un ser­veur dis­tant (le réseau étant prin­ci­pa­le­ment Inter­net).

- JavaS­cript est un lan­gage de pro­gram­ma­tion mas­si­ve­ment uti­li­sé dans le monde du Web, ce serait d'ailleurs le lan­gage web le plus uti­li­sé (exé­cu­té sur les pro­ces­seurs).

- Ajax est une méthode pour effec­tuer des échanges entre un navi­ga­teur web (coté client, vous) et un ser­veur. Cette méthode per­met de rafraî­chir le conte­nu d'un site que l'utilisateur inter­vienne ou non, pour gagner en dyna­misme. Nous n'utiliserons que par­tiel­le­ment les pos­si­bi­li­tés d'Ajax.

- jQue­ry est une biblio­thèque de JavaS­cript pra­tique : elle allège consi­dé­ra­ble­ment la nota­tion et rend le code plus clair.

- Site miroir d'un autre site : héberge le même conte­nu. Ces clones servent à pal­lier à la fai­blesse du réseau Inter­net afin de désen­gor­ger les sites. Exemple, la liste des miroirs de l'UCSC.

- D.A.S. : docu­ments dis­po­nibles sur un site, sur un ser­veur don­né, qu'on uti­lise ailleurs (pistes de visua­li­sa­tion d'un genome brow­ser Ensem­bl…)

- genome brow­ser : visua­li­sa­teur de génome, ici il s'agit d'un site web per­met­tant de visua­li­ser un génome et lui faire cor­res­pondre des don­nées trans­crip­to­miques, pro­téiques et autres -omics.

- génome : ensemble de mor­ceaux d'ADN qui signi­fient plus ou moins quelque chose (je ne peux être plus pré­cis). Pour faire simple, c'est l'ensemble des gènes (frac­tion d'ADN plus ou moins défi­nie, la défi­ni­tion dépend des écoles de pen­sées en Bio­lo­gie).

Aperçu de JavaScript/​jQuery

Pour­quoi s'orienter vers le JavaS­cript ? Essen­tiel­le­ment pour sa légè­re­té et son déploie­ment très facile, il s'exécute dans les navi­ga­teurs web (modernes) sans ins­tal­la­tion par­ti­cu­lière.

L'idée étant de tes­ter le temps de réponse des ser­veurs par rap­port à votre machine, c'est à elle de faire le bou­lot (et si ça peut se faire avec un mini­mum d'efforts, ce n'est que mieux).

Afin de démar­rer petit, com­men­çons par le com­men­ce­ment : une page HTML ! Elle va nous ser­vir à poser un cadre sur lequel nous allons mettre des élé­ments (liens vers les sites) que nous modi­fie­rons à loi­sir grâce à javas­cript.

Code HTML basique :

Code jQue­ry simple (si si, il n'y a que deux boucles et pas de récur­sion).

Pour apprendre en jouant en direct : http://​jsfiddle​.net/​F​H​W​Z​c​/​58/

Explications sur le code javascript :

Par défaut, il ne se passe rien, il faut cli­quer pour lan­cer les requêtes. Si vous vou­lez tout auto­ma­ti­ser, il va fal­loir se remon­ter les manches…  mais d'abord, fai­sons ensemble le tour de ce code :

Cette expres­sion jQue­ry per­met de sélec­tion­ner le bou­ton (si vous n'êtes pas fami­lier avec jQue­ry, mémo­ri­sez "$" comme "Sélec­tion") d'après son iden­ti­fiant "test".

Ceci cor­res­pond à une boucle "for" qui va, sur chaque élé­ment (DOM, consti­tuent le HTML) "div" appli­quer le bloc qui suit…

Remarque : À chaque div cor­res­pond une et une seule adresse URL (ou adresse IP, selon ce que vous avez sous la main).

Après avoir décla­ré quelques variables (ni Python ni PHP ici, soyez gen­tils et décla­rez bien vos variables), avec les men­tions "var", voi­ci la par­tie qui fait tout le tra­vail :

L'idée du ping est de mesu­rer le temps (chro­no­mé­trer) mis par le ser­veur cible pour répondre à une demande toute simple.

1. Prendre l'heure ($.now() retourne en effet l'heure, expri­mée en seconde), c'est le "top départ".
2. Effec­tuer une requête ajax (détail plus bas).
3. Mesu­rer la dif­fé­rence de temps mis pour effec­tuer la requête pré­cé­dente.
4. Si le temps n'est pas aber­rant (ce code n'est pas opti­mal mais péda­go­gique, une fois sur deux le cal­cul de la dif­fé­rence ne se fait pas bien), faire :
5. Cal­cu­ler la moyenne (avg : ave­rage : moyenne) au fur et à mesure de la boucle.
6. Chan­ger la cou­leur du texte selon la valeur de la moyenne :

• La cou­leur change en direct, c'est amu­sant.
• Ces valeurs seuils sont com­plè­te­ment arbi­traires et assez sub­jec­tives.
• Cette par­tie peut être chan­gée de manière à sélec­tion­ner l'adresse qui répond le plus vite.
• entre paren­thèses, le nombre de tests consi­dé­rés pour le cal­cul de la moyenne (sou­ve­nez-vous qu'une moyenne (arith­mé­tique) ne signi­fie RIEN sans dimen­sion).

Explications sur le code Ajax :

Fonc­tion ajax : c'est la méthode qui per­met d'envoyer une requête au ser­veur (plus de détails : http://​api​.jque​ry​.com/​j​Q​u​e​r​y​.​a​j​ax/).

Le type : en décla­rant "HEAD", vous faites une décla­ra­tion de non-agres­sion au ser­veur cible : cela signi­fie que l'on ne demande que l'en-tête de la page à l'adresse appe­lée. Rien de plus (on a pas besoin d'en savoir davan­tage pour esti­mer si un ser­veur est en carafe ou de bonne humeur).

url : l'adresse de la cible, ce que vous avez ren­sei­gné dans le code HTML comme valeur du div en cours de trai­te­ment

cache : faux car on ne fait que pas­ser (et nous repas­se­rons plu­sieurs fois) en "coup de vent"

com­plete : Une fois la requête effec­tuée, pas­ser à la suite du bloc.

Il existe d'autres clauses suc­cess, error, timeout, sta­tus­Code… voyez donc *la docu­men­ta­tion* pour agré­men­ter cette par­tie selon votre volon­té (comme gri­ser une adresse qui n'est pas dis­po­nible).

Amé­lio­ra­tion : Char­ger les infor­ma­tions depuis un fichier de confi­gu­ra­tion, exemple avec un json :

Pour chaque site, une liste de miroir(s). "(s)" car vous pou­vez très bien ne mettre qu'une adresse dont vous vou­lez sim­ple­ment esti­mer l'état.

Ver­sion qui change le lien prin­ci­pal : 1 ligne à ajou­ter au HTML + un petit bout de code jque­ry : http://​jsfiddle​.net/​F​H​W​Z​c​/​59/

NB : pen­sez bien à décla­rer best_​ping AVANT le $.each

NB : d'une ver­sion "à la carte" à l'autre, le code s'alourdit coté JavaS­cript, mais traite une quan­ti­té vir­tuel­le­ment infi­nie de don­nées.

Installation/​Déploiement

En deux étapes  simples :

Créer une page (x)html sur votre ordi­na­teur (dans vos dos­siers per­son­nels par exemple) et inclure le code JavaS­cript sous la forme d'un fichier .js (ou dans des balises <script>, à vous de voir).

Mettre un favo­ri sur ladite page (ou mieux, la mettre en page de démar­rage du navi­ga­teur).

Problèmes connus :

Lorsqu'il n'y a aucun résul­tat à affi­cher, les temps de réponse sont trop long.

Met­tez un miroir à 127.0.0.1 dans votre code et vous serez sur­pris : cette IP est sen­sée être celle du ser­veur local, on s'attend à un ping nul…

Pour chaque adresse, pré­ci­sez le pro­to­cole ! IPv6 semble coin­cer, quelqu'un sait-il pour­quoi ?

Uti­li­sa­teurs de chrome, vous ne pou­vez pas uti­li­ser ce site en local (en appe­lant par file://), il faut l'appeler par http.

Mer­ci aux relec­teurs wocka, bun­ny, frval­lee, MoUs­SoR, nahoy, ZazoOo pour leur aide, patience et conseils avi­sés.