WebSocket et demande de parole

Réalisez une application de demande de parole. Chaque participant pourra demander la parole, consulter la file d'attente et voir les changements en temps réel. Le serveur sera responsable de l'attribution de la parole et de l'ordre des demandes.

Utilisez la bibliothèque WsMini pour les échanges entre le navigateur et le serveur. Les actions seront effectuées par RPC et les mises à jour seront diffusées dans un canal PubSub commun aux participants. Le support Prise en main de WebSocket présente les bases du protocole.

Fonctionnalités

L'application doit permettre de :

• Demander la parole : si elle est libre, le participant l'obtient immédiatement. Sinon, il rejoint la fin de la file d'attente. Une personne ne peut pas avoir plusieurs demandes en cours.
• Annuler sa demande lorsqu'on est dans la file, en conservant l'ordre des autres participants.
• Libérer la parole lorsqu'on la détient. Elle passe automatiquement au premier participant en attente, ou redevient libre si la file est vide.
• Consulter la situation : qui a la parole, qui attend et dans quel ordre. Chaque participant doit pouvoir reconnaître sa propre situation.

Chaque action doit recevoir une confirmation personnelle ou un message d'erreur. Les changements seront transmis par WebSocket pour actualiser les écrans de tous les participants. Lorsqu'un participant ouvre la page, il doit recevoir la situation actuelle puis les mises à jour suivantes.

Lorsqu'un participant se déconnecte, il est retiré de la file. S'il avait la parole, celle-ci passe au suivant. L'interface doit aussi indiquer une perte de connexion et empêcher les actions tant qu'elle n'est pas disponible.

Chaque participant sera identifié par sa connexion WebSocket et les données seront conservées en mémoire sur le serveur. Une actualisation de la page crée un nouveau participant et un redémarrage du serveur remet la situation à zéro.

Mise en place

Utilisez une version récente de Node.js compatible avec WsMini et Vite. Dans un nouveau dossier, initialisez le projet et installez les dépendances :

npm init -y
npm install wsmini
npm install --save-dev vite

Créez un fichier server.mjs pour le serveur et une page index.html chargeant votre JavaScript client avec une balise script de type module. Ajoutez les scripts suivants dans la propriété scripts de package.json :

"scripts": {
  "dev": "vite",
  "server": "node --watch server.mjs"  
}

Lancez npm run server et npm run dev dans deux terminaux distincts. Ouvrez l'adresse HTTP affichée par Vite. Vite fournit les fichiers de la page et le serveur Node.js gère les connexions WebSocket, par exemple sur le port 8888.

Côté serveur, importez WSServerPubSub et WSServerError depuis wsmini. Côté navigateur, importez WSClient depuis le même paquet. Les exemples de WsMini présentent l'initialisation du serveur, la connexion du client et les échanges RPC et PubSub. Développez progressivement les fonctionnalités côté serveur et côté client pour faciliter vos tests.

Indications

• RPC : prévoyez des appels serveur pour récupérer l'état initial et effectuer les actions. Vous pouvez par exemple utiliser quatre RPC : consulter, demander, annuler et libérer la parole. Il est aussi possible de réunir l'annulation et la libération dans un seul RPC. Voir addRpc et rpc.
• Identité : utilisez l'identifiant généré par WsMini à la connexion pour identifier le participant. Côté serveur, le deuxième paramètre des callbacks RPC contient les métadonnées du client et son identifiant dans clientMetadata.id. Côté navigateur, cet identifiant est disponible dans ws.clientId après await ws.connect(). Vous pouvez le raccourcir pour l'affichage en conservant sa valeur complète pour les comparaisons.
• File de demandes : un tableau d'identifiants côté serveur suffit pour représenter l'ordre des demandes. Le premier participant a la parole et les suivants attendent leur tour. Le client utilisera l'état reçu pour afficher la situation et adapter les actions proposées au participant.
• Canal PubSub : créez un canal, par exemple speech, avec addChannel. Le serveur y publiera l'état après chaque changement avec pub. Configurez usersCanPub: false pour réserver la publication au serveur. Côté navigateur, abonnez le client avec sub et utilisez les données reçues pour actualiser l'interface. Attendez la confirmation de l'abonnement avant de récupérer l'état initial et d'activer les actions. La réponse RPC confirme l'action au demandeur, tandis que la publication actualise les écrans de tous les abonnés.
• Validation : les boutons peuvent être adaptés à la situation du participant, mais les vérifications doivent aussi être faites côté serveur. Un refus peut être signalé avec WSServerError puis traité avec try/catch autour de await ws.rpc(...).
• Départs des participants : utilisez le hook hookUnsub du canal pour retirer de la file l'identifiant du participant et publier le nouvel état. WsMini appelle ce hook avant le retrait du participant du canal, lors d'un désabonnement ou de la fermeture de sa connexion. Si le participant avait la parole, celle-ci passe au premier de la file restante.

Testez avec plusieurs onglets et observez les messages dans les outils réseau du navigateur. Vérifiez notamment les demandes simultanées, les doublons, les annulations, les déconnexions et l'arrivée d'un nouveau participant en cours de discussion.