Getting Double response in socket.io on emit

Question

I am making a chat application in node js and socket.io . What I have don is, when a user click a link to go to the inbox of a user he or she chatted with, on that click even I send the id of that current user who clicked target chat to open its messages and the id of the target user who he or she chatted with through these two ids I am retrieving the messages of every user. But the problem is, on the first click the messages retrieved is the array of objects which works fine, but when the same target has been clicked again the messages array retrieved is twice in number and each time it is clicked it double the number of arrays and retrieves them.

TO Better understand , have a look at the snap shot. You can see that on each click the arrays retrieved are double in number.

My Code - NodeJs One

 socket.on("get_user_messages",(data)=>{ console.log(data); var GET_CLICKED_USER_MESS = "SELECT mess_txt,mess_time,mess_to FROM (select mess_to as user_id,mess_txt,mess_time,mess_id,mess_to from messages where mess_from = '"+data.active+"' AND mess_to='"+data.clicked+"' UNION select mess_to as user_id,mess_txt,mess_time,mess_id,mess_to from messages where mess_from = '"+data.clicked+"' AND mess_to='"+data.active+"' ORDER BY mess_id ASC) sq join users on users.id = sq.user_id"; con.query(GET_CLICKED_USER_MESS,(err,res)=>{ if(err) throw err; socket.emit("get_ret_messages",result); }) }); 

JavaScript where it is received

 var d = document, _id, mess, messs, chatBody = document.getElementsByClassName("indChatBody")[0], result; d.addEventListener("click",(e)=>{ e.preventDefault(); var event = e.target; console.log("clicked"); if(event.parentNode.className=="indUser" || event.parentNode.className=="ind_user_messages"){ if(event.parentNode.className=="ind_user_messages"){ _id = event.parentNode.getAttribute("data-id"); } else if(event.parentNode.className=="indUser"){ _id = event.getAttribute("data-id"); } socket.emit("get_user_messages",{clicked:_id,active:data.active_user}); socket.on("get_ret_messages",(data)=>{ result = []; /*for(let i = 0; i<data.length;i++){ if(data[i].mess_to == data.active_user){ mess = '<span class="mess fromMess"><div class="textTime"><span class="messTime">'+data[i].mess_time+'</span></div><p class="senderText">'+data[i].mess_txt+'</p></span>'; chatBody.insertAdjacentHTML("beforeend",mess); } messs = '<span class="mess toMess"><div class="textTime"><span class="messTime">'+data[i].mess_time+'</span></div><p class="senderText">'+data[i].mess_txt+'</p></span>'; chatBody.insertAdjacentHTML("beforeend",messs); }*/ result = data; console.log(result); }); } }) 

Answer 1

Your bug is that you are adding a new socket listener each time you click.

You need to move the socket listener outside of your click listener:

d.addEventListener("click",(e)=>{

};

socket.on("get_ret_messages",(data)=>{}