socket.io - show the users in the correct div

Question

I'm pretty new to express and socket.io and I'm trying to achieve a little website:

What is it supposed to do:

• You can connect to the website and enter a username
• You have to select a column where you want to write (it's stored in var column)
• Once on the page with the four column, you can see your username at the top of your column and start doing things there.
• The other users see you in the correct column.

What it is not doing:

Actually the three points above are working quite well, my issue is with the last point :

• The other users see you in the correct column.

My code is somehow not displaying every user in the correct column, in fact, it's displaying them in the same column as you are

Here is the code

$(document).ready(function () {
var socket = io();
var username = prompt("premier utilisateur : ", "nom");
var column = prompt("colonne ", "1,2,3 ou 4");
var gdhb = "";

socket.emit("new user entered his name");
socket.emit("nomUser", username);

if (column === "1") { column = ".one"; gdhb = ".dir1" }
if (column === "2") { column = ".two"; gdhb = ".dir2" }
if (column === "3") { column = ".three"; gdhb = ".dir3" }
if (column === "4") { column = ".four"; gdhb = ".dir4" }

socket.emit("user chose a column");
socket.emit("columnUser", column);

$(column).append($("<p class='username'>" + username + "</p>"))
$(document.body).click(function (b) {

    var verbes = [
        "appuie",
        "bouscule",
        "pousse"
    ];

    var adverbes = [
        "puis",
        "ensuite",
        "pour finir",
        "alors"
    ];

    var verbe = verbes[Math.floor(Math.random() * verbes.length)];
    var adverbe = adverbes[Math.floor(Math.random() * adverbes.length)];
    var verbadv = verbe + " " + adverbe;
    console.log(verbadv);

    socket.emit("verbadverbe");
    socket.emit("verbadv", verbadv);

    var div = $("<div />", {
        "class": "document"
    })
        .css({
            "left": b.pageX + 'px',
            "top": b.pageY + 'px'
        })
        .append($("<p>" + verbadv + "</p>"))
        .appendTo(column);
});

$(document.body).contextmenu(function (rc) {
    var div = $("<div />", {
        "class": "document"
    })
        .css({
            "left": rc.pageX + 'px',
            "top": rc.pageY + 'px'
        })
        .append($("<p>recule</p>"))
        .appendTo(column);
});

var direction = "";
var oldx = 0;
var oldy = 0;
mousemovemethod = function (e) {

    if (e.pageX > oldx && e.pageY == oldy) {
        direction = "gauche";
    }
    else if (e.pageX == oldx && e.pageY > oldy) {
        direction = "bas";
    }
    else if (e.pageX == oldx && e.pageY < oldy) {
        direction = "haut";
    }
    else if (e.pageX < oldx && e.pageY == oldy) {
        direction = "droite";
    }

    $(gdhb).append($("<p class='direction' id='direction'>" + direction + "</p>"))
    $(".direction").prev().remove();

    oldx = e.pageX;
    oldy = e.pageY;
}
document.addEventListener('mousemove', mousemovemethod);

socket.on("columnUser", function (column) {
    socket.on("nomUser", function (username) {
        $(column).append($("<p class='username'>" + username + "</p>"));

        socket.on("verbadv", function (verbadv) {
            var div = $("<div />", {
                "class": "document"
            })
                .append($("<p>" + verbadv + "</p>"))
                .appendTo(column);
        });
    });
});
});

and the index.js :

const path = require('path');
const http = require('http');
const express = require('express');
const socketio = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketio(server);

app.use(express.static(path.join(__dirname, 'public')));

io.on('connection', (socket) => {
    console.log('Nouvel utilisateur')

    socket.on("nomUser", (username) => {
        console.log(username);
        io.emit("nomUser", username);
    });
    socket.on("verbadv", (verbadv) => {
        console.log(verbadv);
        io.emit("verbadv", verbadv);
    });

    socket.on("columnUser", (column) => {
        console.log(column);
        io.emit("columnUser", column);
    });

});


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

Also if it's needed to understand better, here is the css

body {
    font-family: sans-serif;
    font-size: 1.3rem;
    margin: 0;
    background-color: DarkSlateGray;
  }
  
  .wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 0px;
    grid-auto-rows: minmax(100vh, auto);
    height: 100vh;
  }
  
  .one,
  .two,
  .three,
  .four {
     -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
    position: relative;
    overflow: scroll;
    height: 100%;
    background-color: tan;
  }
  
  .one {
    grid-column: 1 / 2;
  }
  
  .two {
    grid-column: 2 / 3;
  }
  
  .three {
    grid-column: 3 / 4;
  }
  
  .four {
    grid-column: 4 / 4;
  }
  
  .one::-webkit-scrollbar, 
  .two::-webkit-scrollbar, 
  .three::-webkit-scrollbar, 
  .four::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
  }
  
  .note {
    text-align: center;
    width: 100px;
    height: 30px;
  }
  
  .note p{
    filter: drop-shadow(0 0 0.75rem black);
  }
  
  .document{
  
    text-align: center;
  }
  .document p{
      padding: 0;
     margin: 0;
  }
  
  .username{
    text-align: center;
      padding: 0;
     margin: 0;
  }
  
  .direction{
    position: fixed;
    bottom : 0;
    width: 25vw;
    text-align: center;
  }

