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!
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.