1

Estoy haciendo una especie de Chat con socketio. Sin embargo, me encuentro con el problema de que levanto mi aplicación y con solo abrirla en el navegador, ya estoy obteniendo el id del socket. Ahora, si en otra pestaña abro de nuevo la aplicación, me genera otro token diferente.

Entonces, si yo inicio sesión en mi aplicación pero la abro en dos pestañas o más del navegador, estaré obteniendo n ids diferentes.

Al momento de enviar un mensaje, ¿Cómo hago para que le llegue al usuario independientemente de cuántos ids tenga la misma sesión?

El código es el siguiente:


io.on('connection', (socket) => {
  socket.on('new-message', (data)=>{
    io.to(data.id).emit('success', 'Mensaje Enviado')
    io.emit('new-message', data.message)
  })
}) ```

En data, obtengo el id del socket del cliente y de esa misma forma emito con io.to.

Pero si abro la aplicación, en otra pestaña, tendría 2 socketid para el mismo usuario.

¿Cómo puedo solucionar ese problema?

1

2 respuestas 2

0

Para hacer lo que comentas necesitas tener asociado el id del socket con el usuario.

Esto se puede hacer de varias maneras, se puede guardar en memoria del propio servidor o puedes guardarlo en una base de datos.

Si un usuario como dices puede tener la sesión abierta en varias pestañas/dispositivos a la vez, significa que puedes tener n sockets para cada usuario.

De modo que para solucionar esto deberías almacenar en algún sitio la relación de sockets con los usuarios y cuando quieras enviar un mensaje a un usuario, tendrás que mandarselo a todos los id sockets que tengas relaacionados a ese usuario.

0

Una solución sería declarar un objeto que guarde todos los id del socket y lo relaciones

Primero desde el servidor le mandarías el id al cliente, y justo cuando se haga la conexión a socket enviar un evento que guardará el socket y su relación con el id

De lado del cliente

var socket = io.connect();
// En mi caso uso EJS como motor de plantilla para imprimir datos en la vista
// entonces quedaría de la siguiente manera
const miId = <%= usuario_id %>
socket.on("connect", ()=>{
    console.log(socket.id);
    // Se emite un evento inmediatamente para registrar el id con el socket
    socket.emit("registrarse", miId);
});

Del lado del servidor:

var usuarios = [];
io.on('connection', (socket) => {

    // El evento al realizar la conexión, se obtiene el id
    socket.on("registrarse", (id) => {
        

        let flag = true; // Variable de apoyo para romper el bucle

        // esto se hace con la finalidad de que no se envíen eventos
        // y se registren datos en nuestro objeto innecesarios que
        // luego no podremos borrar
        for(var i = (usuarios.length - 1); i >= 0; i--){
            // Si ese socket ya ha sido registrado, entonces no procede
            if(usuarios[i].socketId == socket.id){
                flag = false;
                break;
            }
        }

        // Si no se ha registrado el socket, se agrega al objeto
        if(flag){
            const nuevo = {
                 socketId: socket.id,
                 userId: id
            }
            usuarios.push(nuevo);
            console.log("Nuevo usuario registrado: ", usuarios);
        }
    });

    // Se dispara cuando el socket se ha desconectado
    socket.on('disconnect', ()=> {
        // Se elimina el socket que se ha desconectado del objeto
        usuarios = usuarios.filter(item=>{
            if(item.socketId != socket.id){
                return item;
            }else{
                console.log("Usuario retirado");
            }
        });
    });

})

Esto evita que el objeto se llene de datos basura y en caso que un graciosillo intente escribir en la consola del navegador socket.emit("registrarse", miId); simplemente no agregará nada al objeto. Si el usuario cierra la ventana o pierde la conexión o algo parecido, también te aseguras de que el socket se borre del objeto usuarios.

Es una solución bastante sencilla, sin embargo te saca de un gran apuro cuando suceden estas cosas, el que tan protegido tengas ese id dependerá de ti, pero espero y a alguien más le ayude esto :3

Y si se quiere mandar un mensaje a una persona en especifico el cual podría tener 2 o más pestañas abiertas, puedes hacer esto:

socket.on("mensaje", (idAmigo, tuMensaje)=>{
    for (i in usuarios){
        if(usuarios[i].userId == idAmigo){
            io.to(usuarios[i].socketId).emit("mensaje", tuMensaje)
        }
    }
});

Como verás, estoy utilizando tres tipos de recorridos, el primero es con un for recorriendo el objeto a la inversa, esto porque al realizar una conexión el usuario se agregará al final de la fila, y si vuelve a abrir enseguida una nueva pestaña, podrías reducir mucho el tiempo que recorre el objeto, ya que el ciclo se rompe cuando encuentra una coincidencia. El segundo se usa filter para eliminar el elemento, el ciclo no se romperá, puesto que puede haber más de una coincidencia y lo que queremos saber es borrar todas las posibles coincidencias, pero no sabemos cuantos hay. Por ultimo un for in, simplemente es para recortar el for, de igual forma se deberá recorrer toda la fila.

También puedes agregar una conexión a base de datos para guardar tus mensajes en una tabla, eso ya depende de tus necesidades.

Se que llegué un poco tarde, pero yo realmente tenía esta duda y no encontré una respuesta clara, espero y a alguien le ayude. Si tienen forma de mejorarlo, sería de gran ayuda

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.