Bonjour,

j'apprends actuellement socket IO et je l'utilise avec react.

J'ai crée un ChatContext qui me permet de :

- me connecter

- rejoindre une room spécifique (avec une room "par defaut" dans laquelle on arrive directement à la connexion)

- quitter une room

- envoyer des messages sur une room spécifique

Le tout fonctionne correctement.

Je compte plus tard faire persister les données avec mongoDb mais pour le moment je cherche déjà à voir comment lister les utilisateurs d'une room spécifique et c'est là que je suis un peu perturbé.

Avec une base de donnée ça marcherait assez facilement je pense, mais sans BDD j'ai beaucoup de mal à faire passer une info du serveur => client.

Je ne comprends pas comment je peux associer un ID d'un socket avec le pseudo du membre que je récupère après l'inscription de celui-ci.

Voici mon code complet que je poste sur pastebin puisque sur openclassroom je me prends un BAN à chaque poste de code (bug ?)

Le chatContext (toute la logique du chat y est présente) : https://pastebin.com/xhvZN5Mx

Le serveur: https://pastebin.com/4fCfQB6C

Alors pour lister les utilisateurs d'une room, c'est une bonne question, je me suis posé plus ou moins la même. Alors je crois que socket.io fonctionne pas mal avec des Set et des Map.
Ensuite, j'imagine ( sans avoir fait de recherche plus poussée ) qu'un objet "room" enregistre des objets Client. Et pour remonter au nom d'utilisateur correspondant à cet objet Client...
... bref, j'ai pas trouvé. Mais par contre je suis tombé sur cette petite astuce, qui permet de créer une room au nom de l'utilisateur, mais aussi de préserver la connexion ( ou plutôt de la rétablir ) entre différentes pages du site :

node.js - Socket.io multiple pages - Stack Overflow

Voilà, mais moi, au lieu de générer un socketID aléatoire avec uuidv4(), je lui colle le nom de l'utilisateur.

Salut,

alors j'ai un peu avancé pour lister les users en faisant ceci coté back : 

  socket.on("room", async (data) => {
    console.log(data.pseudo + " has joined " + data.room);
    socket.join(data.room);

    try {
      const clientsInRoom = await io.in(data.room).allSockets();
      console.log(clientsInRoom);
      io.in(data.room).emit("test", [...clientsInRoom]);
    } catch (err) {
      console.log(err);
    }
  });

et coté front je récupère et stock de cette manière :

useEffect(() => {
    socketRef.current.emit("room", {
      room: state.room,
      pseudo: state.name,
    });

    socketRef.current.emit("get users", state.room);
    socketRef.current.on("test", (...args) => setUsersList(...args));

    return () =>
      socketRef.current.emit("leave room", {
        room: state.room,
      });
  }, [state.room, state.name]);

Donc ce qui me retourne bien une list des socket (id) par room, maintenant je dois juste voir pour savoir comment leur associer le pseudo de l'utilisateur :-)

Je file voir ton lien de suite.

Moi j'ajoute tout simplement une propriété "username" à chaque socket connectée, que je récupère en émettant un "start-session" qui contient le socketID, mais ce socketID correspond en fait au pseudo du client.

Et quand le serveur répond le "set-session-aknowledgement", j'en profite pour renvoyer la liste des utilisateurs connectés que je récupère grâce à une fonction, et cette fonction servira également à transmettre la nouvelle liste à chaque fois qu'un utilisateur se connecte ou se déconnecte.

Soit côté serveur :

io.on('connection', (socket) => {
    console.log('a user connected');
    socket.on('start-session', (data) => {
        if(data.socketID === null)
        {
            socket.username = data.username;
            socket.join(data.username);
            if(socket.rooms.has(data.username))
            {
                console.log(data.username + " a créé sa room perso");
                socket.emit("set-session-aknowledgement", { socketID: data.username});
                sessionsManage.findSessions(_dbConnexion).then((value) => {
                    socket.broadcast.emit('newConnection', {newOne: socket.username, userList: value});
                });
            }
        }
        else
        {
            socket.username = data.username;
            socket.join(data.username);
            if(socket.rooms.has(data.username))
            {
                console.log(data.username + " a rejoint sa room");
                sessionsManage.findSessions(_dbConnexion).then((value) => {
                    socket.emit("set-session-aknowledgement", { socketID: data.socketID, userList: value});
                });
            }
        }
    });

Et côté client :

var socket_ID;
    var data = sessionStorage.getItem('socketID');
            
    socket.on('connect', () => {
        console.log('connecté au serveur socket.io, data : ' + data);
        if (!data)
            socket_ID = null;//when we connect first time 
        else
             socket_ID = data;//when we connect n times 
        socket.emit('start-session', {  socketID: socket_ID, username: username});
    });
    socket.on('set-session-aknowledgement', (data) => {
        sessionStorage.setItem('socketID', data.socketID);
        console.log('room crée sur serveur io : ' + data.socketID);
        if(document.getElementById("loggedUsers"))
        {
            document.getElementById("loggedUsers").innerHTML = "";
            updateUserList(data.userList);
        }
    });