Socket.io HTML - 将独特的内容发送到独特的客户的 HTML 页面

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

我正在使用 NodeJS 和 Socket.io。我收到来自用户的查询 (https://localhost:3000?id=12345) 并使用此查询我想发送此特定用户的唯一内容。 现在我的问题是所有客户端都根据最后一个客户端的最后一个查询获取数据。 我已经尝试过腾出房间和我想过或在网上找到的多种其他解决方案,但都没有成功。

我收到了这样的页面查询,

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

客户

$(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);
 });
…

服务器

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);
  })
});
…

我真的不明白如何将每个客户端查询与服务器分开,然后向每个客户端发送唯一的内容,而不会一个客户端的内容与另一个客户端的内容发生干扰。 我最初的想法是为每个客户创建一个房间,并通过使用该房间发送他们独特的内容,但由于某种原因,内容就像是在每个客户中结束。

非常感谢!

是不是把用来管理内容的对象改成这样比较好:

客户端:

$(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);      
    })
});

服务器端:

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});
    })
});

如您所见,我只是更改您作为参数传递的变量以提供我需要的内容,无论是服务器端还是客户端。