Conversations with Spaces
Welcome to the sixth TwitterClone tutorial. If you followed the fifth tutorial, we hope you now know how easily you can integrate the Stream Chat iOS/SwiftUI SDK into your app to build immersive chat messaging experiences. In this tutorial, you will learn about conversations with spaces. In particular, you will discover how to implement audio rooms so that users can hang out with one another, meet new people, and talk about anything one could imagine.
Find the project demo and download the source code from GitHub.
Introduction to Drop-in Audio Chat
Have you ever joined Twitter Spaces or Club House's instant audio conversations? If yes, then you have experienced drop-in audio, or in other words, an audio room. Drop-in audio-supported applications allow users to connect instantly to live voice conversations. It supports two-way and group audio conversations allowing users to express themselves in many ways. If you are thinking of having a drop-in audio feature in your app, one possible way is to use the 100ms SDK.
What is 100ms?
100ms provides SDKs to build live video and audio experiences.
Getting 100ms Account
To integrate 100ms with your app, you need to set up a 100ms account. Head to their website and follow the steps to create a free account. The screenshot below shows an example 100ms dashboard account.
Install the 100ms SDK
We add 100ms’ dependencies as a Swift Packages to our Tuist dependencies.swift file.
We then add the dependency on the Tuist project, in project.swift, to a target.
We now fetch the dependency by running
And make sure to generate the Xcode project again by running:
From our codebase, you can find and explore how we implemented RevenueCat in the following Swift files in the folders Profile -> Sources from the Project Navigator.
Integrate the 100ms SDK
For our Spaces emulation, we did something interesting to create an audio space as a channel on our chat product. We achieved the desired Spaces behavior by adding features specific to the audio Spaces to these channels. We created the audio feature using the 100ms product. When a Space starts, a call begins with 100ms.
To explore the full implementation of the 100ms SDK in our code base, open the Xcode Project Navigator and find the folders Spaces -> Sources -> VieModel. Find the complete integration code in the Swift file SpacesViewModel.swift.
To get access to the 100ms SDK, you should initialize it. We initialized the SDK by importing import HMSSDK and adding the stored property var hmsSDK = HMSSDK.build() in SpacesViewModel.swift. Next, we implemented the necessary properties and functions for handling and publishing updates about the Space and its participants, such as joining and leaving the audio room.
SpacesViewModel.swift
Start, Join, Leave, and End the Audio Conversation
In addition to the above, we implemented the required methods to start, join, leave, and end the audio room in the Swift file SpacesViewModel+Call.swift.
Observe and Update the UI During an Active Conversation
During active audio conversations, the 100ms SDK provides convenient ways to update the UI while conversations are happening. The updates include joining and leaving the audio room mentioned previously. To observe these ongoing updates and respond accordingly, we implemented HMSUpdateListener protocol in the 100ms SDK HMSSDK. Open SpacesViewModel+HMSUpdateListener.swift to explore the complete implementation.
Creating the Spaces UI in our App
For the home view of our audio space, we wanted the layout and the visual appearance to mimic the actual Twitter Sppaces app. Find SpacesTimelineView.swift from the Spaces folder in the Project Navigator to explore the composition of the Spaces home view.
Conclusion
Congratulations!. You have completed our tutorial about integrating the 100ms SDK with the TwitterClone app to provide an audio room experience.
Check our project demo and download the source code from GitHub. Are you looking for ways to integrate chat messaging, activity feeds, real-time audio, and video with your app? Contact our team for help.
Join us for part seven of Build Your Own Twitter where we integrate Twitter Blue & In-App Subscriptions using Revenue Cat!