Окно чата меняется автоматически при получении нового сообщения

Question

Я занимаюсь разработкой приложения для чата, например, WhatsApp Web, и оно почти завершено, но у меня возникли некоторые проблемы.

Проблема в настоящее время у меня 2 пользователя. Один - love123, а другой - raja1234, теперь, когда я нажимаю наraja1234, тогда чат raja1234 загружается и отображается справа, теперь окно чата raja1234 открыто, и в это время я получаю сообщение от love123, поэтому, что происходит, окно чата raja1234 заменяется love123, вы можете видеть на изображении ниже, и я даюдинамическое значение для div.

var rootRef = firebase.database().ref().child("messages").child(id);
                        var roomQuery = rootRef.limitToLast(20);
                        roomQuery.on('child_added', function(snapshot)
                        {
                               var name = snapshot.key;
                               var childData = snapshot.val();
                               var senderclass = '';
                               var senderImg = '';
                                if(childData.name == 'KuberSupport') {
                                        senderclass='sender';
                                        senderImg='sender-img';
                                }
                                else{
                                        senderclass='receiver';
                                        senderImg='receiver-img';
                                }

                               if(childData.file != '')
                                {
                                  var filePath = "'"+childData.file+"'";
                                    html += '<div class="row message-body"><div class="col-sm-12 message-main-receiver"> <div class="'+senderImg+'"><div class="message-text img-div" ><div id="lightgallery123" class="lightgallery lightgallery123"> <div data-src="'+ childData.file +'" > <img src="'+ childData.file +'"></div></div><div class="col-sm-10" style="margin-top:3px;"><p style="margin-left:-15px;color:#565555;font-family: "Ubuntu", sans-serif;"> '+ childData.message +'</p></div><span class="message-time-img pull-right" style="margin-top: -15px;"> '+ childData.time +' </span></div></div></div></div>'; 
                                }
                                else{
                                    html += '<div class="row message-body"><div class="col-sm-12 message-main-receiver"><div class="'+senderclass+'"> <div class="message-text mrr-10" style="color:#565555;font-family: "Ubuntu", sans-serif;">'+ childData.message +'<span class="message-time-img  msg-txt-ad" style="margin-top: -15px;"> '+ childData.time +' </span></div></div></div></div>';
                                }
                                var sid = $(this).attr('id');
                                $('.'+sid).html(html);
                                scrollToBottom();
                                $('.lightgallery123').lightGallery();
                                scrollToBottom();
                                roomQuery.off()
                             });
                             $('.'+id).html(html);
                             $('.lightgallery123').lightGallery();

// созданный div имеет имя динамического класса raja1234

Answer 1

Когда вы присоединяете прослушиватель с помощью on(...), он продолжает прослушивать изменения из базы данных до тех пор, пока вы не вызовете off() или пока страница не загрузится / перезагрузится. Кажется, что ничего из этого не происходит, когда вы переключаетесь в другую комнату чата, поэтому ваш обратный вызов продолжает вызываться для новых сообщений в старой комнате чата.

Чтобы прекратить прослушивание, следите за текущим запросом помещения с помощью:

var rootRef = firebase.database().ref().child("messages").child(id);
var roomQuery = rootRef.limitToLast(20);
roomQuery.on('child_added', function(snapshot) 
  ...
                     {

А затем перед обновлением rootRef удалите прослушиватель из существующего roomQuery с помощью:

roomQuery.off();