Liste des utilisateurs

La première amélioration apportée à notre serveur de chat est d'afficher la liste des utilisateurs connectés afin de pouvoir leur envoyer des messages privés. Nous devons pour cela enrichir notre protocole de communication de nouveaux événements.

Nom Paramètre Définition Réponse possible
<users tableau de pseudos Envoi de la liste des utilisateurs connectés
>private destinataire + texte Envoi d'un message privé au serveur <private
<private expéditeur + texte Envoi d'un message privé au client désigné comme destinataire

Affichage des utilisateurs

Côté serveur

Exercice

Écrivez une fonction function getAllNicknames() qui retourne un tableau contenant les pseudos de tous les utilisateurs connectés.

À chaque demande de connexion validée et à chaque déconnexion, le serveur enverra un événement de type <users avec comme paramètre le tableau des utilisateurs pour que chaque client dispose d'une liste à jour.

Côté client

L'interface Web du client chat doit être mise à jour afin de faire apparaître la liste des utilisateurs connectés.

Version mobile de l'interface client
Version desktop de l'interface client

Exercice

Modifiez la mise en page du fichier index.html afin de mettre en place une grille responsive de deux colonnes avec le framework Spectre.css. Les utilisateurs seront affichés à l'aide d'un élément HTML table.

La liste des utilisateurs doit contenir le nombre de personnes connectés dans l'entête de la table HTML (élément thead) et tous les pseudos dans le corps (élément tbody).

Affichage de la liste des utilisateurs dans l'interface client

Exercice

Ajoutez un écouteur d'événement de type <users à l'objet socketClient afin de mettre à jour la liste des utilisateurs connectés dans l'interface du client chat.

Envoi/réception de messages privés

La rédaction des messages privés s'effectuera dans une fenêtre de type modal qui s'ouvrira suite à un clic sur un utilisateur de la liste.

Fenêtre de rédaction d'un message privé

L'affichage des messages privés sera identique à celui des messages publics, hormis la couleur du badge utilisé pour désigner l'expéditeur.

Affichage d'un message privé dans l'interface du destinataire

Côté client

Pour afficher la fenêtre modale, il suffit de lui attribuer la classe CSS active.

Exercice

Lors de la mise à jour de la liste des utilisateurs, ajoutez un écouteur d'événement de type click à chaque cellule du tableau qui devra :

  • mettre à jour le titre de la fenêtre modale en faisant apparaître le nom du destinataire
  • afficher la fenêtre modale

Astuce

De la même manière, vous ferez en sorte de fermer la fenêtre modale lorsque l'on clique sur l'icône en forme de croix.

Le formulaire private d'envoi de messages privés fonctionne sur le même principe que le formulaire send développé dans le chapitre précédent.

L'événement de type >private envoyé au serveur aura pour paramètre un objet composé des propriétés recipient et text.

Côté serveur

Exercice

Ajoutez un écouteur d'événement de type >private à l'objet socket qui, si l'utilisateur référencé par la propriété recipient existe, devra :

  • déterminer le nom de l'expéditeur à partir du socket
  • envoyer au destinataire un événement de type <private avec comme paramètre un objet ayant pour propriétés sender et text
  • envoyer le même événement à l'expéditeur

Côté client (le retour)

Enfin, l'affichage des messages privés est identique à celui des messages publics, hormis la couleur de l'expéditeur.

Exercice

Inspirez de l'exercice du chapitre suivant sur l'affichage de messages publics pour ajoutez le code nécessaire à l'affichage des messages privés.