Messaging and DMs

Our previous tutorial showed you Searching and Finding Users with the TwitterClone app. Since you are here, we believe you enjoyed all the previous tutorials. In this tutorial, you will learn about Messaging and DMs by integrating the Stream Chat SwiftUI SDK with this project.

Find the project demo and download the source code from GitHub.

Why Stream Chat for Messages?

The iOS/SwiftUI Chat SDK on Stream’s Global Edge Network allows developers to build faster, more reliable, real-time, and fully functional chat messaging experiences similar to WhatsApp, Facebook Messenger, and Telegram. You can create SwiftUI and UIKit-based conversational experiences in no time using high-level UI components.

Stream' SwiftUI Chat SDK helps developers to build chat messaging apps with as minimal code as possible. The SDK provides several customization options as well as offline support, which makes it possible for users to browse channels and send messages when they are offline. You can easily create a chat experience with a fully custom-made UI. Get started with the UIKit-based or SwiftUI SDK by reading the SwiftUI Chat App Tutorial. To build a sample chat app, you can fetch the SwiftUI SDK from GitHub.

The Integration Process

An essential part of our implementation was allowing users to interact with each other directly through direct messages. To implement the massaging feature, we relied on Stream Chat. We were able to create the initial chat experience in under two hours. After the initial implementation, we only needed to refine it and ensure everything worked as intended.

Install The SDK in TwitterClone

The guide Build a SwiftUI Chat Messaging App demonstrate how to integrate the SwiftUI SDK with a blank SwiftUI app. You can integrate the Stream Chat SwiftUI SDK with the TwitterClone app using dependency managers such as CocoaPods, Carthage, or Swift Package Manager. Let's keep it simple by following the steps below to fetch the SDK from GitHub using SPM. 

Add Stream Chat’s dependency as a Swift Package to our Tuist dependencies.swift file.

We then add the dependency on the Tuist project, in project.swift, to a target.

Notice how the dependencies are added to multiple targets. This is possible and causes no issues due to the StreamChat dependencies being declared dynamic frameworks

We now fetch the dependency by running

And make sure to generate the Xcode project again by running:

Implementation

There are a few steps you should follow and set up the SDK to work with our TwitterClone. From the Xcode Project Navigator, open ChatModel.swift under the folders Chat -> Sources.

Here is how it works. In ChatModel.swift, we define the class ChatModel and create a streamChat instance. To access the SDK, we should add a chatClient and initialize it with an API key. A hard-coded API key is used in this tutorial, but you can obtain your API key by creating an account on Stream Dashboard.

We use the connectUser function to obtain the credentials from the user. Next, we send the user information to our backend infrastructure for authentication by calling the connectUser function on the SDK. 

Go Further

To explore direct messaging further in our codebase, open the folders DirectMessages -> Sources and look at all the Swift files to learn more about the implementation.

DirectMessagesView.swift

NewChatView.swift

Conclusion

Congratulations on completing the firth part of the TwitterClone tutorial series. Check out our documentation to learn more about our SwiftUI and UIKit-based chat messaging components. The next tutorial is about integrating the Twitter Spaces clone into the project. Head to the next tutorial to learn Conversations with Spaces.