Les formats de données

1. Présentation

Les services web sont le cœur de la WebApp. C’est lui qui répond aux requêtes du client en lui fournissant des données en retour.

Une WebApp étant une application client-serveur, il est toujours intéressant d’alléger le côté serveur, car cela permet, soit de diminuer les coûts, soit d’augmenter les performances. L’essentiel des traitements doit donc s’effectuer côté client, qui dispose très souvent d’une puissance CPU inexploitée. Cela déchargera d’autant le serveur, qui n’a plus qu’à gérer des services web. Plutôt que de fournir des pages HTML complètes, les services web ne renvoient que des données brutes. Dans ces conditions, le code des services web devient minimaliste : pas de mise en page, et peu de calculs.

Le service web se charge donc des tâches suivantes :

L’authentification de l’utilisateur
La gestion des droits d’accès
La lecture et mise en forme des paramètres
L’accès aux bases de données
La lecture et mise en forme des résultats

Pour garantir l’interactivité d’une WebApp, trois types de services web peuvent être envisagés :

Ceux qui lisent une commande pour renvoi des données en retour, que l’on peut qualifier de type « get ».
Ceux qui lisent des données destinées à être stockées et qui retournent un code signifiant si l’enregistrement s’est bien passé. Ce sont des services web que l’on peut qualifier de type « set ».
Ceux qui fournissent des données sans qu’aucune requête n’ait été faite. Il s’agit typiquement des notifications, mais cela peut aussi correspondre à un système de communication multi-utilisateurs (réseau social, tchat, jeu en ligne). On peut les qualifier de type « push ».

2. XML

Même s’il sera peu utilisé, il faut quand même...

La communication client-serveur

1. AJAX

S’il y a communication, il y a transfert de données, et que ce soit dans un sens ou dans l’autre, il faut bien formater ces données pour les faire transiter sur le réseau de façon fiable.

Une architecture a été mise au point pour cela. Il s’agit de AJAX, qui signifie « Asynchronous Javascript And XML » (JavaScript asynchrone et XML). Cela signifie que, côté client, ce sont des scripts écrits en langage JavaScript qui font les requêtes vers le serveur, que ces requêtes sont asynchrones, donc non bloquantes pour l’utilisateur, et que les réponses sont fournies au format XML.

En pratique, ce protocole a évolué depuis sa création, et l’on préfère maintenant faire transiter les réponses au format JSON, qui est plus concis et efficace que le XML.

Les requêtes AJAX sont effectuées au moyen de l’objet XmlHttpRequest. Cet objet s’est depuis généralisé tant il est pratique, et on peut toujours l’utiliser sous sa forme originale la plus simple.

xhr = new XMLHttpRequest(); 
xhr.open('GET', "http://monsite.com/ws/getInfo.php", false); 
xhr.send(null); 
 
if (xhr.status === 200) 
 console.log("Réponse : ", xhr.responseText); 
else 
 console.log("Erreur : ", xhr.status, xhr.statusText);

Après avoir créé un objet XMLHttpRequest pour effectuer la transaction, on initialise celui-ci avec l’adresse du service web. Le troisième...

Les services web publics

1. Un lecteur d’actualités

Il n’est pas nécessaire d’écrire un script côté serveur pour accéder à un service web. Il en existe des quantités incroyables, qui sont accessibles sur la plupart des sites web. Ils sont généralement connus sous la dénomination « API » (Application Program Interface : Interface de programmation de l’application). Ces API ne nécessitent que la programmation du côté client. Une des API les plus utilisées sur Internet est probablement celle de Google Maps. C’est elle qui se charge d’afficher des cartes interactives sur de nombreux sites web.

Utiliser l’API Google Maps nécessite une inscription et impose certaines contraintes si l’on veut l’utiliser gratuitement. Il peut être préférable de faire appel à l’API OpenStreetMap, d’autant que la librairie OpenLayers qui permet d’y accéder dispose d’une grande variété de fonctions très puissantes.

Il existe d’autres services web en accès libre, et qui ne nécessitent pas l’utilisation d’une API complexe, il s’agit des flux RSS (Really Simple Syndication : souscription vraiment simple). Ils sont disponibles sur la plupart des sites d’actualité, fournissent leurs réponses au format XML, et sont assez faciles à décoder.

L’exemple proposé ci-dessous est donc un lecteur automatique de flux RSS. On y paramètre la liste des flux que l’on veut voir et ceux-ci s’affichent en continu sur l’écran.

<!DOCTYPE html> 
<html> 
<head> 
<title>RSS</title> 
<meta charset='utf-8'></meta> 
<script src="lib/jquery/jquery-3.4.1.min.js"></script> 
<style> 
body {user-select:none; background:#000; overflow:hidden} 
#rss>div {margin-bottom:0.5em} 
#rss>div>h1 {background:#009; color:#FFF; margin:0; 
             font-family:sans-serif; font-size:1em} 
#rss>div>h2 {background:#99C; margin:0; 
             font-family:sans-serif;...

Le service web