Thanks a lot for the precious help.

Answer 1

i've solved your problem with sockets. See at my solution.

client.js

function columnIndexIsValid(index, columnsQuantity) {
  return index >= 0 && index <= columnsQuantity;
}

function fullNameIsValid(fullName) {
  return typeof fullName === 'string' && fullName.length > 2;
}

function reloadPage() {
  window.location.reload();
}

function rand(min, max) {
  return Math.floor(min + Math.random() * (max - 1 - min));
}

function getRandomColour(colours = []) {
  const colour = colours[rand(0, colours.length)];

  return `#${colour}`;
}

function getUserHtml(user) {
  return `<div class="column__users-list__item" data-item-id="${user.id}">${user.fullName}</div>`;
}

function getDrawnUsersNodes() {
  return $('.column__item');
}

function canIRenderUsers(usersQuantity) {
  const $renderedUsersQuantity = getDrawnUsersNodes().length;

  return $renderedUsersQuantity < usersQuantity;
}

function renderUserHtmlToNode($node, html) {
  $node.html($node.html() + html);
}

function getColumnUsersList(columnNode) {
  const $column = $(columnNode);
  return $column.find('.column__users-list');
}

function removeDrawnUserById(userId) {
  $(`[data-item-id=${userId}]`).remove();
}

class DrawnUsers {
  constructor() {
    this.users = new Map();
  }

  getUserById(id) {
    return this.users.get(id);
  }

  add(id, state) {
    this.users.set(id, state);
  }

  removeById(id) {
    this.users.delete(id);
  }

  exists(id) {
    return this.users.has(id);
  }
}

class Storage {
  static setItem(key, value) {
    localStorage.setItem(key, value);
  }

  static getItem(key) {
    return localStorage.getItem(key) || null;
  }
}

function generateUserId() {
  return `user-${rand(rand(0, 10000), rand(20000, 50000))}`;
}

class UserState {
  constructor() {
    this.state = {};
  }

  get() {
    return {
      data: this.state,
    };
  }

  set fullName(fullName) {
    this.state.fullName = fullName;
  }

  get fullName() {
    return this.state.fullName;
  }

  set id(id) {
    this.state.id = id;
  }

  get id() {
    return this.state.id;
  }

  set columnIndex(columnIndex) {
    this.state.columnIndex = columnIndex - 1;
  }

  get columnIndex() {
    return this.state.columnIndex;
  }
}

