API HTML 5
3. Programmation du serveur. 2
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.
id
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:
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
<!-- Un élément HTML pour recueillir les informations -->
<div id="maposition"></div>
<script>
// 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 l’affichage -->
<div id="maposition"></div>
<!-- Un élément HTML pour recueillir la carte
-->
<div id="map" style="width:640px;height:480px"></div>
<!-- Chargement de l’API Google maps -->
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
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