Astuce :
Ping en JavaScript (jQuery.ajax)

Dans cet article, nous allons découvrir un moyen de vous faire gagner du temps à travers deux notions étrangères à la Biologie : Le ping et Ajax. Pour les termes techniques, reportez vous au glossaire juste après l'introduction.

Day 6/365 | SuperFantastic

Day 6/365 | SuperFantastic

Mesurer le délai entre un serveur et un client web (on utilisera facilement anglicisme "ping", francisé en "pinguer") d'un site consiste à lui demander juste l'en-tête de sa page principale (afin de diminuer l'impact du poids du site) et à mesurer le temps passé pour recevoir la réponse. En comparant les temps de réponse de plusieurs miroirs d'un site, cette astuce vous donnera l'accès au miroir le plus rapide, qui peut varier selon l'ordinateur et la localisation. Quelle utilité ? Supposons que je veuille télécharger un millier de records sur une base de données et que le téléchargement de 1 record prend environ 100ms. Si le temps de réponse est de 200ms, je vais mettre 300ms pour obtenir 1 record, donc 5 min (1000 x 300ms) pour tout télécharger. Si par contre j'ai sélectionné un miroir avec un temps de réponse de 700 ms, le téléchargement total passe a 13 min (1000 x 800ms). Ce n'est rien si vous devez le faire une seule fois mais cela peut aboutir a une grosse différence de temps si vous avez plus de données a télécharger ou que vous deviez le faire plusieurs fois.

En perspective, ceci peut servir à faire une interface web qui doit charger des données depuis d'autres sites (ex: D.A.S.) ou simplement choisir le genome browser qui répond le plus vite.

Observation : Souvent les webservices populaires hébergés aux USA sont calmes le matin et saturé l'après-midi (GMT, raisonnement inverse pour les serveurs asiatiques), cette astuce permet de basculer sur un miroir  sans avoir à les évaluer manuellement.

Glossaire

- HTML : langage textuel de mise en forme en utilisant des balises. Sert principalement à implémenter l'ossature d'un site web (apparenté à XML, la partie ML markup language signifie que c'est un langage à balise).

- le ping est le temps de réponse entre deux machines d'un réseau. Par exemple entre votre ordinateur personnel et un serveur distant (le réseau étant principalement Internet).

- JavaScript est un langage de programmation massivement utilisé dans le monde du Web, ce serait d'ailleurs le langage web le plus utilisé (exécuté sur les processeurs).

- Ajax est une méthode pour effectuer des échanges entre un navigateur web (coté client, vous) et un serveur. Cette méthode permet de rafraîchir le contenu d'un site que l'utilisateur intervienne ou non, pour gagner en dynamisme. Nous n'utiliserons que partiellement les possibilités d'Ajax.

- jQuery est une bibliothèque de JavaScript pratique : elle allège considérablement la notation et rend le code plus clair.

- Site miroir d'un autre site : héberge le même contenu. Ces clones servent à pallier à la faiblesse du réseau Internet afin de désengorger les sites. Exemple, la liste des miroirs de l'UCSC.

- D.A.S. : documents disponibles sur un site, sur un serveur donné, qu'on utilise ailleurs (pistes de visualisation d'un genome browser Ensembl...)

- genome browser : visualisateur de génome, ici il s'agit d'un site web permettant de visualiser un génome et lui faire correspondre des données transcriptomiques, protéiques et autres -omics.

- génome : ensemble de morceaux d'ADN qui signifient plus ou moins quelque chose (je ne peux être plus précis). Pour faire simple, c'est l'ensemble des gènes (fraction d'ADN plus ou moins définie, la définition dépend des écoles de pensées en Biologie).

 

Aperçu de JavaScript/jQuery

Pourquoi s'orienter vers le JavaScript ? Essentiellement pour sa légèreté et son déploiement très facile, il s'exécute dans les navigateurs web (modernes) sans installation particulière.

L'idée étant de tester le temps de réponse des serveurs par rapport à votre machine, c'est à elle de faire le boulot (et si ça peut se faire avec un minimum d'efforts, ce n'est que mieux).

 

Afin de démarrer petit, commençons par le commencement : une page HTML ! Elle va nous servir à poser un cadre sur lequel nous allons mettre des éléments (liens vers les sites) que nous modifierons à loisir grâce à javascript.

Code HTML basique:

 

