Почему Socket.IO добавляет двух клиентов, когда подключается только один?

Question

В моем приложении пользователь переходит на домашний экран, выбирает свое имя пользователя, а затем переходит на другую страницу, с которой он может перейти на страницу, где находится комната.

У меня есть код, который увеличивает переменную clients каждый раз, когда пользователь присоединяется к комнате. Но всякий раз, когда присоединяется новый пользователь, clients увеличивается на количество подключенных пользователей. Это не желаемое поведение. Мой код ниже:

app.post('/race', function(req,res) {
  let race = io.of('/race').on('connection', (socket) => {
    console.log('A user has entered the race!');
    socket.on('joinRoom', function(roomName) {
      socket.room = roomName;
      console.log(socket.room);

      clients++;
      console.log(clients);
    });

    socket.on('disconnect', function() {
      clients--;
      console.log("A user has disconnected");
      console.log(clients);
    });
  });

  res.sendFile(path.join(__dirname, '/client/race/index.html'));
});

Для краткости я удалил некоторые функции из своего кода. Но основная функциональность добавления пользователей в clients все еще там. Когда только один пользователь подключается и отключается, он работает нормально, но когда другой пользователь присоединяется, он добавляет 2, увеличивая общее количество до 3. Когда третий пользователь присоединяется, он добавляет 3, увеличивая общее количество до 6.

Должна быть некоторая проблема с функцией socket.on('joinRoom - она ​​вызывается столько раз, сколько подключенных пользователей. Обратите внимание, что console.log('A user has entered the race!'); не вызывается дважды.

Почему возникает эта проблема?

Answer 1

//Server
app.get('/race', function(req, res) {
  res.sendFile(path.join(__dirname, '/client/race/index.html'));
});  

const racesocket = io('http://localhost', {
  path: '/race'
});

racesocket.on('connection', (socket) => {
    console.log('A user has entered the race!');
    socket.on('joinRoom', function(roomName) {
      socket.room = roomName;
      console.log(socket.room);

      clients++;
      console.log(clients);
    });

    socket.on('disconnect', function() {
      clients--;
      console.log("A user has disconnected");
      console.log(clients);
    });
  });


//Client
<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io('http://localhost/race');
</script>

весь этот фрагмент кода вызывается каждый раз, когда пользователь выполняет команду "/ race" POST api.Это не нужно, удалите его оттуда, как только клиент подключится к «/ race» в сокете, он автоматически перейдет в обратный вызов onconnection.обратные вызовы событий вместо одного.