Comment mettre à jour une page Web en temps réel sans rafraichir à partir de Firebase?

Il s'agit du code html de l'application Web qui utilise Firebase. L'objectif est de récupérer la quantité en temps réel sans actualiser/recharger la page.Comment mettre à jour une page Web en temps réel sans rafraichir à partir de Firebase?

Comment cela peut-il être fait? Thxs.

<!DOCTYPE html> 
<html lang="en"> 
<head><meta charset="utf-8"></head> 
<body> 
    <span class="qty" id="qty">0</span> 
    <script src="https://www.gstatic.com/firebasejs/4.3.1/firebase.js"></script> 
    <script> 
     var config = { ... }; 
     firebase.initializeApp(config); 
    </script> 
    <script> 
     var dbRef = firebase.database().ref(); 
     var startListening = function() { 
      dbRef.on('child_added', function(snapshot) { 
       var warehouse = snapshot.child("prod_id/stats").val(); 
       document.getElementById("qty").innerHTML = warehouse.qty 
      }); 
     } 
     startListening(); 
    </script> 
</body> 
</html>

Source

2017-09-15 hbbz040

Depuis firebase utilise les données d'identification uniques, lorsque vous faites référence à quelque chose comme warehouse.qty, et en utilisant child_added au lieu de value, vous finirez probablement avec null données, car le chemin est incorrect.

Vérifiez d'abord où sont stockées vos données. Vérifiez le chemin. est-ce en prod_id/stats/qty? ou prod_id/stats/<some-unique-key>/qty?

S'il est dans prod_id/stats/qty, vous voudrez probablement changer le child_added en value. Comme dans le code ci-dessous:

var dbRef = firebase.database().ref(); 
var startListening = function() { 
    dbRef.on('value', function(snapshot) { 
     var warehouse = snapshot.child("prod_id/stats").val(); 
     document.getElementById("qty").innerHTML = warehouse.qty 
     }); 
} 
startListening();

Source

2017-09-15 18:41:41 Ridwan

Le chemin est "prod_id/stats/qty". Fonctionne bien. – hbbz040

Content de t'aider. – Ridwan

Comment mettre à jour une page Web en temps réel sans rafraichir à partir de Firebase?

Répondre

Questions connexes