Code jQuery simple (si si, il n'y a que deux boucles et pas de récursion).

 

Pour apprendre en jouant en direct : http://jsfiddle.net/FHWZc/58/

Explications sur le code javascript :

Par défaut, il ne se passe rien, il faut cliquer pour lancer les requêtes. Si vous voulez tout automatiser, il va falloir se remonter les manches...  mais d'abord, faisons ensemble le tour de ce code :

Cette expression jQuery permet de sélectionner le bouton (si vous n'êtes pas familier avec jQuery, mémorisez "$" comme "Sélection") d'après son identifiant "test".

Ceci correspond à une boucle "for" qui va, sur chaque élément (DOM, constituent le HTML) "div" appliquer le bloc qui suit...

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

 

Après avoir déclaré quelques variables (ni Python ni PHP ici, soyez gentils et déclarez bien vos variables), avec les mentions "var", voici la partie qui fait tout le travail :

L'idée du ping est de mesurer le temps (chronométrer) mis par le serveur cible pour répondre à une demande toute simple.

  1. Prendre l'heure ($.now() retourne en effet l'heure, exprimée en seconde), c'est le "top départ".
  2. Effectuer une requête ajax (détail plus bas).
  3. Mesurer la différence de temps mis pour effectuer la requête précédente.
  4. Si le temps n'est pas aberrant (ce code n'est pas optimal mais pédagogique, une fois sur deux le calcul de la différence ne se fait pas bien), faire:
  5. Calculer la moyenne (avg : average : moyenne) au fur et à mesure de la boucle.
  6. Changer la couleur du texte selon la valeur de la moyenne :
    • La couleur change en direct, c'est amusant.
    • Ces valeurs seuils sont complètement arbitraires et assez subjectives.
    • Cette partie peut être changée de manière à sélectionner l'adresse qui répond le plus vite.
    • entre parenthèses, le nombre de tests considérés pour le calcul de la moyenne (souvenez-vous qu'une moyenne (arithmétique) ne signifie RIEN sans dimension).

 

Explications sur le code Ajax :

Fonction ajax : c'est la méthode qui permet d'envoyer une requête au serveur (plus de détails : http://api.jquery.com/jQuery.ajax/).

Le type : en déclarant "HEAD", vous faites une déclaration de non-agression au serveur cible : cela signifie que l'on ne demande que l'en-tête de la page à l'adresse appelée. Rien de plus (on a pas besoin d'en savoir davantage pour estimer si un serveur est en carafe ou de bonne humeur).

url : l'adresse de la cible, ce que vous avez renseigné dans le code HTML comme valeur du div en cours de traitement

cache : faux car on ne fait que passer (et nous repasserons plusieurs fois) en "coup de vent"

complete : Une fois la requête effectuée, passer à la suite du bloc.

Il existe d'autres clauses success, error, timeout, statusCode... voyez donc *la documentation* pour agrémenter cette partie selon votre volonté (comme griser une adresse qui n'est pas disponible).

 

Amélioration : Charger les informations depuis un fichier de configuration, exemple avec un json :

Pour chaque site, une liste de miroir(s). "(s)" car vous pouvez très bien ne mettre qu'une adresse dont vous voulez simplement estimer l'état.

 

Version qui change le lien principal : 1 ligne à ajouter au HTML + un petit bout de code jquery : http://jsfiddle.net/FHWZc/59/

NB: pensez bien à déclarer best_ping AVANT le $.each

NB: d'une version "à la carte" à l'autre, le code s'alourdit coté JavaScript, mais traite une quantité virtuellement infinie de données.

Installation/Déploiement

En deux étapes  simples :

Créer une page (x)html sur votre ordinateur (dans vos dossiers personnels par exemple) et inclure le code JavaScript sous la forme d'un fichier .js (ou dans des balises <script>, à vous de voir).

Mettre un favori sur ladite page (ou mieux, la mettre en page de démarrage du navigateur).

 

Problèmes connus :

Lorsqu'il n'y a aucun résultat à afficher, les temps de réponse sont trop long.

Mettez un miroir à 127.0.0.1 dans votre code et vous serez surpris : cette IP est sensée être celle du serveur local, on s'attend à un ping nul...

Pour chaque adresse, précisez le protocole ! IPv6 semble coincer, quelqu'un sait-il pourquoi ?

Utilisateurs de chrome, vous ne pouvez pas utiliser ce site en local (en appelant par file://), il faut l'appeler par http.

 

Merci aux relecteurs wocka, bunny, frvallee, MoUsSoR, nahoy, ZazoOo pour leur aide, patience et conseils avisés.

 

  • À propos de
  • gascon qui a étudié à Bordeaux et travaillé à Paris, Toulouse, Clermont-Ferrand et Pau (actuellement)

Catégorie: Astuce | Tags: , , , ,

Un commentaire sur “Ping en JavaScript (jQuery.ajax)

  1. Merci bien ! Ca m\'a été d\'une aide précieuse, il n\'existe pas de code pour pinger un serveur, sur internet, ou alors ça passe par du PhP appellé en AJAX ce qui me gonfle !! Tu devrais faire un Question/Answer sur StackOverflow pour avoir de la visibilité, tu arrivera en messi avec ce code 🙂

Laisser un commentaire