时间戳

首页 > 解决方案 > 尝试在网页上显示实时 Firebase 数据库数据时，Firebase 未定义 js 错误

javascript - 尝试在网页上显示实时 Firebase 数据库数据时，Firebase 未定义 js 错误

问题描述

我正在为我的第一个物联网项目使用湿度传感器。我将传感器中的数据保存在实时 Firebase 数据库中。对于我的网页，我正在使用 glitch.com，并且我正在尝试在我的网页上显示来自数据库的数据。我尝试自己编写代码，但几乎无处可去。所以我决定重新混合现有的 glitch.com “Firebase Read”项目。但是我遇到了一个问题，它说：“firebase”未在以下 3 行中定义（在下面列出的第一行中，它也说 config 未定义）：

  firebase.initializeApp(config);

  var rootRef = firebase.database().ref();

  var myDBConn = firebase.database().ref("Moisture");

我目前在我的 js 文件中有以下内容：

<script src="https://www.gstatic.com/firebasejs/7.11.0/firebase.js"></script> 
    // Initialize Firebase
    // TODO: Replace with your project's customized code snippet
  // Initialize Firebase
  var firebaseConfig = {
    apiKey: "xx",
    authDomain: "xx",
    databaseURL: "xx",
    projectId: "xx",
    storageBucket: "xx",
    messagingSenderId: "xx",
    appId: "xx"
  };
  firebase.initializeApp(config);

        var rootRef = firebase.database().ref();


  // List to hold my moisture value
  var myMoisture = [];

  // Define database connection to correct branch, Moisture
  var myDBConn = firebase.database().ref("Moisture");

  // Function that acts when a 'new child is added to the DB' - i.e. new data is added this function runs.
  myDBConn.on("child_added", function(data, prevChildKey){

    // The data returned from the branch is put into a variable, dataPoint
    var dataPoint = data.val();

    // Convert the 'Temp' field from dataPoint into integers, then put them into the myTemps list
    myMoisture.push(parseInt(dataPoint.Temp));

    // Add all the Temps and get the total
    var totalT = 0;
    var i=0;
    for (i=0; i<myMoisture.length; i++){
      totalT += myMoisture[i];
    }

    // Create an average by dividing the sum of temps by the number of temps
    var average = totalT / myMoisture.length;

    // Update the page elements with the average and the last item (most recent) off the list 
    document.getElementById("averageT").innerHTML=average;
    document.getElementById("LiveT").innerHTML=myMoisture[myMoisture.length - 1];
  });

这在我的 HTML 文件中：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>

    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/7.11.0/firebase.js"></script> 
    <script src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">

  </head> 

  <body>

    <h1>Reading from Firebase Cloud Database</h1>

    Live Moisture Reading: <a id="LiveT">---</a> <br>

    Average Temperature: <a id="averageT">---</a>



  </body>
</html>

这由调试器显示（我不知道这些信息是否相关以及它的含义，但也许它很有用）：

Error: listen EADDRINUSE: address already in use :::3000
    at Server.setupListenHandle [as _listen2] (net.js:1270:14)
    at listenInCluster (net.js:1318:12)
    at Server.listen (net.js:1405:7)
    at Lws.listen (/opt/nvm/versions/node/v10.15.3/pnpm-global/1/node_modules/.registry.npmjs.org/lws/1.3.2/node_modules/lws/index.js:81:12)
    at WsServe.execute (/opt/nvm/versions/node/v10.15.3/pnpm-global/1/node_modules/.registry.npmjs.org/lws/1.3.2/node_modules/lws/lib/command/serve.js:296:26)
    at WsServe.execute (/opt/nvm/versions/node/v10.15.3/pnpm-global/1/node_modules/.registry.npmjs.org/local-web-server/2.6.0/node_modules/local-web-server/lib/command/serve.js:11:18)
    at Map.start (/opt/nvm/versions/node/v10.15.3/pnpm-global/1/node_modules/.registry.npmjs.org/cli-commands/0.4.0/node_modules/cli-commands/index.js:26:18)
    at WsCliApp.start (/opt/nvm/versions/node/v10.15.3/pnpm-global/1/node_modules/.registry.npmjs.org/lws/1.3.2/node_modules/lws/lib/cli-app.js:9:26)
    at Function.run (/opt/nvm/versions/node/v10.15.3/pnpm-global/1/node_modules/.registry.npmjs.org/lws/1.3.2/node_modules/lws/lib/cli-app.js:15:29)
    at Object.<anonymous> (/opt/nvm/versions/node/v10.15.3/pnpm-global/1/node_modules/.registry.npmjs.org/local-web-server/2.6.0/node_modules/local-web-server/bin/cli.js:5:29)

接下来我可以尝试什么？

标签： javascripthtmlfirebasefirebase-realtime-database

解决方案

快速浏览 FireBase 文档

我看到您的 FireBase 导入有点错误：

尝试将其更改为：

  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-app.js"></script>

文档在这里：https ://firebase.google.com/docs/web/setup

推荐阅读