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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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