質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.34%

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

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 543

tanokin

score 4

 前提・実現したいこと

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から読み込む時に順番を変えたりしましたが効果はありませんでした。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • nakasho_dev

    2018/11/01 09:17

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

    キャンセル

回答 1

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る