0
220
Vistascómo evitar que firebase muestre un mensaje varias veces
Estoy usando firebase para chatear. Cuando envío el formulario para mensajes enviados, todos los mensajes se repiten y se recuperan de principio a fin. Aquí vea una imagen a continuación para una mejor comprensión. 
Aquí está el código de lo que realmente estoy haciendo.
user_chats.onSnapshot((querySnapshot) => { querySnapshot.forEach(doc => { user_messages.push(doc.data()); }); showMessages(); }); function showMessages() { for (let i =0;i<user_messages.length;i++) { let user_id = user_messages[i].user_id; if (user_id == auth_id) { let selector = $('#my_msg .row'); selector.find('.chat').text(user_messages[i].message); selector.clone().appendTo('.msg_area_div'); } else{ let selector = $('#user_msg .row'); selector.find('.chat').text(user_messages[i].message); selector.clone().appendTo('.msg_area_div'); } } }Aquí quiero mostrar los únicos elementos nuevos que se envían, no todos los mensajes anteriores. Ayúdame a resolver este problema. AIT
editado
Después de usar la solución de @Frank van Puffelen
function fetchMessage() { let document_id = documentID(); let table = db.collection("chat").doc(document_id).collection('chats'); let user_chats = table.orderBy('created_at'); user_chats.onSnapshot((querySnapshot) => { querySnapshot.docChanges().forEach(change => { if (change.type === "added") { user_messages.push(change.doc.data()); } }); showMessages(); }); } function showMessages() { $('.msg_area_div').empty(); for (let i = 0; i < user_messages.length; i++) { let active_user_id = user_messages[i].user_id; if (active_user_id == auth_id) { let selector = $('#my_msg .row'); selector.find('.chat').text(user_messages[i].message); selector.clone().appendTo('.msg_area_div'); } else { let selector = $('#user_msg .row'); selector.find('.chat').text(user_messages[i].message); selector.clone().appendTo('.msg_area_div'); } } scrollDown(); } obtuve el resultado como estos 
1 Respuestas
Responde la pregunta0
Dado que está recorriendo la QuerySnapshot en sí, siempre verá todos los documentos dentro de su ciclo, incluso si solo hubo un cambio en la instantánea.
Esta es una opción válida, pero significa que deberá borrar y reconstruir todo el nodo de chat cada vez que se llame a su onSnapshot . Puede hacer esto borrando el HTML en su showMessages borrando .msg_area_div antes de agregar los mensajes con:
$('.msg_area_div').empty();Alternativamente, puede usar las propiedades de nivel inferior para procesar solo los documentos que se agregaron, cambiaron o eliminaron con:
snapshot.docChanges().forEach((change) => { if (change.type === "added") { console.log("New city: ", change.doc.data()); } if (change.type === "modified") { console.log("Modified city: ", change.doc.data()); } if (change.type === "removed") { console.log("Removed city: ", change.doc.data()); } });