Swift/Firebase/JSQMessageControlerのチャットアプリでメッセージを順番通りに取り出したい

Question

前提・実現したいこと

Swift/Firebase/JSQMessageControlerでチャットアプリを作ってます。チャットアプリなので、送信された順番で通りにメッセージを表示させたいのですが、テキストメッセージだけが先に表示され、画像の表示は最後になってしまいます。

本来は、あるテキストメッセージとあるテキストメッセージの間に表示されなきゃいけないのに、画像は後で読み込まれるからか、最後にまとめて表示されてしまいます。

テキストメッセージ・画像データ共に順番通りにメッセージを表示させるにはどうしたらよいでしょうか？

＊テキストや画像データはFirebaseに保存しています。
＊チャット画面の表示にはJSQMessageControlerを使用しています。

該当のソースコード

・このメソッドでFirebaseから読み込み

    func observeMessages(myUID:String,toID:String){
        DBProvider.Instanse.myTalkRef.child(myUID).queryOrdered(byChild: "timestamp").observe(DataEventType.childAdded) { (snapshot) in
            if let msgID = snapshot.key as? String{
                DBProvider.Instanse.messagesRef.child(msgID).observeSingleEvent(of: DataEventType.value, with: { (snapshot) in
                    if let data = snapshot.value as? NSDictionary{
                        if let senderID=data[Constants.SENDER_ID] as? String{
                            if let senderName=data[Constants.SENDER_NAME] as? String{
                                if let text=data[Constants.TEXT] as? String{
                                    if let msgToID=data[Constants.TO_ID] as? String{
                                        //                self.delegate?.messageReceived(senderID: senderID, senderName: senderName, text: text)
                                        let msg = Message()
                                        msg.senderId = senderID
                                        msg.senderName = senderName
                                        msg.text = text
                                        msg.toId = msgToID
                                        if msg.chatPartnerId() == toID{
                                            self.delegate?.messageReceived(msg: msg)
                                        }

                                    }
                                }else if let fileURL = data[Constants.URL] as? String{
                                    if let msgToID=data[Constants.TO_ID] as? String{
                                        //               self.delegate?.messageReceived(senderID: senderID, senderName: senderName, text: text)
                                        let msg = Message()
                                        msg.senderId = senderID
                                        msg.senderName = senderName
                                        msg.imageUrl = fileURL
                                        msg.toId = msgToID
                                        if msg.chatPartnerId() == toID{
                                            //           self.delegate?.mediaReceived(senderID: senderID, senderName: senderName, url: fileURL)
                                            self.delegate?.messageReceived(msg: msg)
                                        }

                                    }
                                }
                            }
                        }
                    }
                })
        }

・このメソッドでJSQMessage型の配列にメッセージを格納して、コレクションビューで表示させています。

    func messageReceived(msg:Message) {
        if let senderID = msg.senderId as? String{
            if let senderName = msg.senderName as? String{
                
                if let url = msg.imageUrl as? String{
                    if let mediaURL = URL(string: url){
                        do{
                            let data = try Data(contentsOf: mediaURL)
                            
                            if let _ = UIImage(data: data){
                                let _ = SDWebImageDownloader.shared().downloadImage(with: mediaURL, options: [], progress: nil, completed: { (image, data, error, finished) in
                                    DispatchQueue.main.async {
                                        let photo = JSQPhotoMediaItem(image: image)
                                        if senderID == self.senderId{
                                            photo?.appliesMediaViewMaskAsOutgoing = true
                                        }else{
                                            photo?.appliesMediaViewMaskAsOutgoing = false
                                        }
                                        self.messages.append(JSQMessage(senderId: senderID, displayName: senderName, media: photo))

                                            self.finishReceivingMessage()
                                            self.collectionView.reloadData()
                                    }
                                })
                            }
                        }catch{
                            
                        }
                    }
                }else if let text = msg.text as? String{
                    messages.append(JSQMessage(senderId: senderID, displayName: senderName, text: text))
                    finishReceivingMessage()
                    collectionView.reloadData()
                }
            }
        }
    }

試したこと

queryOrderでfirebaseから読み込む時に順番を変えたりしましたが効果はありませんでした。

Comments

[nakasho_dev]

回答ではないですが、JSQMessageControlerはDeprecatedなので、新規に作るアプリには使用しない方が良いと思います。

Answer 1

downloadImageで画像をダウンロードしてからJSQPhotoMediaItemとJSQMessageを作ってappendするのではなく、downloadImageを実施する前にJSQPhotoMediaItemとJSQMessageを作ってappendしておき、後でdownloadImageで画像のダウンロードができたタイミングでJSQPhotoMediaItemのimageプロパティに画像をセットすればいいと思います。