将消息追加到chatbox

Question

所以我目前正忙于一个chatbox，它将所有的消息存储在Firebase中，并立即将消息附加到messagebox中。问题是，Firebase以某种顺序获取消息，我以某种方式附加到chatbox，当我刷新它时，它再次不同。

function init_chatbox() {
    $('.empty-chat').show();
    ref.child("/chatboxes/{{ chatbox.pk }}/messages/").on("child_added", function (snapshot) {
        $('.empty-chat').hide();

        var object = snapshot.val();
        var key = snapshot.key();
        var name = "";

        ref.child("/users/" + object['user_id'] + "/name").once('value', function(snapshot) {
            name = snapshot.val();

            var timestamp = object['timestamp'];
            var message = object['message'];

            extra_html = ' <a href="#/" class="remove" onclick="delete_message(\'' + key + '\')">(remove)</a><a href="#/" class="edit" onclick="load_modal(\'' + key + '\')">(edit)</a>';



            $('ul.chat-messages').append('<li class="' + key +'"><p class="author"><span>' + name + '</span><span></span><span class="time" data-livestamp="' + timestamp + '"></span>' + extra_html + '</p><p class="message">' + message + '</p></li>');
        });
    });

当我有这样的代码(使用.append)时，它会立即显示这样的代码：

Kevin 2 hours ago (remove)(edit)
some message here
John 10 minutes ago (remove)(edit)
test
John 2 minutes ago (remove)(edit)
msg
Kevin few seconds ago (remove)(edit)
test

当我刷新页面时，消息将显示在页面顶部，就像顺序应该显示的那样。事情是这样的，我也尝试了.prepend，但它只是给出了另一个，这也是不正确的(在顶部发布新的消息，但当刷新它时，它显示良好的顺序，但最后的消息在顶部)。

我希望有人能帮我解决这个问题，我一直在努力解决这个问题

Answer 1

你应该看看firebase文档中的orderByChild()。

基本上，您可以根据消息的时间戳对消息进行排序。如下所示：

ref.child("/chatboxes/{{ chatbox.pk }}/messages/")
   .orderByChild("timestamp")
   .on("child_added", function (snap) { ... });

具有最低时间戳的消息将首先出现。