Les cours du BTS SIO

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Raspberry : utiliser le format JSON pour les messages ======
===== Présentation =====

Quand les **messages** à échanger sont **simples**, une **chaîne de caractères** comme un mot ou une phrase suffisent.

Dès que les **messages** doivent contenir des **données différentes**, il est préférable de les **structurer** pour faciliter leur interprétation par le destinaire du message.
Le **format JSON** (JavaScript Object Notation – Notation Objet issue de JavaScript) est un **format texte léger** d'échange de données, **facile à lire ou à écrire** pour des humains et complètement **indépendant** de tout langage.

JSON se base sur **deux structures** :
  * Une **collection de couples nom/valeur** qui s'apparente à un **objet en javascript**, un **tableau associatif**ou un **dictionnaire en python** :
    * on commence la collection commence par **{ (accolade gauche)** et on la termine par **} (accolade droite)**,
    * chaque **nom** est suivi de **: (deux-points)** puis de la **valeur**,
    * les **couples nom/valeur** sont **séparés par une , (virgule)**.
  * Une **liste de valeurs ordonnées** ce qui correspond à un **tableau**, un vecteur, une liste ou une suite :
    * Un **tableau** commence par **[ (crochet gauche)** et se termine par **] (crochet droit)**. Les valeurs sont séparées par une **, (virgule)**.

Pour en savoir plus : https://www.json.org/json-fr.html

===== Mise en oeuvre coté serveur =====
==== Envoi des messages au format JSON ====
<WRAP center round info>
Le **module json** doit être **importé** dans le programme Python :
<code python>
import json
</code>
</WRAP>

Exemple si le serveur doit **envoyer toutes les secondes** un message avec un numéro. On peut alors envoyer ces informations au format **JSON** en définissant : 
  * le texte à envoyer : **Bonjour**,
  * le numéro associé : un **entier** qui** commence à 1** et qui est **incrémenté de 1** à chaque **seconde**. 

Voici le **dictionnaire** en python que le programme serveur doit créer **avant** de le **transformer** au format JSON et la **fonction** de gestion de l'envoi des messages :
<code python>
# initialisation du dictionnaire pour le premier envoi
messageEnvoye = {
    'texte': 'Bonjour ',
    'numero': 1,
  };

# Gestion de l'envoi des messages du serveur au client
async def gestion_envoi_message(websocket): 
    # boucle infinie pour envoyer toutes les secondes un message ; 
    while True:
       # formatage du dictionnaire messageEnvoye au format JSON
       messageEnvoyeJSON =  json.dumps(messageEnvoye)
       # envoi du message au format JSON
       await websocket.send(messageEnvoyeJSON )
       # incrémenter le numéro du message
       messageEnvoye ["numero"] = messageEnvoye ["numero"] + 1
       # attendre une seconde
       await asyncio.sleep(1)
</code>
==== Réception des messages au format JSON ====
Le serveur va recevoir un message du client. Dans le même ordre d'idée, le message **reçu** comportera aussi un **numéro incrémenté de 1**. Ce message reçu sera au format JSON et il faudra le **transformer en dictionnaire python** pour accéder aux différentes données qu'il contient.

Voici le dictionnaire python attendu :  
<code python>
messageRecu = {
    'texteDebut': 'J\'envoie message ',
    "numero": 1,
    "texteFin": " au serveur.",
  }
</code> 

Voici la **fonction** de gestion de la réception des **messages au format JSON** du client :
<code python>
# Gestion des messages recus du client au format JSON
async def gestion_reception_message(websocket):
    while True:
        # reception des messages d'un client
        messageRecuJSON = await websocket.recv()
        # conversion du message format JSON en dictionnaire Python
        messageRecu=json.loads(messageRecuJSON)
        print(" {} {} {}".format(messageRecu["texteDebut"],messageRecu["numero"],messageRecu["texteFin"],))
</code>

===== Mise en oeuvre coté client =====
==== Envoi des messages au format JSON ====
<WRAP center round info>
Comme **l'envoi** des messages se fait en **cliquant sur le bouton** de la page, il n'est **plus nécessaire** de gérer l'événement initial **ws.onopen**. On peut supprimer la gestion de cet événement.
</WRAP>

Voici le **tableau associatif** en javascript que le programme client doit créer **avant** de le **transformer** au format JSON et la **fonction** de gestion de l'envoi des messages :

<code javascript>
  // création du message initial en tableau associatif
  var messageEnvoye = {
    'texteDebut' : 'J\'envoie message ',
	'numero': 1,
    'texteFin': ' au serveur.',
  };
  
  // fonction qui envoie un message au format JSON au serveur
  function envoyerMessage() {
    // la methode stringify() convertit le tableau assiociatif au formart JSON 
    messageEnvoyeJSON =  JSON.stringify(messageEnvoye );
    ws.send(messageEnvoyeJSON ); 
    // incrementer le numero du message
    messageEnvoye["numero"] += 1;
  }
</code>

==== Réception des messages au format JSON ====
Le **client** va **recevoir** les messages du serveur au **format JSON**. Ces messages reçus doivent être **transformés en tableau associatif javascript** pour accéder aux différentes données qu'ils contiennent.

<code javascript>
  ws.onmessage = function (event) {
     //affiche le message recu dans la balise <span>
     //la methode parse() convertit le message recu au format JSON en tableau associatif javascript 
     messageRecu = JSON.parse(event.data)
     affichemessage.innerHTML = messageRecu["texte"] + messageRecu["numero"];  
</code>

<WRAP center round info >
Vous pouvez **à la fois** :
  * envoyer un message au serveur
  * et **recevoir** en même temps un message du serveur
Pour **visualiser l'envoi et la réception simultanés** des messages, cliquez sur le bouton de la page et observez l'**affichage du print** dans le terminal du Raspberry
</WRAP>

<WRAP center round info>
Le **code complet** : 
  * du programme **Python** : {{:isn:websocket3.py.pdf|}}
  * de la page HTML : {{:isn:page2.html.pdf|}}
</WRAP>

==== Les activités ... ====
<WRAP center round info >
[[.:accueil|Je reviens à la liste des activités.]] 
</WRAP>