javascript - 在 socket.io 中发出双重响应

Question

我正在 Node 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

您的错误是每次单击时都会添加一个新的套接字监听器。

您需要将套接字监听器移到单击监听器之外:

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

};

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