0

tengo un problema en firebase, no me actualiza en tiempo real, aca tengo el codigo, este si guarda y muestra los datos pero hay que refrescar la pagina

    var config = {
    apiKey: "xxxxxxxxxx",
    authDomain: "xxxxxxxxx.firebaseapp.com",
    databaseURL: "https://xxxxxxxxxx.firebaseio.com",
    projectId: "xxxxxxxxx",
    storageBucket: "xxxxxxxxxx.appspot.com",
    messagingSenderId: "359957742702"
  };
  firebase.initializeApp(config);


var tabla = document.getElementById('tabla')

var d = new Date()
var t = d.getTime()
var counter = t;
console.log('d: '+d)

console.log('t: '+t)


var db = firebase.firestore();
$(document).ready(function(){
        $('#btn').click(function(){
          var room = document.getElementById('sala').value
var profesor = document.getElementById('profesor').value
var alumno = document.getElementById('alumno').value
var pregunta = document.getElementById('pregunta').value
                db.collection('preguntas').add({
                  alumno: alumno,
                  profesor: profesor,
                  pregunta: pregunta,
                  room: room,
                  fecha:d
                })
                .then(function(docRef){
                  console.log('documento',docRef.id)
                })
        })

})

db.collection("preguntas").where("room", "==","token 2")
    .get()
    .then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
            // doc.data() is never undefined for query doc snapshots
            console.log(doc.id, " => ", doc.data());

              tabla.innerHTML += ` 
        <tr>
        <th scope="row">${doc.id}</th>
        <td>${doc.data().alumno}</td>
        <td>${doc.data().fecha}</td>
        <td>${doc.data().pregunta}</td>
        <td>${doc.data().room}</td>
        </tr>
        `;

        });
    })
    .catch(function(error) {
        console.log("Error getting documents: ", error);
    });

y este es el html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <div class="pregunta">
        <input type="text" id="sala">
        <input type="text" id="profesor">
        <input type="text" id="alumno">
        <input type="text" id="pregunta">
        <button id="btn"">preguntar</button>
    </div>
</body>

 <table class="table">
            <thead>
              <tr>
                <th scope="col">id</th>
                <th scope="col">nombre</th>
                <th scope="col">fecha</th>
                <th scope="col">pregunta</th>
                <th scope="col">sala</th>

              </tr>
            </thead>
            <tbody id="tabla">


            </tbody>
          </table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.2/firebase.js"></script>
<script src="main.js"></script>
</html>

1 respuesta 1

1

Puedes probar con lo siguiente

db.collection("preguntas").where("room", "==","token 2")
    .onSnapshot((snapshot) => {
      //...
    }, (error) => {
      //...
    });

Al ultilizar onSnapshot() te aseguras que la escucha sea en tiempo real, podes leer un poco más en el siguiente link

https://firebase.google.com/docs/firestore/query-data/listen?hl=es-419

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.