Javascript 如何在我的网站上显示实时firebase数据？_Javascript_Html_Firebase Realtime Database

Javascript 如何在我的网站上显示实时firebase数据？

javascript html

Javascript 如何在我的网站上显示实时firebase数据？,javascript,html,firebase-realtime-database,Javascript,Html,Firebase Realtime Database,我正试图将水分传感器的数据发布到一个网站上。我正在使用Arduino更新数据并将其发送到实时Firebase数据库。从那里，我使用Glitch.com作为我的网站。我使用的是湿度传感器，在我的数据库中有一个变量“湿度”，该变量的值每0.3秒存储和更新一次。我目前拥有以下代码： HTML文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equ

我正试图将水分传感器的数据发布到一个网站上。我正在使用Arduino更新数据并将其发送到实时Firebase数据库。从那里，我使用Glitch.com作为我的网站。我使用的是湿度传感器，在我的数据库中有一个变量“湿度”，该变量的值每0.3秒存储和更新一次。我目前拥有以下代码：

HTML文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/styles.css">

    <script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-database.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-firestore.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-storage.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-messaging.js"></script>

    <script>
      // Initialize Firebase
      var config = {
        apiKey: "xx",
    authDomain: "xx",
    databaseURL: "xx",
    projectId: "xx",
    storageBucket: "xx",
    messagingSenderId: "xx",
    appId: "xx"
      };
      firebase.initializeApp(config);
    </script>


  <script>

    var database = firebase.database();


    var ref = firebase.database().ref("plant-patrol/Moisture");
    ref.once("value")
    .then(function(snapshot) {
    var key = snapshot.key; // "plant-patrol"
    var childKey = snapshot.child("plant-patrol/Moisture").key; // "Moisture"
    });
  </script>

<script>
    var ref = firebase.database().ref("plant-patrol/Moisture");
ref.on("value", function(snapshot) {
   console.log(snapshot.val());
}, function (error) {
   console.log("Error: " + error.code);
});
    </script>  

    <script src="/script.js" defer></script>
  </head>
</html>


auth.onAuthStateChanged(currentUser => console.log(currentUser));

auth.signInAnonymously();

我不知道这个JS代码是做什么的，但我从另一个关于堆栈溢出的问题中复制了它

如前所述，我要显示的实时Firebase数据库中的路径是“湿度”，这也是数据库中唯一的数据。我尝试过在childkey和snapshot上乱搞一下，并尝试了解它们的实际功能。遗憾的是，我无法显示任何形式的数据，甚至在控制台中也无法显示

Firebase中的读写行都已设置为True，因为安全性不相关（学校项目）。我还想知道是否有可能在不刷新页面的情况下更新网站上的数据

更新

取得了一些进展，请阅读下面的评论

还注意到，对于JS中的第3行和HTML文件中的第47行，它在控制台中都记录为null。另一个突破是，在从第二个var ref中删除“plant patrol/weather”之后，它现在在控制台中显示了数据。然而，当我想在控制台中用document.write（snapshot.val（））显示值时，它会显示[object object]，而不是实际值。问题仍然悬而未决，遗憾的是，我还没有弄清楚如何修复object。它还将[对象]相邻显示，填满屏幕。我正在寻找一个可以更新的值，最好不必刷新页面，但我不确定这是否可行。警告：您的API密钥在页面中仍然可见。确保它在API提供程序中无效。