Estoy tratando de crear un chat en vivo con Vanilla JS y Firebase. Puedo agregar y obtener el mensaje "más nuevo" en el DOM con los siguientes códigos:
agregar mensaje
async addChat(message) { const chat = { message, createdAt: serverTimestamp(), }; return await addDoc(this.chat, chat); }recibir mensaje
getChat(syncChat) { onSnapshot(this.chat, snapshot => { snapshot.docChanges().forEach(shot => { if (shot.type === "added") { syncChat(shot.doc.data()); } }); }); }enviar mensaje al DOM
render(data) { const html = ` <li class="chat-item"> <span class="chat-message">${data.message}</span> <p class="chat-time">${formatDistanceToNow(data.createdAt.toDate(), { addSuffix: true, })}</p> </li> `; this.chatList.innerHTML += html; }Como dije, puedo mostrar el mensaje de chat sin problemas, pero me doy cuenta de que hay un retraso de tiempo cuando se agrega el mensaje a firebase y se crea la marca de tiempo. Entonces, cuando se muestra el primer mensaje nuevo en el DOM, la hora en realidad devuelve nulo , y tengo que actualizar la página para mostrar la hora real.
Me pregunto si hay alguna forma de arreglar eso. Intenté mirar a través del documento de firebase y no obtuve nada. También investigué un poco sobre el interés, pero la mayoría de ellos usan un marco y no Vanilla js.
Gracias por la ayuda.
SOLUCIÓN
getChat(showChat) { const q = query( this.collection, where("room", "==", this.room), orderBy("createdAt", "asc") ); this.unsub = onSnapshot(q, snapshot => { snapshot.docChanges().forEach(snap => { if (snap.type === "added") { showChat(snap.doc.data({ serverTimestamps: "estimate" })); } }); }); }¡Gracias por la ayuda! Decidí usar las opciones de instantáneas, las marcas de tiempo estimadas del servidor, y todo funciona muy bien.
Cuando realiza una operación de escritura en un cliente, el SDK de Firestore invocó inmediatamente a todos los oyentes locales con los nuevos datos, algo que normalmente se denomina compensación de latencia dentro de Firebase.
Entonces, cuando escribe un nuevo documento con una marca de tiempo del lado del servidor, se llama a su oyente onSnapshot antes de que se envíe la solicitud al servidor, y en ese momento el valor del campo de marca de tiempo será null , ya que aún no se ha calculado. .
Luego, cuando el servidor confirma que la operación de escritura se completó y cuál era el valor de la marca de tiempo, se vuelve a llamar a su oyente onSnapshot , ahora con el valor correcto para el campo de marca de tiempo. Dado que este es un cambio en el documento que ya obtuvo antes, es un evento con tipo changed .
Para mostrar la actualización, su código también debe manejar eventos donde se changed el tipo y usarlo para actualizar el elemento DOM que agregó para el primer evento.
Alternativamente, puede pedirle al SDK de Firestore que le proporcione una marca de tiempo estimada en el primer evento pasando una opción a la llamada data() como se muestra aquí: Firebase Cloud Firestore cómo configurar snapShotOptions