socket.io - 在正确的 div 中显示用户

Question

我对 express 和 socket.io 还很陌生，我正在努力实现一个小网站：

它应该做什么：

• 您可以连接到网站并输入用户名
• 您必须选择要写入的列（它存储在var column）
• 进入包含四列的页面后，您可以在列的顶部看到您的用户名并开始在那里进行操作。
• 其他用户在正确的列中看到您。

它没有做什么：

其实上面三点都很好用，我的问题是最后一点：

• 其他用户在正确的列中看到您。

我的代码不知何故没有在正确的列中显示每个用户，事实上，它在与您在同一列中显示它们

这里是代码

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

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

另外，如果需要更好地理解，这里是 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;
  }

非常感谢您的宝贵帮助。

Answer 1

我已经解决了您的套接字问题。请参阅我的解决方案。

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

嘿）让我们更仔细地看一下这个案例，你已经创建了一个包含列索引的变量。正确的？该变量确实存储在 var 变量中。这是脚本的全局变量。我认为您需要将每个用户列信息存储在每个套接字中。如果您不知道，每个套接字内部都包含一些信息，例如 id 和其他可以在您的项目中使用的信息（如果您愿意）。但是对于这种情况，您需要这样做：

1. 询问新用户他想选择哪一列。
2. 写入他的套接字数据/信息他的列索引。
3. 当您进行广播时（当您向房间中的每个套接字发送一个数据对象时，所有每个套接字）只需获取此列索引并将该用户绘制在正确的位置。但请确保您的 var 列具有正确的值。我可以建议你在 javascript 中使用 const/let :)