Firebase上发布的消息未按时间顺序显示

Question

我正在与Firebase一起制作聊天应用。 但是，我在实现这个聊天系统时遇到了麻烦。

问题：
  如果您重新加载浏览器，则Firebase上发布的消息不会按时间顺序显示。

构建数据：

{
    "users": { // User List
        "user001": { // UserId
            "name": "TestUser001", // UserName
            "image": "https://foobar.s3.amazonaws.com/uploads/avator01.png" // ImageUrl
        },
        "user002": { // UserId
            "name": "TestUser002", // UserName
            "image": "https://foobar.s3.amazonaws.com/uploads/avator02.png" // ImageUrl
        }
    },
    "rooms": { // Room List
        "room001": "RoomA", //RoomID and RoomName
        "room002": "RoomB"
    },
    "messages": { // Message List
        "room001": {  // Message each room
            "message0001": { // Message
                "user": "user001", // UserId
                "message": "Hello!", // body
                "created_at": 1447402838902 // timestamp
            }
        },
        "room002": {  // Message each room
            "message0002": { // Message
                "user": "user002", // UserId
                "message": "Hi!", // body
                "created_at": 1447402844583 // timestamp
            }
        }
    }
}

源代码：

// Message List
var messages = dataStore.child('/messages/' + currentRoomId);
var user;

messages.orderByChild("created_at").on('child_added', function(dataSnapshot) {
  var data = dataSnapshot.val();

  dataStore.child('/users/' + data.user).once('value', function(snapshot) {
    var date = new Date(data.created_at);
    var timestamp = date.toLocaleString();
    user = snapshot.val();

    $('<div/>').html( data.message ).prependTo('#messages');
    $('<div/>').html( '<a href="../' + user.name + '" target="_blank" >' + user.name + ' </a>' + ' ' + '<small>' + timestamp + '</small>' ).prependTo('#messages');
    $('<div/>').html( '<img src=' + user.image + ' class="image" />' ).prependTo('#messages');
  });
});

屏幕图片