Firebase Tutorial: Real-Time Chat

Learn to build a chat app with Firebase and MessageKit! By Yusuf Tör.

Leave a rating/review
Download materials
Save for later
You are currently viewing page 4 of 4 of this article. Click here to view the first page.

Displaying Photos in Threads

To the bottom of the Helpers section, add:

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

  ref.getData(maxSize: megaByte) { data, _ in
    guard let imageData = data else {
    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 {

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

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

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.

Sending a photo message to the channel

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! :]