Socket IO: New Connection breaks room connection

Question

I have an application with an object that can be moved on an X-Y-Z axis. A user can use a button to retrieve the socket ID and send it to a friend. When you start the application and set the room parameter, you are added to the user's group.

My problem now is: As soon as a new user opens the application (with and without parameter in url), then the connection does not work in the group anymore.. When I log all groups to the console, then I can see that these 2 socket.id's are still in the same group, but its not working anymore.

Client.js

// client
var socket = io();
// object which holds position data
var obj = app.scene.getObjectByName('persp1');
// on connection receive socket.id
socket.on("connect", () => {
  $('#inviteURL').html(socket.id);
});

// detect if client joined a session, cannot detect if host
if (!hasQueryParams(window.location.href)) {
  document.getElementById("buttonInvite").style.display = "block";
} else {
  document.getElementById("buttonLeave").style.display = "block";
}

function hasQueryParams(url) {
  return url.includes('?');
}
// when receiving data from server update objects position
socket.on('newPos', function (pos) {
  obj.position.x = pos.x;
  obj.position.y = pos.y;
  obj.position.z = pos.z;
});
// current position of object
var x = obj.position.x;
var y = obj.position.y;
var z = obj.position.z;
var oldPos;
// check if position has changed, if yes then send event to server with new position in 60fps
setInterval(function () {
  if (typeof oldPos !== "undefined" && (x !== obj.position.x || y !== obj.position.y || z !== obj.position.z)) {
    socket.emit('movement', {
      x: obj.position.x,
      y: obj.position.y,
      z: obj.position.z
    });
  }
  oldPos = obj.position.x;
  x = obj.position.x;
  y = obj.position.y;
  z = obj.position.z;
}, 1000 / 60);

Server.js

//server
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);

const {Server} = require("socket.io");
const io = new Server(server);
const url = require('url');
// use public folder
app.use(express.static(__dirname + '/public'));
//variable which will hold get-url-parameter with roomID
var room;
// send users to index.html
app.get('/', (req, res) => {
  //get url parameter room
  room = req.query.room;
  res.sendFile(__dirname + '/roman_websockets.html');
});
// on connection
io.on('connection', (socket) => {
  // if theres a get-url parameter then join the room
  if (typeof room !== "undefined") {
    socket.join(room);
  }
  // show rooms all 5 seconds
  setInterval(function () {
    console.log('rooms');
    console.log(io.sockets.adapter.rooms);
  }, 5000);

  // when receiving new client-data from event movement, send client-data to all clients in group including sender
  socket.on('movement', function (movementData) {
    io.in(room).emit('newPos', movementData);
  });
  // on disconnect
  socket.on('disconnect', () => {
    socket.disconnect();
    socket.removeAllListeners();
    console.log('user disconnected');
  });
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});

Answer 1

I was able to resolve the issue.

Problem was that var room got overriden everytime a new connection was made, and then the events only got emitted to the room the last connection was made to.

To solve this I've created a players object which holds the room now. Then I can send the event to the players room.

Create players object and assign room to it.

var players = {};

players[socket.id] = {
  playerId: socket.id,
  playerRoom: room
};

and later send it to the players room. Now its dynamic.

if (players[socket.id].playerRoom !== 'default') {
  io.to(players[socket.id].playerRoom).emit('newPos', movementData);
}