在socket.io上獲得雙重響應

Question

我正在節點js和socket.io中創建一個聊天應用程序。 我所不具備的是，當用戶單擊鏈接以轉到與其聊天的用戶的收件箱時，即使單擊，我也會發送單擊目標聊天以打開其消息的當前用戶的ID和他或她通過這兩個ID與之聊天的目標用戶，我正在檢索每個用戶的消息。 但是問題是，在第一次單擊時，檢索到的消息是可以正常工作的對象數組，但是當再次單擊相同的目標時，檢索到的消息數組的數量是兩倍，每次單擊時，其數組的數量都會翻倍並檢索它們。

為了更好地理解，請看快照。 您可以看到，每單擊一次，檢索到的數組的數量就會增加一倍。

我的代碼-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的位置

 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

您的錯誤是每次單擊時都添加一個新的套接字偵聽器。

您需要將套接字偵聽器移到Click偵聽器之外：

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

};

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