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();

收到新消息时，聊天窗口会自动更改

1 个答案: