es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo mostrar usuarios en línea en el servidor de socket.io en Node.js?

01 Jun, 2023 Programación

Estoy creando un sitio web de ajedrez. Necesito mostrar a los jugadores en línea disponibles cuando un usuario haga clic en jugar en línea. Desde la lista de jugadores en línea, el usuario puede hacer clic y enviarles una solicitud para jugar. Ahora, mi principal problema es que soy nuevo en socket.io y no encontré ningún recurso al respecto en línea. No estoy tratando de mostrar los usuarios disponibles en una sola habitación, sino en todos los jugadores disponibles de los servidores de socket.

Aquí se mostrarán los Jugadores en Línea en una lista

Todos los usuarios se agregan al array de usuarios en el lado del servidor, pero no sé cómo obtener sus nombres e información de la habitación en el lado del cliente y luego mostrarlo en el frontend.

function sendName(name) {
  var isNameValid = true;
  for (var i = 0; i < users.length; i++) {
    if (users[i].name === name) {
      isNameValid = false;
      console.log(name + " ya está tomado ");
      console.log(users);
      socket.emit("nameError", "El nombre ya existe, Inténtelo de nuevo");
      return;
    }
  }
  if (isNameValid) {
    var room = generateRoomId();
    users.push({ id: socket.id, name: name, room: room });
    socket.join(room);
    socket.emit("roomId", room);
  }
}

Todos los usuarios se agregan al array de usuarios en el lado del servidor, pero no sé cómo obtener sus nombres e información de la habitación en el lado del cliente y luego mostrarlo en el frontend.

Jugadores en línea

Los jugadores en línea se mostrarán aquí. Además, cuando un usuario se desconecte, la lista de jugadores en línea debe actualizarse, lo que creo que socket puede hacer. Estoy haciendo un proyecto y cualquier ayuda será muy apreciada y también aprenderé de ella.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mostrar los jugadores disponibles en línea cuando un usuario hace clic en jugar en línea, se puede usar socket.io para emitir un evento al servidor cuando el usuario hace clic en el botón. En el lado del servidor, se puede crear una función que recupere una lista de todos los jugadores en línea y la envíe de regreso al lado del cliente. Aquí hay un ejemplo:

    Lado del cliente:

    // Cuando el usuario hace clic en el botón 'jugar en línea'
$('#play-online').on('click', function() {
  socket.emit('getOnlinePlayers');
});

// Agrega los jugadores en línea a la lista
socket.on('onlinePlayers', function(players) {
  var $users = $('#users');
  $users.empty();
  for (var i = 0; i < players.length; i++) {
    var li = '<li><a href="#" data-player-id="' + players[i].id + '">' + players[i].name + '</a></li>';
    $users.append(li);
  }
});

    Lado del servidor:

    io.on('connection', function (socket) {  
  // Cuando un usuario se conecta, agrégalo a la lista de jugadores en línea
  socket.on('join', function (name) {
    var player = { id: socket.id, name: name };
    onlinePlayers.push(player);
    io.emit('onlinePlayers', onlinePlayers);
  });

  // Cuando un usuario se desconecta, elimínalo de la lista de jugadores en línea
  socket.on('disconnect', function () {
    var player = findPlayerById(socket.id);
    if (player) {
      onlinePlayers.splice(onlinePlayers.indexOf(player), 1);
      io.emit('onlinePlayers', onlinePlayers);
    }
  });

  // Obtener una lista de todos los jugadores en línea
  socket.on('getOnlinePlayers', function() {
    socket.emit('onlinePlayers', onlinePlayers);
  });
});

    En este ejemplo, cuando el usuario hace clic en el botón ‘jugar en línea’, se emite un evento ‘getOnlinePlayers’ al servidor. El servidor responde enviando de regreso una lista de jugadores en línea usando el evento ‘onlinePlayers’.

    Para mostrar la lista de jugadores en línea, se puede crear un div con una lista desordenada vacía y darle un id de ‘users’. Una vez que se recibe la lista de jugadores en línea, se puede recorrer los jugadores y crear elementos de lista con sus nombres e ID. Finalmente, se pueden agregar los elementos de lista a la lista desordenada.

    Para actualizar la lista de jugadores en línea cuando un usuario se desconecta, se puede escuchar el evento ‘disconnect’ y eliminar al jugador desconectado de la lista de jugadores en línea. Luego, se puede emitir el evento ‘onlinePlayers’ nuevamente para actualizar la lista en el lado del cliente.

Comments are closed.