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.
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
).
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.
L'affichage des messages privés sera identique à celui des messages publics, hormis la couleur du badge utilisé pour désigner l'expéditeur.
Côté client
Pour afficher la fenêtre modale, il suffit de lui attribuer la classe CSSactive
.
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
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éssender
ettext
- 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.