Размещение базы данных Firebase в реальном времени поверх старых изображений с JavaScript

Question

Я пытаюсь создать простую веб-страницу, чтобы поиграть с Firebase.В настоящее время я работаю над тем, чтобы пользователи загружали свои фотографии и сохраняли их, а также ссылки на них в базе данных.У меня была рабочая версия, но единственная проблема заключалась в том, что если бы несколько пользователей открывали страницу одновременно, длился бы только самый последний пост.Я хотел использовать функцию реального времени, чтобы преодолеть это, и придумал это.

var postRef = firebase.database().ref('variables/postNumber');
postRef.on('value',function(snapshot) {
    var postName = snapshot.val();
    var uploader = document.getElementById('uploader');
    var filebutton = document.getElementById('filebutton');

    // get file

    filebutton.addEventListener('change', function(e) {
        var file = e.target.files[0];
        var ext = file.name.split('.').pop();;
        console.log(postName);
        console.log(ext);
        //create a storage ref
        var storageRef = firebase.storage().ref('posts/' + postName + "." + ext);

        var task = storageRef.put(file);
        publishPost(postName, ext);
        function publishPost(postName, ext) {
            firebase.database().ref('posts/' + postName).set({
                postID: postName,
                postDate: Date(),
                fileType : ext
            });
            firebase.database().ref('variables/').set({
                postNumber: postName + 1
            });
        }
        task.on('state_changed',

            function progress(snapshot){
                var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) *100;
                uploader.value = percentage;
            },
            function error(err){

            },
            function complete(postName, ext){
                uploader.value = 0;
                window.alert('Your meme Uploaded correctly');

            },
        );
    });
});

Это работает хорошо, всегда обновляя переменную postName, кроме случаев, когда новый пользователь публикует сообщения, он переписывает каждое сообщение в новоесообщение.Например, если пользователь A публикует изображение, когда пользователь B уже был на странице, то, когда пользователь B публикует сообщение, его публикация будет загружаться дважды, когда в первый раз переопределяется запись пользователя A.Может кто-нибудь пролить свет на то, почему это происходит?Я думал о том, чтобы заставить слушателя запустить функцию, но не уверен, что это правильный выбор.

Answer 1

Что происходит, так это то, что прослушиватель событий присоединяется к кнопке каждый раз, когда обнаруживается новое значение.Это означает, что прослушиватель событий change на filebutton вообще не может быть в наблюдателе.

Рабочий код:

let postName = null;

var postRef = firebase.database().ref('variables/postNumber');

postRef.on('value', function(snapshot) {
  const value = snapshot.val();

  if (value === null) {
    // Handle error when no value was returned
    return;
  }

  postName = value;

});

var uploader = document.getElementById('uploader');
var filebutton = document.getElementById('filebutton');

filebutton.addEventListener('change', function(e) {
  if (postName === null) {
    // Handle the case then post name is still null (either wan't loaded yet or couldn't be loaded)
    return;
  }

  var file = e.target.files[0];
  var ext = file.name.split('.').pop();;

  //create a storage ref
  var storageRef = firebase.storage().ref('posts/' + postName + "." + ext);

  var task = storageRef.put(file);
  publishPost(postName, ext);
  function publishPost(postName, ext) {
    firebase.database().ref('posts/' + postName).set({
      postID: postName,
      postDate: Date(),
      fileType : ext
    });
    firebase.database().ref('variables/').set({
      postNumber: postName + 1
    });
  }
  task.on('state_changed', 
  function progress(snapshot){
    var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) *100;
    uploader.value = percentage;
  },
  function error(err){

  },
  function complete(postName, ext){
    uploader.value = 0;
    window.alert('Your meme Uploaded correctly');
  });
});