通过聊天发送图片

Question

我想将图片发送到firebase，然后将它们加载到聊天气泡中。现在，在用户选择图像后，它将被加载到firebase中，JSQPhotoMediaItem也会在聊天中显示图像。然而，其他用户只看到一个空泡，当我重新加载视图时，它也会在我的结尾显示为空白泡泡。如何修复空泡并用Firebase中的照片网址填充它。

    

class ChatViewController: JSQMessagesViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

let incomingBubble = JSQMessagesBubbleImageFactory(bubble: UIImage.jsq_bubbleCompactTailless(), capInsets: UIEdgeInsets.zero).incomingMessagesBubbleImage(with: UIColor(white: 0.90, alpha: 1.0))
let incomingBubbleWithTail = JSQMessagesBubbleImageFactory().incomingMessagesBubbleImage(with: UIColor(white: 0.90, alpha: 1.0))
let outgoingBubble = JSQMessagesBubbleImageFactory(bubble: UIImage.jsq_bubbleCompactTailless(), capInsets: UIEdgeInsets.zero).outgoingMessagesBubbleImage(with: UIColor.red)
let outgoingBubbleWithTail = JSQMessagesBubbleImageFactory().outgoingMessagesBubbleImage(with: UIColor.red)

var messages:[JSQMessage]!

var conversation:Conversation!
var conversationKey:String!
var partner:Users!
var partnerImage:UIImage?

var downloadRef:DatabaseReference?


@objc func handleUploadTap(){

    let imagePickerController = UIImagePickerController()
    imagePickerController.allowsEditing = true
    imagePickerController.delegate = self

    present(imagePickerController, animated: true, completion: nil)
    print("image tapped")
}

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) {

    var selectedImageFromPicker: UIImage?
    if let editedImage = info["UIImagePickerControllerEditedImage"] as? UIImage{
        selectedImageFromPicker = editedImage
    }else if let originalImage = info["UIImagePickerControllerOriginalImage"] as? UIImage{
        selectedImageFromPicker = originalImage
    }
    if let selectedImage = selectedImageFromPicker{

        let mediaItem = JSQPhotoMediaItem(image: nil)
        mediaItem?.appliesMediaViewMaskAsOutgoing = true
        mediaItem?.image = UIImage(data: UIImageJPEGRepresentation(selectedImage, 0.5)!)
        let sendMessage = JSQMessage(senderId: senderId, displayName: self.senderId, media: mediaItem)
        self.messages.append(sendMessage!)
        self.finishSendingMessage()
        uploadToFirebaseStorageUsingImage(image: selectedImage)
    }
    dismiss(animated: true, completion: nil)
}

private func uploadToFirebaseStorageUsingImage(image: UIImage){
    let imageName = NSUUID().uuidString
    let ref = Storage.storage().reference().child("message_images").child(imageName)
    if let uploadData = UIImageJPEGRepresentation(image, 0.3){

        ref.putData(uploadData, metadata: nil, completion: { (metadata, error) in

            if error != nil {
                print("failed to load:", error)
                return
            }

            if let imageUrl = metadata?.downloadURL()?.absoluteString{

                self.sendMessageWithImageUrl(imageUrl: imageUrl)
            }
        })}}


private func sendMessageWithImageUrl(imageUrl: String){

    guard let user = currentUser else { return }
    let ref = Database.database().reference().child("conversations/threads/\(conversation.key)").childByAutoId()
    let messageObject = [
        "text":" ",
        "recipient": conversation.partner_uid,
        "sender":user.uid,
        "senderName": user.firstLastName,
        "imageUrl":imageUrl,
        "timestamp": [".sv":"timestamp"]
        ] as [String:Any]
    ref.setValue(messageObject, withCompletionBlock: { error, ref in

    })

    return self.finishSendingMessage(animated: true)
}

func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
    dismiss(animated: true, completion: nil)
}









