API HTML 5

4. Gestion des erreurs. 3

5. API géolocalisation. 3

6. Exemple. 6

Note importance

Il y’ a plusieurs APIs HTML5. On va étudier dans ce cours que quelques unes d’eux.

Pour plus d’informations consulter l’ouvrage cité en référence.

1. SSE (Server Sent Event)

Une API Standard du HTML5.

Avec AJAX le client (la page) demande des données du serveur et le serveur réagit en les envoyant.

Avec SSE le client (page web) recoit automatiquement des données (mises à jour) du serveur en utilisant le http et sans qu’il fait des requêtes.

Exemple Facebook/Twitter updates, stock price updates, bourse update …

Pour réaliser ce scenario on programme le client et le serveur

2. Programmation du client

Au niveau de client on ouvre une connexion vers le serveur pour commencer la réception des données de celui-ci.

Pour réaliser cette tache on crée et on configure un objet de type EventSource en spécifiant l’URL d’un script côté serveur qui va générer les données.

(1) var source = new EventSource("update.php");
(2) source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};

explication

à (1) on crée un objet source de type EventSource en spécifiant l’URL de la source des données c.à.d. le programme chargé de l’envoi des données au niveau de serveur. Ici ce programme est le script php update.php.

(2) à chaque réception de donnée par le browser un évènement onmessage est déclenché. On attache un gestionnaire (fonction) à cet évènement. Ici le gestionnaire est la fonction

function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};

cette fonction prend comme argument un objet event et modifie le contenu html de l’élément ayant l’ identifiant « result ». event.data stocke les données reçues du serveur.

3. Programmation du serveur

On programme le serveur pour envoyer automatiquement les données au client .

Dans cette exemple la programmation consiste à écrire le contenu du script update.php.

Pour envoyer des data d’une manière continu du serveur, mettre le header "Content-Type" à "text/event-stream".

Et spécifier que la page ne doit pas faire des caches en mettant le header Cache-Control à no-cache

Les données à envoyer on un format particulier.

Format

Le flux de données est un simple flux de données de texte, encodées en UTF-8.

Chaque message reçu a une combinaison quelconque des champs suivants, un par ligne .

champs

event

Une chaîne identifiant le type d’évènement décrit. S’il est spécifié, un évènement sera envoyé dans le navigateur à l’écouteur défini pour l’évènement spécifié. Le code source de l’application doit utiliser addEventListener() pour écouter des évènements nommés. Le gestionnaire onmessage est appelé si aucun nom d’évènement n’est spécifié dans un message.

data

Le champ de données du message. Lorsque l’EventSource reçoit plusieurs lignes de message consécutives commençant par data:, il les concatène, en ajoutant un caractère saut de ligne entre chacune d’elles. Les sauts de ligne en fin de message sont supprimés.

L’ID d’évènement, qui sera mémorisé comme valeur d’ID du dernier évènement de l’objet EventSource.

retry

Le délai de reconnexion à utiliser lors de la tentative d’envoi de l’évènement. Il doit être un nombre entier, spécifiant le temps de reconnexion en millisecondes. Si une valeur non entière est spécifiée, le champ est ignoré.

Exemple echo "data:mes data\n\n";

Flush les données au client.

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

4. Gestion des erreurs

Si un problème survient, un évènement error est déclenché. Pour le gérer on attache un gestionnaire à cet évènement.

Exemple

Source.onerror=function(event){

// gestion de l’erreur

}

Fermer la connexion

Source.close() ;

5. API géolocalisation

La géolocalisation est un procédé pour se positionner géographiquement sur un plan ou

une carte.

Applications pratiques de la géolocalisation :

•la réalisation des recherches contextualisées. C.à.d. que la pertinence des résultat est fonction de la zone géographique concernée ;

• calculs d’itinéraires ou de position sur une carte, par exemple avec Google

Maps et Bing Maps ;

• des partages de localisations géographiques dans les réseaux sociaux, au travers de

la notation de lieux ou de la prise de photos avec méta-informations.

Méthodes de positionnement :

• par GPS , Galileo etc ;

• par triangulation dans un réseau de téléphonie sans fil (GSM, 3G, LTE, etc.) ;

• par triangulation de réseaux Wi-Fi/RFID/Bluetooth à portée ;

• par adresse IP (correspondance avec bases de données)

Le navigateur (ou un système d’exploitation) peut combiner ces approches pour calculer la position.

Sur une plate-forme mobile équipée d’un GPS, le navigateur embarqué pourra faire

appel à ce système de positionnement.

