Блог

Как мне отобразить в моей базе данных Firebase отформатированный список на веб-странице PHP с использованием JavaScript?

Я пытаюсь создать веб-программу для общения в режиме реального времени.

Я попытался отобразить отформатированный список, но не смог решить эту проблему

Я пытался отобразить базу данных Firebase на веб-странице PHP с помощью хостинга XAMPP, но мне не удалось решить эту проблему.

 <!-- 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>
  

PHP не является оптимальным языком для создания живых чатов, поскольку для печати новых сообщений (или журнала сообщений) страницу пришлось бы обновлять снова и снова.

Для этого вы могли бы использовать PHP для серверной части yes и работать как мост с вашей firebase DB.

Тем не менее, попробуйте использовать Javascript fetch, чтобы продолжать отправлять запросы к PHP-файлу.

Объяснение:

При вызове php-файла он запросит firebase DB и вернет данные в структуре JSON и распечатает их, вот так, он вернет объект JSON на запрос выборки в качестве ответа. Затем с этим объектом можно работать с помощью Javascript для отображения обновлений на странице пользователя.

Вы должны понимать, что PHP выполняется на стороне сервера, в то время как отображаемая страница выполняется на стороне клиента.

Для извлечения информации из файла PHP вы можете использовать приведенный ниже код:

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

Вывод PHP-файла — это то, что вы увидите в консоли браузера.