override func viewDidLoad() {
    super.viewDidLoad()

    navigationItem.backBarButtonItem = UIBarButtonItem(title: " ", style: .plain, target: self, action: #selector(handleDismiss))
    view.backgroundColor = UIColor(white: 1.0, alpha: 1.0)

    self.senderDisplayName = ""
    if let user = Auth.auth().currentUser {
        self.senderId = user.uid
    } else {
        self.senderId = ""
    }

    messages = [JSQMessage]()

    let addImage = self.inputToolbar.contentView.leftBarButtonItem
    addImage?.isUserInteractionEnabled = true
    addImage?.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handleUploadTap)))


    self.inputToolbar.contentView.rightBarButtonItem.setTitleColor(UIColor.red, for: .normal)
  //  self.inputToolbar.contentView.leftBarButtonItemWidth = 0
    self.inputToolbar.contentView.textView.placeHolder = "New message"
    self.inputToolbar.contentView.textView.keyboardAppearance = .light

    //collectionView?.collectionViewLayout.incomingAvatarViewSize = CGSize(width: 32, height: 32)
    collectionView?.collectionViewLayout.outgoingAvatarViewSize = .zero


    collectionView?.collectionViewLayout.springinessEnabled = true
    collectionView?.backgroundColor = UIColor(white: 1.0, alpha: 1.0)
    collectionView?.reloadData()

      title = partner.firstLastName
    conversation.printAll()
    downloadRef = Database.database().reference().child("conversations/threads/\(conversation.key)")
    downloadMessages()




}

@objc func handleDismiss() {
    self.dismiss(animated: true, completion: nil)
}


override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    conversation.printAll()
}

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)
}

override func viewDidDisappear(_ animated: Bool) {
    super.viewDidDisappear(animated)
    downloadRef?.removeAllObservers()
}

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
}

override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return self.messages.count
}

override func collectionView(_ collectionView: JSQMessagesCollectionView!, messageDataForItemAt indexPath: IndexPath!) -> JSQMessageData! {
    let data = self.messages[indexPath.row]
    return data
}

override func collectionView(_ collectionView: JSQMessagesCollectionView!, messageBubbleImageDataForItemAt indexPath: IndexPath!) -> JSQMessageBubbleImageDataSource! {
    let data = messages[indexPath.row]
    switch(data.senderId) {
    case self.senderId:
        return self.outgoingBubble
    default:
        return self.incomingBubble
    }
}


override func collectionView(_ collectionView: JSQMessagesCollectionView!, avatarImageDataForItemAt indexPath: IndexPath!) -> JSQMessageAvatarImageDataSource! {
    let data = messages[indexPath.row]
    switch(data.senderId) {
    case self.senderId:
        return nil
    default:
        if partnerImage != nil {
            let image = JSQMessagesAvatarImageFactory.avatarImage(with: partnerImage!, diameter: 48)
            return image
        }

        return nil
    }
}


override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = super.collectionView(collectionView, cellForItemAt: indexPath) as! JSQMessagesCollectionViewCell

    let data = messages[indexPath.row]
    switch(data.senderId) {
    case self.senderId:
        cell.textView?.textColor = UIColor.white
    default:
        cell.textView?.textColor = UIColor.black
    }
    return cell
}

override func collectionView

    (_ collectionView: JSQMessagesCollectionView!, attributedTextForCellTopLabelAt indexPath: IndexPath!) -> NSAttributedString! {
    let currentItem = self.messages[indexPath.item]

    if indexPath.item == 0 && messages.count > 8 {
        return JSQMessagesTimestampFormatter.shared().attributedTimestamp(for: currentItem.date)
    }


    if indexPath.item > 0 {
        let prevItem    = self.messages[indexPath.item-1]

        let gap = currentItem.date.timeIntervalSince(prevItem.date)

        if gap > 1800 {
            return JSQMessagesTimestampFormatter.shared().attributedTimestamp(for: currentItem.date)
        }
    } else {
        return JSQMessagesTimestampFormatter.shared().attributedTimestamp(for: currentItem.date)
    }


    return nil
}


