Firebase -使用limitToLast删除时防止child_added

Firebase - Prevent child_added when delete with limitToLast

本文关键字：child added 使用 limitToLast 删除 Firebase      更新时间：2023-09-26

我想建立迷你网络聊天-当查看网站我设置显示5个消息，如果查看更多，你可以点击按钮。所有的事情都很好，但当我删除一个节点，firebase自动添加最后一个节点到，我怎么能防止它?例:节点A,B,C,D,E,F,G。我已经加载了列表C,D,E,F,G，但是当我总共删除一个时，它会自动将B添加到列表中。

    <div id="messgesDiv">
    <center><h3>Message</h3></center>
  </div>
  <div style="margin-top: 20px;">
    <input type="text" id="nameInput" placeholder="Name">
    <input type="text" id="messageInput" placeholder="Message" data-id="">
    <input type="text" id="idproject" placeholder="ID Project">
  </div>
  <button id="delete">Delete Test</button>
  <button id="edit">Edit</button>
  <button id="loadmore">Load more</button>
  <button id="showlastkey">Show last key</button>
我javascript 

$('#loadmore').click(function() {
    i = 0; old = first;
    myDataRef.orderByKey().endAt(first).limitToLast(6).on('child_added', function (snapshot){
      if( i == 0)
        first = snapshot.key();
      var message = snapshot.val();
      if(snapshot.key() != old)
        displayChatMessage(message.name, message.text, message.idproject, 'old');
      i++;
      console.log('myDataRef.orderByKey().endAt(first).limitToLast(6)');
    });
  });
  $("#messageInput").keypress(function (e){
    if(e.keyCode == 13){ //Enter
      var name = $("#nameInput").val();
      var text = $("#messageInput").val();
      var idproject = $("#idproject").val();
      if($("#messageInput").data("id")=='')
      {
        myDataRef.push({name: name, text: text, idproject: idproject});
      }
      else
      {
        myDataRef.child(key).update({name: name, text: text, idproject: idproject});
        $('#messageInput').attr('data-id', '');
      }
      $("#messageInput").val("");
    }
  });

    myDataRef.limitToLast(5).on('child_added', function (snapshot){
      if( i == 0)
        first = snapshot.key();
      var message = snapshot.val();
      displayChatMessage(snapshot.key(), message.name, message.text, message.idproject, 'new');
      i++;
      console.log(snapshot.key());
      console.log(' myDataRef.limitToLast(5)');
    });

  function displayChatMessage(key, name, text, idproject, status){
    //console.log(name + " -- " + text + " -- " +idproject);
    if( status == 'new')
    {
      $('<div/>', { 'data-id': key , 'class' : 'test'}).text(text + " - ").prepend($('<em/>').text(name+": " )).append("IdProject: "+idproject).appendTo($("#messgesDiv"));
      $("#messgesDiv")[0].scrollTop = $("#messgesDiv")[0].scrollHeight;
    }
    else
    {
      $('<div/>', { 'data-id': key , 'class' : 'test'}).text(text + " - ").prepend($('<em/>').text(name+": " )).append("IdProject: "+idproject).insertAfter($("center"));
      $("#messgesDiv")[0].scrollTop = $("#messgesDiv")[0].scrollHeight;
    }
  }
  $('#delete').click(function() {
    myDataRef.child(key).remove();
    $('#messgesDiv').filter('[data-id="'+key+'"]').remove();
  });

Firebase限制查询就像数据之上的视图。因此，如果您为最近的5条消息创建一个查询，Firebase客户端将确保您始终拥有最近的5条消息。

假设你从这些消息开始:

message1
message2
message3
message4
message5

现在如果你添加一个消息6，你将得到:

child_removed message1
child_added message6

使你的整个本地视图变成:

message2
message3
message4
message5
message6

相反，当您再次删除消息6时，您将得到这些事件:

child_removed message6
child_added message1 (before message2)

这样你就可以更新UI并再次得到正确的列表。

没有办法改变API的这种行为。因此，如果您希望以不同的方式处理这种情况，则必须在客户端代码中执行此操作。

你的代码目前只处理child_added。如果你为child_removed添加了一个处理程序，你会发现你可以很容易地保持用户界面与数据同步。

或者，您可以通过将要添加的消息的键值与DOM中已经存在的消息的键值进行比较来检测消息是否已经在UI中:

function displayChatMessage(key, name, text, idproject, status){
  var exists = $("div[data-id='" + key + "']").length;
  if (status == 'new' && !exists) {
    $('<div/>', { 'data-id': key , 'class' : 'test'}).text(text + " - ").prepend($('<em/>').text(name+": " )).append("IdProject: "+idproject).appendTo($("#messgesDiv"));
    $("#messgesDiv")[0].scrollTop = $("#messgesDiv")[0].scrollHeight;
  }
  else {
    $('<div/>', { 'data-id': key , 'class' : 'test'}).text(text + " - ").prepend($('<em/>').text(name+": " )).append("IdProject: "+idproject).insertAfter($("center"));
    $("#messgesDiv")[0].scrollTop = $("#messgesDiv")[0].scrollHeight;
  }
}
相关文章：