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>