override func collectionView(_ collectionView: JSQMessagesCollectionView!, layout collectionViewLayout: JSQMessagesCollectionViewFlowLayout!, heightForCellTopLabelAt indexPath: IndexPath!) -> CGFloat {

    if indexPath.item == 0 && messages.count > 8 {
        return kJSQMessagesCollectionViewCellLabelHeightDefault
    }

    if indexPath.item > 0 {
        let currentItem = self.messages[indexPath.item]
        let prevItem    = self.messages[indexPath.item-1]

        let gap = currentItem.date.timeIntervalSince(prevItem.date)

        if gap > 1800 {
            return kJSQMessagesCollectionViewCellLabelHeightDefault
        }

        if prevItem.senderId != currentItem.senderId {
            return 1.0
        } else {
            return 0.0
        }
    }  else {
        return kJSQMessagesCollectionViewCellLabelHeightDefault
    }


}

override func collectionView(_ collectionView: JSQMessagesCollectionView!, layout collectionViewLayout: JSQMessagesCollectionViewFlowLayout!, heightForCellBottomLabelAt indexPath: IndexPath!) -> CGFloat {
    return 0.0
}


override func didPressSend(_ button: UIButton!, withMessageText text: String!, senderId: String!, senderDisplayName: String!, date: Date!) {
    guard let user = currentUser else { return }
    let ref = Database.database().reference().child("conversations/threads/\(conversation.key)").childByAutoId()
    let messageObject = [
        "recipient": conversation.partner_uid,
        "sender":user.uid,
        "senderName": user.firstLastName,
        "text":text,
        "timestamp": [".sv":"timestamp"],
        "imageUrl": " "
    ] as [String:Any]
    ref.setValue(messageObject, withCompletionBlock: { error, ref in

    })

    return self.finishSendingMessage(animated: true)
}

func downloadMessages() {

    self.messages = []

    downloadRef?.observe(.childAdded, with: { snapshot in
        let dict = snapshot.value as! [String:AnyObject]

        let recipient  = dict["recipient"] as! String
        let sender  = dict["sender"] as! String
        let text  = dict["text"] as! String
        let timestamp = dict["timestamp"] as! Double
         let imageUrl = dict["imageUrl"] as! String
        let date = NSDate(timeIntervalSince1970: timestamp/1000)

        var img: UIImage?
        let mediaItem = JSQPhotoMediaItem(image: nil)
        mediaItem?.appliesMediaViewMaskAsOutgoing = (id == self.senderId)

        let message = JSQMessage(senderId: sender, senderDisplayName: "", date: date as Date!, text: text, media: mediaItem)
        if img != nil{
            mediaItem?.image = img! as UIImage
            self.collectionView!.reloadData()

        }

        self.messages.append(message!)
        self.reloadMessagesView()
        self.finishReceivingMessage(animated: true)


    })
}

func reloadMessagesView() {
    self.collectionView?.reloadData()

    guard let user = Auth.auth().currentUser else{ return }

    let ref = Database.database().reference().child("conversations/users/\(user.uid)/\(conversation.partner_uid)/seen")
    ref.setValue(true)

}

}

Answer 1

您可能希望跟踪上传任务：StorageReference.putData返回UploadTask。添加onCompleteListener（或onSuccessListener，我不记得确切）到该任务，完成后，您可以检索uri并发送消息。 这适用于Android，但类似于ios

Answer 2

在你的函数downloadMessages（）中你得到了imageUrl

let imageUrl = dict["imageUrl"] as! String

但是当你将消息附加到消息时，你对该imageUrl什么都不做？

let message = JSQMessage(senderId: sender, senderDisplayName: "", date: date as Date!, text: text )
self.messages.append(message!)

带有图像的JSQMessage应该包含一个mediaItem（JSQPhotoMediaItem，否则你只是加载一条空消息

var img: UIImage?
let mediaItem = JSQPhotoMediaItem(image: nil) //not a string
mediaItem?.appliesMediaViewMaskAsOutgoing = (id == self.senderId)

message = JSQMessage(senderId: id, senderDisplayName: name, date: date, media: mediaItem)

//get img from firebase, with whatever method you use
if img != nil {
    mediaItem?.image = img! as UIImage
    self.collectionView!.reloadData()
}

self.messages.append(message)
//etc