$(document).ready(function () {
  const drawnUsers = new DrawnUsers();
  const colours = ['F2994A', 'F2C94C', '6FCF97', '2F80ED', '56CCF2', 'DFA2F5'];
  const $columns = $('.column');
  const $container = $('.container');
  const userState = new UserState();

  $columns.each(function () {
    const $self = $(this);
    $self.css({ 'background-color': getRandomColour(colours) });
  });

  userState.fullName = prompt('Type your fullName');
  userState.columnIndex = +prompt('Type your column number');

  if (
    !fullNameIsValid(userState.fullName) ||
    !columnIndexIsValid(userState.columnIndex, $columns.length)
  ) {
    return reloadPage();
  }
  $container.addClass('active');

  const socket = io('ws://localhost:3000');

  socket.on('connect', () => {
    const generatedUserId = generateUserId();

    userState.id = Storage.getItem('userId') || generatedUserId;
    Storage.setItem('userId', userState.id);

    socket.emit('connected', userState.get());
    socket.emit('addUser', userState.get());

    socket.on('updateCurrentUsers', ({ data }) => {
      const { users } = data;

      if (!users || !canIRenderUsers(users.length)) {
        return;
      }

      users.forEach((user) => {
        const $column = $columns[user.columnIndex];

        if ($column) {
          if (!drawnUsers.exists(user.id)) {
            drawnUsers.add(user.id);
            renderUserHtmlToNode(
              getColumnUsersList($column),
              getUserHtml(user)
            );
          }
        }
      });
    });
    socket.on('newUser', ({ data }) => {
      console.log('[debug] newUser: ', data);
      const $column = $columns[data.columnIndex];

      if (!$column) {
        return;
      }

      if (drawnUsers.exists(data.id)) {
        drawnUsers.removeById(data.id);
        removeDrawnUserById(data.id);
      } else {
        drawnUsers.add(data.id);
        renderUserHtmlToNode(getColumnUsersList($column), getUserHtml(data));
      }
    });
    socket.on('disconnect', () => {
      socket.open();
    });
  });
});

server.js

const path = require('path');
const http = require('http');
const express = require('express');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

app.use(express.static(path.join(__dirname, 'public')));

io.on('connection', (socket) => {
  console.log('[debug] Client was connected successfully to server');
  socket.on('connected', (user) => {
    console.log('connected user data', user.data);
    socket.data = user.data;

    const users = Array.from(io.sockets.sockets.values()).map(
      ({ data }) => data
    );

    console.log('users', users);
    socket.emit('updateCurrentUsers', {
      data: {
        users,
      },
    });
  });

  socket.on('addUser', ({ data }) => {
    socket.data.columnIndex = data.columnIndex;
    socket.broadcast.emit('newUser', {
      data,
    });

    const users = Array.from(io.sockets.sockets.values()).map(
      ({ data }) => data
    );

    socket.broadcast.emit('updateCurrentUsers', {
      data: {
        users,
      },
    });
  });
});

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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./index.css">
    <title>Users Columns</title>
</head>
<body>
<div class="container">
    <div class="column">
        <span class="column__index">#1</span>
        <div class="column__users-list"></div>
    </div>
    <div class="column">
        <span class="column__index">#2</span>
        <div class="column__users-list"></div>
    </div>
    <div class="column">
        <span class="column__index">#3</span>
        <div class="column__users-list"></div>
    </div>
    <div class="column">
        <span class="column__index">#4</span>
        <div class="column__users-list"></div>
    </div>
</div>

<script
    src="https://code.jquery.com/jquery-3.5.1.js"
    integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
    crossorigin="anonymous"></script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.1/socket.io.js"
    integrity="sha512-vGcPDqyonHb0c11UofnOKdSAt5zYRpKI4ow+v6hat4i96b7nHSn8PQyk0sT5L9RECyksp+SztCPP6bqeeGaRKg=="
    crossorigin="anonymous"></script>
<script src="./client.js"></script>
</body>
</html>

index.css

html, body {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.container {
  display: none;
}

.container.active {
  display: flex;
  flex-direction: row;
  height: 100vh;
}

.container .column {
  width: calc(100% / 4);
  text-align: center;
  padding: 20px 0;
}

.container .column .column__users-list {
  display: flex;
  flex-direction: column;
}

.container .column .column__index {
  color: #FFF;
  font-size: 36px;
  letter-spacing: 8px;
}

Answer 2

hey) Let's look on that case more attentive, you have created a variable what contains a column index. right? This variable does store inside var variable. That is global variable for your script. I think you need to store each user column info inside each socket. If you don't know, each socket contains some info inside itself like id and other what can be used in your project if you'd like. But for this case you need to do so:

1. Ask new user what column he would like to choose.
2. Write to his socket data/info his column index.
3. When you do broadcast (It's when you send an object of data to each socket in room all each socket at all) just take this column index and draw this user in correct position. But make sure what your var column has a correct value. I can advice you to use const/let in javascript :)