如何在我的 firebase 数据库中显示使用 javascript 在 php 网页中格式化的列表？答案

【问题标题】：How do I display in my firebase database a list formatted in php webpage using javascript?如何在我的 firebase 数据库中显示使用 javascript 在 php 网页中格式化的列表？
【发布时间】：2020-08-19 04:27:19
【问题描述】：

如何在我的 Firebase 数据库中使用 JavaScript 在 PHP 网页中显示格式化列表？

我正在尝试制作一个基于网络的实时聊天程序。

我尝试显示格式化列表，但无法解决此问题

我尝试使用 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>

【问题讨论】：

我无法准确理解你在问什么

标签： javascript firebase firebase-realtime-database

【解决方案1】：

PHP 不是进行实时聊天的最佳语言，因为它需要不断刷新页面以打印新消息（或消息日志）。

为此，您可以将 PHP 用于后端，是的，并像与您的 firebase 数据库一样工作。

不过，尝试使用 Javascript fetch 来继续向 PHP 文件发出请求。

解释：

当调用 php 文件时，它将查询 firebase 数据库并以 JSON 结构返回数据并打印出来，就像这样，它将 JSON 对象返回到 fetch 请求作为回复。然后可以使用 Javascript 处理此对象以在用户页面上呈现更新。

您需要了解 PHP 运行在服务器端，而呈现的页面运行在客户端。

要从 PHP 文件中获取信息，您可以使用以下代码：

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

PHP 文件的输出就是您将在浏览器控制台上看到的内容。

【讨论】：