emptでsocket.ioの二重応答を取得

Question

私はノードjsとsocket.ioでチャットアプリケーションを作っています。私が持っているのは、ユーザーが自分のチャットをクリックしてそのチャットをクリックしたときに、そのチャットをクリックしたその現在のユーザーのIDを送信しても、そのメッセージとIDを開く彼または彼女がこれらの2つのIDを使ってチャットしたターゲットユーザーは、すべてのユーザーのメッセージを取得しています。しかし、問題は、最初のクリックで検索されたメッセージは、うまく動作するオブジェクトの配列ですが、同じターゲットが再びクリックされたときに取得されたメッセージ配列の数は2回で、クリックされるたびに配列数それらを取得します。

TOよく理解して、スナップショットを見てください。クリックごとに、検索された配列の数が2倍になることがわかります。

マイコード - NodeJsそれが受信される1つの

socket.on("get_user_messages",(data)=>{ 
 
      console.log(data); 
 
    \t \t 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; 
 
     
 
\t  d.addEventListener("click",(e)=>{ 
 
\t  \t e.preventDefault(); 
 
\t  \t var event = e.target; 
 
\t  \t console.log("clicked"); 
 
       if(event.parentNode.className=="indUser" || event.parentNode.className=="ind_user_messages"){ 
 
       \t if(event.parentNode.className=="ind_user_messages"){ 
 
       \t \t _id = event.parentNode.getAttribute("data-id"); 
 
       \t } else if(event.parentNode.className=="indUser"){ 
 
       \t \t _id = event.getAttribute("data-id"); 
 
       \t } 
 

 
       \t socket.emit("get_user_messages",{clicked:_id,active:data.active_user}); 
 

 
\t    socket.on("get_ret_messages",(data)=>{ 
 
\t    \t result = []; 
 

 
\t    \t /*for(let i = 0; i<data.length;i++){ 
 
\t    \t \t if(data[i].mess_to == data.active_user){ 
 
\t \t    \t \t 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>'; 
 
\t    \t   chatBody.insertAdjacentHTML("beforeend",mess); 
 
\t \t    \t  
 
\t \t    \t } 
 
\t \t    \t 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>'; 
 
\t    \t  chatBody.insertAdjacentHTML("beforeend",messs); 
 
\t    \t }*/ 
 
\t    \t result = data; 
 
\t    \t console.log(result); 
 
\t    }); 
 

 
       } 
 

 

 
\t  })

Answer 1

あなたがクリックするたびに新しいソケットリスナーを追加しています。

あなたのクリックリスナーの外ソケットリスナーを移動する必要があります。

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

}; 

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