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 scalable and reliable SDKs to build live video and audio experiences. Using 100ms, you get access to their pre-built code templates to assist you in bringing your audio/video application to life in hours.
We recommend using 100ms for the following reasons:
- Scale: Support up to 10000 as real-time participants, and millions as listeners
- Build quickly with ready-to-use templates: Create high-quality voice experiences. Fork 100ms’ open source templates to get a head start
- Customize interactivity - The Roles feature enables different modes to join (listeners, moderators, hosts, or create custom roles) and various interactions based on the set role (like raising hand, chat, promote to backstage, etc.)
- Add video - Experiment with live video without adding 100s of new lines of code
100ms’ audio SDK can help build audio experiences for various usecases like interactive gaming, classrooms, online karaoke, audio chat, and community forums. Check out their blog on creating a Twitter Spaces clone in android.
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
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
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.
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
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
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.
Congratulations!. You have completed our tutorial about integrating the 100ms SDK with the TwitterClone app to provide an audio room experience. The 100ms SDK has an excellent guide on getting started with their SDK.
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!