CHAT en temps réel

Par Sébastien Feulvarch

Partie 1 : décryptage d’une communication SocketServer/SocketClient

I)  Que se passe-t-il lorsque vous souhaitez consultez un site ?

Vous, client, faites une demande (requête) au serveur hébergeant le site. Le serveur répond en renvoyant la page web. La communication est dite asynchrone : le client demande et le serveur répond Le serveur ne peut pas décider de lui-même d’envoyer quelque chose au client (par exemple pour l’avertir « eh il y a un nouveau message ! »). Il faut que le client recharge la page ou fasse une action pour solliciter le serveur, car celui-ci n’a pas le droit de s’adresser au client tout seul.

Il existe un décalage régulier entre 1. et 3. ou 1. et 5. le temps peut varier entre quelques secondes et quelques minutes. Imaginez cela pour une application de chat : afin de savoir si de nouveaux messages sont arrivés, le client est obligé d’envoyer une requête de façon périodique au serveur pour savoir si de nouveaux messages sont arrivés. Ou alors il faut que le client actualise la page ou clique sur un bouton pour récupérer les éventuels nouveaux messages. Le développement de récentes applications telles qu’un serveur de Chat, des jeux multi-joueurs, des applications de collaboration… exige une communication rapide, en temps réel. Un nouveau protocole de communication a donc vu le jour : le protocole WebSocket qui permet de laisser « canal » de communication ouvert entre le client et le serveur pour des échanges dans les 2 sens (communication synchrone). Désormais, le serveur peut donc lui-même décider d’envoyer un message au client comme un grand ! II)  Principe du protocole WebSocket Le protocole WebSocket vise à développer un canal de communication bi-directionnel sur un socket TCP pour les navigateurs et les serveurs web. Ce protocole n’est pas supporté par tous les navigateurs.

La connectivité est simultanée. Le délai entre 1. et 2. est de 50-100 ms!

Ouverture d’une communication par WebSocket :

  • Le client envoie une requête HTTP pour notifier son désir d’ouvrir une connexion de type WebSocket
  • Si le serveur accepte alors une connexion bi-directionnelle est ouverte entre eux. Les règles de communication reposent sur le protocole TCP

Elle reste ouverte jusqu’à ce qu’un des participants décide de la clore.

III.  Analyse du codage d’une application réseau avec le protocole websocket (d’après Christophe Béasse)   Le serveur Node.js gére le protocole WebSockets ; cette capacité est disponible justement grâce à la combinaison de 2 librairies :

  • Express : « écoute » la requête http et se charge d’envoyer en réponse une page qui contient le JavaScript pour établir une connexion WebSocket et gérer par la suite l’échange des messages.
  • io : « écoute » et retransmet les messages entre les clients connectés et le serveur.

Nous utiliserons la plateforme Glitch (voir l’article de Christophe Béasse) qui inclus le serveur Node.js : https://glitch.com/ Ouvrir le projet suivant : https://glitch.com/edit/#!/exemple-appli-reseau

Comment ça marche ?  cliquer ici

Partie 2 : création d’un chat en temps réel

Un prérequis : prise en main de la librairie DOM (documentation)

Le but est de construire un chat dans lequel un client commence par saisir son pseudo puis se connecte au chat avec le bouton « LOGIN ». La fenêtre de chat devra afficher qu’un nouveau client est connecté en indiquant son pseudo et les messages envoyés doivent être affichés chez tous les clients connectés.

Ouvrir un nouveau projet sur GLITCH : https://glitch.com/

-> Ajouter le module socket.io:

Vous devez voir le module dans le fichier package.json :

-> Dans le fichier index.html, ajouter le chargement des libraires nécessaires à la programmation de l’appli, la construction l’IHM (zones de saisie de texte ; boutons) et la mise en réseau :

<script src= »https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js »></script>

<script src= »https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.min.js »></script>

<script src= »/socket.io/socket.io.js » type= »text/javascript »></script>  

-> Côté serveur :    server.js

-> Côté client :  client.js    (à compléter avec l’aide ci-dessous)


 AIDES pour compléter l’algorithme

Fonction accueil() :

On peut utiliser l’attribut CENTER pour écrire le titre avec les coordonnées au centre du titre :

textAlign(CENTER);

Taille du texte :

textSize(30);

Positionnement du texte :

text(« ………………….. »,x,y);

Style d’un objet de type zone de saisie de texte ou bouton :

nom_objet.style(« propriété« , »valeur« );

Positionnement d’un objet  :

nom_objet.position(valeurX,valeurY);

dimensionnement d’un objet :

nom_objet.size(largeur,hauteur);

Créer :

  • Zone de saisie du pseudo (pseudo) à positionner, et à dimensionner.
  • Bouton pour ouvrir le chat (buttonlog)

Fonction logg() :

Effacer un objet de type zone de texte, bouton, …. :

nom_objet.remove()

Fonction page_chat() :

Créer :

  • Zone de saisie du message.
  • Bouton pour envoyer le message (buttonlog).
  • Zone d’affichage des textes que l’on pourra nommer myDiv :  myDiv = createDiv(«  »);   voir https://p5js.org/reference/#/p5/createDiv

Si l’affichage déborde de la fenêtre  (overflow), on demandera d’y insérer une barre déroulante (scroll) verticale et/ou barre déroulante horizontale :  myDiv.style(« overflow », »auto »);

Fonction fermeture() :

remove(); efface tous les éléments de la fenêtre.

socket.close(); ferme le socket de communication avec le serveur

Fonction affmsg(data) :

Ajouter du texte dans la zone d’affichage myDiv puis aller à la ligne :

myDiv.html(texte_à_afficher + « <br> »,true);

Fonction msg() : variable de type JSON pour envoyer le message :

var data = {user : contenu de pseudo , msg : contenu de msgpseudo};

Récupérer le contenu d’une zone de saisie de texte :

nom_zone.value();

Affecter un texte dans une zone de texte :

nom_zone.value(« le texte à affecter« );

Fonction affconnex() :

Créer une variable de type chaîne de caractère nommée str à laquelle on affecte :  nom_du_client + » vient de se connecter »

Afficher cette chaîne en rouge :

str.fontcolor(« red »);

Prolongements possibles :

  • afficher dans la zone myDiv pseudo vient de se déconnecter dès qu’un protagoniste se déconnecte.
  • Créer un tableau stockant tous les pseudos des personnes connectées et les afficher dans un bloc <div></div>  (ce tableau doit être mis à jour dès qu’une personne se déconnecte)
  • stocker les « 5 » derniers messages affichés sur le chat et les afficher dans la page chat de la personne qui vient de se connecter.
  • limiter le nombre de connexions au chat
  • exiger un mot de passe pour se connecter au chat.
  • …………………………………………..

 

 Catégorie: ICN ISN Javascript News ! P5JS

Laisser une réponse