Sur un poste fixe qui n’en est pas équipé, un navigateur classique devra se baser sur l’adresse IP.

Comment localiser un appareil dans l’espace

La localisation se fait en utilisant trois coordonnées:

Latitude

Longitude

Altitude (facultative selon les besoins)

l’appel aux fonctions de géolocalisation demande une autorisation de client. Généralement on veut pose la question et tu peut accepter ou refuser.

Localiser avec l’api géolocalisation

La géolocalisation fait appel à l’objet géolocalisation, membre de Navigator (ou window.navigator).

Pour savoir si le navigateur supporte l’api

if(navigator.geolocation)

{ // L’API est disponible }

else

{ // Pas de support, proposer une alternative ? }

Déclencher la localisation

Deux méthodes de l’objet geolocation existes:

• getCurrentPosition() pour une requête unique ;

• watchPosition() pour un suivi continu de la position.

Ces méthodes pendent en arguments :

• une fonction de callback (obligatoire), appelée de façon asynchrone en cas de succès dès que le résultat est obtenu ;

• une deuxième fonction de callback (facultative), appelée en cas d’erreur ;

• un ensemble d’options PositionOptions (facultatif ).

Exemple avec getCurrentPosition()

function affichePosition(position) (2)

{

// Afficher la position dans la page ou sur une carte... }

navigator.geolocation.getCurrentPosition(affichePosition); (1)

on fait appel à la fonction getCurrentPosition (1) en lui passant la fonction callback affichePosition (2) . Cette derniere prend comme argument un objet position contenant les informations sur la position de l’objet.

Contenu de l’objet position

Un objet de type Position contient des propriétés accessibles en lecture seule :

• timestamp : la date à laquelle la position a été acquise ;

• coords : les coordonnées.

La propriété coords de type Coordinates contient des précisions :

1 latitude : la latitude ;

2 longitude : la longitude ;

3 accuracy : le coefficient de précision ;

4 altitude : l’altitude (optionnel) ;

5 altitudeAccuracy : la précision sur l’altitude (optionnel) ;

6 heading : la direction (optionnel) ;

7 speed : la vitesse (optionnel).

6. Exemple

Exemple avec affichage des coordonnées sur la page

// Fonction de callback en cas de succès

function succesGeo(position) {

var infopos = "Position déterminée : <br>";

infopos += "Latitude : "+position.coords.latitude +"<br>";

infopos += "Longitude: "+position.coords.longitude+"<br>";

infopos += "Altitude : "+position.coords.altitude +"<br>";

document.getElementById("maposition").innerHTML = infopos;

}

// Demande de position

navigator.geolocation.getCurrentPosition(succesGeo);

</script>

Gestion des erreurs

Les méthodes getCurrentPosition() et watchPosition() prend une autre callback pour gérer les erreurs. Cette fonction prend comme argument un objet PositionError qui informe sur la cause de l’erreur en cas d’insuccès.

Utiliser une carte

Un des intérêts d’une géolocalisation est de positionner l’utilisateur sur une carte. Pour cela, l’on peut se servir de l’API Google Maps.

Exemple

Exemple avec carte issue de l’API Google Maps

<!-- Un élément HTML pour recueillir la carte

-->

if(navigator.geolocation) {

// Fonction de callback en cas de succès

function succesGeo(position) {

var infopos = "Position déterminée : <br>";

infopos += "Latitude : "+position.coords.latitude +"<br>";

infopos += "Longitude: "+position.coords.longitude+"<br>";

document.getElementById("maposition").innerHTML = infopos;

// On instancie un nouvel objet LatLng pour Google Maps

var latlng = new google.maps.LatLng(position.coords.latitude,

position.coords.longitude);

// Ainsi que des options pour la carte, centrée sur latlng

var optionsGmaps = {

mapTypeControl: false,

center: latlng,

navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},

mapTypeId: google.maps.MapTypeId.ROADMAP,

zoom: 15

};

// Initialisation de la carte avec les options

var map = new google.maps.Map(document.getElementById("map"), optionsGmaps);

// Ajout d’un marqueur à la position trouvée

var marker = new google.maps.Marker({

position: latlng,

map: map,

title:"Vous êtes ici"

});

}

// Requête de géolocalisation

navigator.geolocation.getCurrentPosition(succesGeo);

}

</script>

Pour plus d’informations sur les API HTML5

Consulter le livre de Rodolphe Rimelé : HTML 5 Une référence pour le développeur web

Modifié le: vendredi 15 avril 2022, 15:18