Here is what I learnt about Clubhouse

It has been a while since I have done a post like this or even done a YouTube tutorial. Let me start the new year post not by throwing off a technical project or some source code, but by explaining the concept of how mighty Clubhouse works.

Say what? You do not know what Clubhouse is? You must be living under a rock! Either way Clubhouse (“Clubhouse”) is an audio chat-type social networking app developed by Alpha Exploration Co in 2020. Recently among Maldivians, it has become the morning Coffee, lunch, tea, and even the sleeping pill. Politicians, single mothers, single boys, single men, double men, boyfriends, girlfriends, self-claimed scientists like me spend awful long hours on the application. Why should I spare it when celebrities like Elon Musk and Noh Hong-cheol are on it. Do not ask me who Noh Hong-cheol, nor do I know other than that he is a well-known celebrity a lot of people follow. The impact that Clubhouse can cause among Maldivians was seen on Dec17, 2021 when it went down/was not accessible for almost 24hrs. The opposition party went on to Twitter claiming the poor ISPs had banned it in the Maldives. Those political puppets did not bother me until a tech-know-who accused the same and that would have been thefunniest joke of 2021.

What Clubhouse brought to the table is not something new, audio-chatting has been available on social networking for the longest I can remember in the form of applications such as Skype, Line and, etc. Also as a sub-feature on many other social platforms like Facebook, WhatsApp, Telegram, etc. In my opinion, Clubhouse seems to be special because it allows you to talk and discuss without any flaws outside the present life with a lot of people from various backgrounds in various public rooms across the platform as well as an intuitive UI/UX. That being said let's look at the basic structure/flow of the Clubhouse.

Structure / Flow

As of today, the clubhouse is mainly composed of four components:

  1. Clubhouse App
  2. Clubhouse API Server
  3. Agora RTC Server
  4. PubNub Server

And here is a small flow chart I took from a Korean blog explaining how things on this flow chart get along with each other.


It is important to highlight that unlike many other applications that we see around - those cheeky developers and founders at Clubhouse did find a way to effectively utilize existing platforms in the market rather than implementing all the functions on the application by themselves. Probably having access to developer documentation of these said applications is how and a dumb person like me could easily reverse engineer and study the workflow of the application.

To get into more specifics; except for user authentication and club management, core functionalities such as voice chat and real-time status change processing actively use 3rd-party PaaS. To be more specific: RTC -  real-time voice conversation technology utilizes Agora.io service. And PubNub is used for notifications while being in a conversation.

Too much to process? Ok, no problem let us put this brief in normal human terms: The Clubhouse mobile application acts as a client and provides UI/UX of social network functions to users. Basically, it provides functions such as membership registration and login, user/club search, user invitation, channel (room) list display, schedule management, follower/following management, room creation, alerts, etc. The Application uses HTTP requests to communicate with the Clubhouse API server, which is responsible for updating the state by actually communicating with the server-side functions.

When you send a request to join a room and after this information - exchange to establish an RTC session through Agora server is completed, everything related to voice conversation is managed by Agora RTC SDK. And for real-time UPDATES about joining a particular room, promoting a listener to a speaker or moderator is handled by PubNub.

What did I do with these findings?

It is so nice of you that you had asked. Well, I created a bot that calls out a welcome message to every new speaker within a room, want to see it in action? Come join the club Bageecha, visit the active room and raise your hand, unlike any other room you will find among Maldivian ones they always accept and welcome anyone who ever visits the room (a friendly bunch of very good people), and on top of all that - you will also see a “LaaluParee Kamana” saying a lovely welcome message to you. Such a nice gesture right?

As usual just like any of my other projects, this whole project is also built based on python, I used aiohttp to communicate with the REST API. And there is a library called agora-python-sdk that can be used within your python projects to communicate with agora.io. And to generate the welcome voice messages which the bot calls out I used our old friend gTTS. And that is not enough information to build one of your own?. What else do you need? The endpoints for REST API? Listen, as I mentioned earlier I am not here to spoon-feed you but explain the concept. So within this post, I do not intend to share any source codes, but I could tell you how I started with it if that would help you.

I used Burp Suite (if you prefer Frida feel free to use that) and intercepted the traffic and bingo! it showed me all that I needed, including the endpoints. What you need to note down here is almost all of the clubhouse's endpoints, including the API server, are located behind Cloudflare. So, most requests to the Clubhouse API have a __cfduid cookie attached. For this cookie - within your source simply use the secrets library and generate a hex token with 24 nbytes and to the end of this token add a random integer between 1-9. Additionally, requests sent to the API server have Clubhouse-specific HTTP headers such as language, unique user ID, app version, or device-specific values which you could simply collect from the intercepted traffic. The User-Agent is also set and sent as a custom UA including the app build number. Lastly, in the header of each HTTP request, you must also include the token provided by the server at the time of signup/login Authorizationis and this one is important. For both Android and iOS this token is returned with two different mechanisms that resolve captchas – iOS uses rc_token and Android uses SafetyNet. How you sail through this is up to you.

And in regards to the unique ID that is required by agora.io, you can collect this from the Info.plist of the Clubhouse app. It is stored as AGORA_KEY. Also, while joining a room, to be able to voice communicate you would also require an RTC Token. This token will be returned as a response to the endpoint join_channel. That should be enough information for you to start with. And let me tell you a secret. I am no hacker, I am just a simple developer who happens to know a bit of python.

Either way, the idea of the welcome bot is from my very good fellow friend Sunny who happens to be the founder of the club Bageecha, and for me as usual this was a fun experiment. And why not? It is first of its kind at least among Maldivian Clubhouse-rs. Not everyone in Bageecha Club was very fond of the project when we started with it, and that is ok, I do understand that not everyone is as technically literate and find what excites a geek like me exciting. And there is a say which says 5 fingers are not of the same size 😉

This was a post I wrote for Baivaru Blog, here is the original post link:
https://blog.baivaru.net/mummy-i-wrote-a-clubhouse-bot/



Popular posts from this blog

Unlocking Success: Crafting an Integrated E-Commerce Marvel with Ewity

Image
Recently, I've been assigned the responsibility of developing an e-commerce application that seamlessly integrates with the renowned POS system, Ewity. The primary objective was to establish a platform enabling customers to browse store inventory and make online purchases. Tackling this task presented its challenges, and I'd like to walk you through my approach and the steps I took to bring this project to fruition. Rest assured, I obtained permission before sharing this post. In order to optimize the process, I segmented the project into five distinct phases: authentication, inventory listing, order placing, notifying cashiers of placed orders, and generating bills within the POS system without completing the sale. Additionally, I aimed to avoid maintaining separate databases for these processes, relying solely on Ewity's existing infrastructure. This approach minimizes data duplication, reducing the risk of discrepancies and other complications that might arise with it.
Read more

How I created something like Google Meet and Zoom

Image
Introduction: It's been a while since I started considering a project to create a video conferencing application that had both a web version and an Android application. Consequently, I'd like to outline my approach to this project, and this time, I've set some guiding principles. Specifically, for this phase, my aim is to make it entirely serverless, and I'm committed to completing it within a week. The primary objective is to rapidly build a proof of concept. This case study is going to be quite extensive because I plan to elucidate and document each step of the process, aiming to provide you with detailed explanations in each section. In alignment with these principles, I've opted to utilize Vue JS as the framework, paired with Tailwind CSS to ensure an aesthetically pleasing interface. Additionally, I'll be integrating Google Firebase for authentication purposes and incorporating Agora.io to handle video and audio aspects. As we progress through the implement
Read more