No estás explicando en qué consiste la repetición que quieres evitar.
Revisando qué ocurre en un par de escenarios, supongamos que invocas la función una vez. Con eso el listener queda declarado y reaccionará a las actualizaciones futuras. La primera vez que el socket manda una actualización, por ejemplo
data = {
users: ['pedro', 'juan']
}
se llena el div, quedando:
<div id="usuarios">
<div id="user">pedro</div>
<div id="user">juan</div>
</div>
Ahí ya hay un error, formalmente hablando. Tienes varios id #user. Podrías interpolar el contenido del índice i
, o el valor de data.users[i]
para generar un identificador único, si realmente necesitas un id.
for(let i = 0; i < data.users.length; i++){
let us = `<div id ="user_${i}">${data.users[i]}</div>`;
usuarios.innerHTML += us;
console.log(data.users[i]);
}
Segundo, imagino que tú sabes el formato de los items del array users
, que no vendrá por ejemplo un objeto entre medio de los strings.
Cuando el socket mande una nueva actualización, que podría ser
data = {
users: ['juan', 'diego']
}
Se repetirán los elementos que ya hayas recibido, quedando
<div id="usuarios">
<div id="user">pedro</div>
<div id="user">juan</div>
<div id="user">juan</div>
<div id="user">diego</div>
</div>
Si esta es la repetición que quieres evitar, podrías limpiar el contenedor antes del bucle
usuarios.innerHTML = '';
for(let i = 0; i < data.users.length; i++){
let us = `<div id ="user_${i}">${data.users[i]}</div>`;
usuarios.innerHTML += us;
console.log(data.users[i]);
}
Por otro lado, puede que la repetición a la que te refieres ocurra porque invocas dos veces (o más) la función updateUsers
. Cada vez que la invocas se declara un nuevo listener que existe junto a los anteriores. Declarar dos listeners provocará que el evento gatille ambos listeners.
Una manera de evitar esta situación sería fijar una propiedad en el objeto socket que señale que el listener ya ha sido declarado, en cuyo caso no corresponde declarar otro más.
function updateUsers(socket){
if(socket.listenerDeclared) {
return;
}
socket.on('updateUsers',function(data){
// ....
}
socket.listenerDeclared = true;
}
usuarios.innerHTML='';
antes del bucle for. Pero ojo, estás repitiendo el id#user
. Los id deben ser únicos en un documento. Puedes usarclass
si sólo quieres darle estilo – ffflabs el 1 nov. 20 a las 1:12