swiftのリアルタイムチャット機能について質問があります

Question

http://www.atmarkit.co.jp/ait/articles/1606/06/news020_3.html
上記のサイト様を参考にシステムを開発したのですが、実行した際にチャットの順番がぐちゃぐちゃになってしまいます。

原因を探ってみたのですが、全くわかりません、どうかご助力の方お願い致します。

import UIKit
import JSQMessagesViewController
import Firebase
import FirebaseDatabase

class ViewController: JSQMessagesViewController {
    var messages: [JSQMessage] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        senderDisplayName = "tst"
        senderId = "tst"
        let ref = FIRDatabase.database().reference()
        ref.observe(.value, with: { snapshot in
            guard let dic = snapshot.value as? Dictionary<String, AnyObject>
                else{
                    return
            }
            guard let posts = dic["messages"] as? Dictionary<String,
                Dictionary<String,String>> else{
                    return
            }
            self.messages = posts.values.map { dic in
                let senderId = dic["senderId"] ?? ""
                let text = dic["text"] ?? ""
                let displayName = dic["displayName"] ?? ""
                return JSQMessage(senderId: senderId, displayName:
                    displayName, text: text)
            }
            self.collectionView.reloadData()
        })
        
    }
    
    override func collectionView(_ collectionView: JSQMessagesCollectionView!, messageDataForItemAt indexPath: IndexPath!) -> JSQMessageData! {
        return messages[indexPath.row]
    }
    
    override func collectionView(_ collectionView: JSQMessagesCollectionView!, messageBubbleImageDataForItemAt indexPath: IndexPath!) -> JSQMessageBubbleImageDataSource! {
        if messages[indexPath.row].senderId == senderId {
            return JSQMessagesBubbleImageFactory().outgoingMessagesBubbleImage(
                with: UIColor(red: 112/255, green: 192/255, blue:  75/255, alpha: 1))
        } else {
            return JSQMessagesBubbleImageFactory().incomingMessagesBubbleImage(
                with: UIColor(red: 229/255, green: 229/255, blue: 229/255, alpha: 1))
        }
    }
    
    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        let cell = super.collectionView(collectionView, cellForItemAt: indexPath) as? JSQMessagesCollectionViewCell
        if messages[(indexPath as NSIndexPath).row].senderId == senderId {
            cell?.textView?.textColor = UIColor.white
        } else {
            cell?.textView?.textColor = UIColor.darkGray
        }
        return cell!
    }
    
    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return messages.count
    }
    
    override func collectionView(_ collectionView: JSQMessagesCollectionView!, avatarImageDataForItemAt indexPath: IndexPath!) -> JSQMessageAvatarImageDataSource! {
        
        return JSQMessagesAvatarImageFactory.avatarImage(
            withUserInitials: messages[indexPath.row].senderDisplayName,
            backgroundColor: UIColor.lightGray, textColor: UIColor.white,
            font: UIFont.systemFont(ofSize: 10), diameter: 30)
    }
    override func didPressSend(_ button: UIButton!, withMessageText text: String!, senderId: String!, senderDisplayName: String!, date: Date!) {
        print("beforeA",text, senderId, senderDisplayName, date)
        inputToolbar.contentView.textView.text = ""
        print("A")
        let ref = FIRDatabase.database().reference()
        print("B")
        ref.child("messages").childByAutoId().setValue(
            ["senderId": senderId, "text": text, "displayName": senderDisplayName]as [AnyHashable:Any])
        //print文を挟み、どこまでコードが動いているかをコンソールの方へ出力。
        //as [AnyHashable:Any]を最後に追加  2016/11/02 1:03
        print("C")
    }
}

（追記）参考画像とデーダベースを貼っておきます

Answer 1

参考サイトのコードを見ると
ref.observeEventType(.Value, withBlock: { snapshot in
でFirebaseデータベース全体のデータを受け取り、
その中からpostsという変数にDictionary型でメッセージ一覧を取り出し、
self.messages = posts.values.map { dic in
でDictionary内のvalueの一覧を取り出していますから、
メッセージが順不同でバラバラに表示されてしまうのは当然だと思います。

その参考サイトを参照するのはやめて
http://qiita.com/ryotakodaira/items/b234d1d51ae6b1110e8b
とか
https://www.raywenderlich.com/140836/firebase-tutorial-real-time-chat-2
を参考にした方がよいと思います。

こちらは、observe(.childAddedでFirebaseからデータを受け取っていますので
投稿した順にデータを受けとって並べられるはずです。