Socket.io HTML - Send unique content to unique clients' HTML page-CodePudding

I'm using NodeJS and Socket.io. I'm getting a query from the user (https://localhost:3000?id=12345) and using this query I want to send this specific user unique content. Now my problem is that all clients are getting data according to the last query from the last client. I've tried to make rooms and multiple other solutions that I've thought about or found online but with no luck.

I'm getting the query of the page like that,

app.get('/', async ({ query }, response) => { ... }

Client

$(document).ready(function () {

 socket.emit('room', key);

 socket.on('a1', function (data) {
  $("#a1").empty().append(data);
 });
 socket.on('a2', function (data) {
  $("#a2").empty().append(data);
 });
 socket.on('a3', function (data) {
  $("#a3").empty().append(data);
 });
 socket.on('a4', function (data) {
  $("#a4").empty().append(data);
 });
…

Server

io.on('connection', function (socket) {
  console.log('Connection');
  socket.removeAllListeners();
  socket.on('create', function (data) {
    console.log(`Data: ${data}`);
    socket.join(data);
    io.in(data).emit('a1', a1);
    io.in(data).emit('a2', a2);
    io.in(data).emit('a3', a3);
    io.in(data).emit('a4', a4);
  })
});
…

I really can't understand how to separate each client query from the server and then send unique content to each client without one client's content interfering with another. My initial thought was to make one room per client and send their unique content by using that room but for some reason, it's like the content is ending up in every client.

Thank you very much!

CodePudding user response：

Is just you turn the object used to manage the content better like this:

The clientside:

$(document).ready(function () {
    const userKey = 'unique-id-for-each-user'
    socket.emit('room', {key : key, userKey : userKey});

    //if you emit something in this channel (same as userKey) on server will get here
    socket.on(userKey, function (data) {
        if(data.key === 'a1')
            $("#a1").empty().append(data.content);
    
        if(data.key === 'a2')
            $("#a2").empty().append(data.content);
    
        if(data.key === 'a3')
            $("#a3").empty().append(data.content);
    });

    //if you emit something in this channel ('allClients') on server will get here
    socket.on('allClients', function(data) {
        if(data.key === 'a1')
            $("#a1").empty().append(data.content);
    
        if(data.key === 'a2')
            $("#a2").empty().append(data.content);
    
        if(data.key === 'a3')
            $("#a3").empty().append(data.content);      
    })
});

The serverside:

io.on('connection', function (socket) {
    console.log('Connection');
    socket.removeAllListeners();  
    socket.on('room', function (data) {
        console.log(`Data: ${data}`);

        if(data.key === 'a1')
            io.sockets.emit(data.userKey, {key : 'a1', content: a1});
        if(data.key === 'a2')
            io.sockets.emit(data.userKey, {key : 'a2', content: a2});
        if(data.key === 'a3')
            io.sockets.emit(data.userKey, {key : 'a3', content: a3});
        if(data.key === 'a4')
            io.sockets.emit(data.userKey, {key : 'a4', content: a4});
    })
});

As you see, i just change the variable you pass as parameter to give me what i need, as serverside as clientside.