Firebase Tutorial: Real-Time Chat

Displaying Photos in Threads

To the bottom of the Helpers section, add:

private func downloadImage(
  at url: URL,
  completion: @escaping (UIImage?) -> Void
) {
  let ref = Storage.storage().reference(forURL: url.absoluteString)
  let megaByte = Int64(1 * 1024 * 1024)

  ref.getData(maxSize: megaByte) { data, _ in
    guard let imageData = data else {
      completion(nil)
      return
    }
    completion(UIImage(data: imageData))
  }
}

This method asynchronously downloads an image at the specified path from Firebase Storage.

Next find handleDocumentChange(_:) and change the variable in the guard from a constant to a variable:

guard var message = Message(document: change.document) else {
  return
}

Then, in handleDocumentChange(_:), replace the content of the .added case with:

if let url = message.downloadURL {
  downloadImage(at: url) { [weak self] image in
    guard
      let self = self,
      let image = image
    else {
      return
    }
    message.image = image
    self.insertNewMessage(message)
  }
} else {
  insertNewMessage(message)
}

Now build and run the app. Tap the little camera icon and send a photo message in your chat. Notice how the camera icon isn’t enabled when your app saves the photo data to Firebase Storage.

Kaboom! You made a big, bad, real-time photo and text sending chat app.

Grab your favorite beverage. You earned it!

Where to Go From Here?

Click Download Materials at the top or bottom of this tutorial to download the completed project.

You now know the basics of Firestore and MessageKit. But there’s plenty more you can do, including one-to-one messaging, social authentication and avatar display.

To take this app even further, take a look at the Firebase iOS documentation. You can also take a look at our 22 part video course on Beginning Firebase!

I hope you’ve enjoyed this Firebase tutorial. If you have any questions, feel free to leave them in the non-anonymous yet avatar-enabled discussion below! :]