Firebase为之前的聊天消息添加回叫

时间:2014-08-28 12:34:56

标签: jquery firebase

我想在点击用户时添加一个回调来加载以前的消息。

这是我到目前为止所做的:

var messagesRef = new Firebase("https://fbname.firebaseIO.com/messages");
var userListRef = new Firebase("https://fbname.firebaseIO.com/userlist");   
userListRef.on("child_added", function (snapshot) {
        var user = snapshot.val();
        if (user.accessk != name) {
            $("<input type='radio' / >")
              .on("click", function () {
                var dt = $(this).val(), df = $(this).attr("data-fname"), dl = $(this).attr("data-lname"),
                       src = "temp/user/" + dt + ".jpg";

                messagesRef.child(child_id).update({ dtelog: Math.random() });
                messageList.html(""); });
            }

    });
    messagesRef.on('child_added', function (snapshot) {
        var data = snapshot.val(), dtes = data.date, src = data.pic, sender = data.sender, reciever = data.reciever, message = data.text,
                     ui = checker, username = userN, style_c = "";
        if (sender != username) { style_c = "message chat"; }
        else { style_c = "message user"; }

        var messageElement = "Message here has HTMLtags";
        messageElement.find('.bubble').html(message);
        if (((sender == username) && (reciever == checker)) || ((sender == checker) && (reciever == username))) {

            //ADD MESSAGE
            messageList.append(messageElement);
        }
        messageList[0].scrollTop = messageList[0].scrollHeight;
    });

我的想法是在messagesRef.on('child_added', function (snapshot) {}内添加$("<input type='radio' / >")功能。

它正确显示消息,但在我切换到另一个用户发送消息后,消息显示两次。然后,如果我导航回前一个用户,它会显示三次。我尝试多次这样做,消息增加1.

谁能解释为什么会这样?

1 个答案:

答案 0 :(得分:2)

好的..我设法通过浏览关于firebase的所有文章来解决我自己的问题,而article对我来说就像一个奇迹,因为我一直在搜索堆栈以寻找关于我的问题和自上周以来我从未找到这个,我刚刚在一小时前发现了这个......

所以我的解决方案基于我提供的文章看起来像这样

   messageList.html("");  
messagesRef.off('child_added');  
messagesRef.on('child_added', function (snapshot) {
var data = snapshot.val(), dtes = data.dte, src = data.pic,sender = data.sender, reciever = data.reciever, message = data.text,
       ui =  checker, username = userN, style_c = "";
if (sender != username){ 
  style_c = "message chat";
} else  { 
  style_c = "message user";
  }

var messageElement = $('<div class="'+style_c+'"><div class="message-info">'+
     '<img width="40" height="40" src="temp/user/'+src+'.jpg">' +
         '<div class="message-timestamp">' +
         ' <time datetime="'+dtes+'" class="timeago uk-text-small">'+dtes+'</time>' +
         '</div></div>' +
       ' <div class="message-data">' +
       ' <div class="bubble"></div></div></div>');
    messageElement.find('.bubble').html(message).emoji();
 if (((sender == username) && (reciever == checker) )||((sender == checker) && (reciever == username) ))  
  {
       //ADD MESSAGE
        messageList.append(messageElement);
    }
   messageList[0].scrollTop = messageList[0].scrollHeight;
 }); 

我添加了messagesRef.off('child_added')以删除侦听器1st,然后继续调用另一个messagesRef.on('child_added', function(snapshot){});,即使我导航到另一个用户给他/她一个私人消息,消息显示也不会增加导致重复消息显示器。虽然这是我可以想出的答案,我不知道的是,如果这种代码结构遵循标准 如果有人可以查看我的这个答案,如果这是合适的,即使它正在工作,我将不胜感激..谢谢:)