如何在我的 firebase 數據庫中使用 javascript 以 php 網頁格式顯示列表？

Question

如何在我的 Firebase 數據庫中使用 JavaScript 在 PHP 網頁中顯示格式化列表？

我正在嘗試制作一個基於 web 的實時聊天程序。

我嘗試顯示格式化列表，但無法解決此問題

我嘗試使用 XAMPP 托管在 PHP 網頁中顯示 Firebase 數據庫，但我無法解決它。

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.18.0/firebase-app.js"></script>

<!-- =-------------------------include firebase database------------------- -->
<script src="https://www.gstatic.com/firebasejs/7.18.0/firebase-database.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "AIzaSyDqGtTYx6nMoRFBsJpwA6c1e_T7Y1RTuN8",
    authDomain: "simple-chatbox-676f6.firebaseapp.com",
    databaseURL: "https://simple-chatbox-676f6.firebaseio.com",
    projectId: "simple-chatbox-676f6",
    storageBucket: "simple-chatbox-676f6.appspot.com",
    messagingSenderId: "660420445050",
    appId: "1:660420445050:web:fd497421dc939274e70cc3"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  
  var myName = prompt("Enter your Name");

  function sendMessage(){
      // get message
      var message = document.getElementById("messaage").value;
      //save in database
      firebase.database().ref("messages").push().set({
        "sender": myName,
        "message": message
      });

      //prevent form from submitting
      return false;

      //listen for incoming messages
      firebase.database().ref("messages").on("child_added", function(snapshot){
        var html = "";
        html += "<li>";
          html += snapshot.val().sender + ": " + snapshot.val().message;
        html += "</li>";

        document.getElementById("messages").innerHTML += html;
      });
      
  }
</script>


<!-- create aform to send message -->
<form onsubmit="return sendMessage();">
  <input placeholder="Enter message" id="messaage" autocomplete="off">
  
  <input type="submit">
</form>

<!-- create a list -->
<ul id="messages"></ul>

Answer 1

PHP 不是進行實時聊天的最佳語言，因為它需要一遍又一遍地刷新頁面才能打印新消息（或消息日志）。

為此，您可以將 PHP 用於后端，是的，並像您的 firebase DB 的橋梁一樣工作。

然而，嘗試使用 Javascript fetch 來繼續向 PHP 文件發出請求。

解釋：

When the php file is called it will query the firebase DB and return the data in JSON structure and print it, like this it will return the JSON object to the fetch request as a reply. 然后可以使用 Javascript 處理此 object 以在用戶頁面上呈現更新。

您需要了解 PHP 在服務器端運行，而渲染頁面在客戶端運行。

要從 PHP 文件中獲取信息，您可以使用以下代碼：

fetch('http://example.com/file.php') // URL of the file
  .then(response => response.json())
  .then(data => console.log(data));

PHP 文件的 output 是您將在瀏覽器控制台上看到的內容。