Create a Scalable Real-time communication App like WhatsApp with Messaging, Video and Voice calls — Part 2 Backend

7 min readApr 22, 2019

This is a Part 2 of the multi-part series describing the design and implementation of a commercially deployable WhatsApp like app having real-time messaging, video and voice communication which can scale to billions of users. If you haven’t read Part-1, we will highly recommend that you read it before reading this part.

In Part 1, we have built Android and iOS apps (will be referred to as Now onward) and explored various features of the application, for example, Messaging, voice, and video calls, group chat, etc. At that time, we have used the backend which is already hosted and configured so that you can quickly play with the apps without worrying about the backend. Now in this part, we will describe how to host the backend on your servers/infrastructure and having complete control over users, groups, etc.

Prerequisites

Before we dive into setting up the backend for the Messenger apps, please ensure that the following servers are running.

A web server with HTTPS and PHP support. Depending on the web server (apache / h2o/ Lighttpd/ Nginx) you are using, the setup varies. In the subsequent examples, we will assume that your hostname is example.com and the backend code which you will download soon is accessible via URL https://example.com/api.php
MySQL server

You also need to register and get API keys for the important services used in the app and then configure the backend to use those keys as described in the next section.

Key Services & SDKs Used

In Part 1, we have briefly mentioned about following SDKs and services used in this project. Since now you will be hosting the backend on your infrastructure, you need to register and get API keys for these services.

Facebook AccountKit SDK for Phone Verification. Account Kit is easy, quite reliable and offers free phone verification up to 100K users.
Google Maps and Google Places SDKs for Geolocation integration.
Mesibo SDKs for real-time communication. Just like Account Kit and Google maps, Mesibo is an industry leader in real-time communication and offers powerful APIs for messaging, calls, etc.

Let’s begin registering for these services and get the API keys.

Facebook Account Kit

The first screen you see in the Messenger apps is the login screen. Login screen allows users to enter their phone number and then verifies it by sending an OTP over an SMS or a call.

The phone verification is an expensive process, as it requires sending SMS or making calls to verify the phone number, often international numbers. However, thanks to the Facebook Account Kit, this entire process is automated and made available free (well, almost). Account Kit lets your quickly register for and log in to your app by using just their phone number or email address — no password needed. It’s reliable, easy to use and gives you a choice about how you sign up for apps — by using the phone, email or optionally, your Facebook account.

To use the Account Kit, you need to create an App and generate an Account Kit client token. The entire process takes less than 5 minutes.

Go to Facebook App Page
If you have an existing app, click on it. Otherwise, click on to create a new app and go to its settings.
On the left side navigation, you will see PRODUCTS. If you don’t see Account Kit there, click on + icon and add ‘Account Kit’.
Now you shall see Account Kit under PRODUCTS. Click on Settings under Account Kit menu.
Make a note of APP ID and Account Kit Client Token

Geolocation — Google Maps and Google Places

Messenger apps allow you to select and send the location to your friends and family. Messenger apps use Google Maps and Google Places SDK for this functionality. Hence, you must add Google Maps and Google Places API Key into the project for it to work.

For instructions to get the API key and configure it, visit

Mesibo — Real-time Messaging, and Calls

Messenger apps which you’ve built in the first part allow you to send messages in real-time, and also get their status in the real-time, for example, sent, delivered, read, etc. Besides, it also allows you to make high-quality video and voice calls between your app users. We have used Mesibo API to achieve these functionalities.

Mesibo is a top-tier real-time chat communication platform that enables messaging, voice and video functionalities for several industrial sectors. It’s modular, lightweight and easy to integrate that can scale your apps to billion users without any infrastructure.

To use Mesibo, you need to sign-up and login to Mesibo console and get the API keys and App token. Once logged in, create an App and generate an App token. The entire process takes less than 5 minutes.

Once you create an application, note down the App token. The App Token looks like the following:

**cn9cvk6gnm15e7lrjb2k7ggggax5h90n5x7dp4sam6kwitl2hmg4cmwabet4zgdw**

We will need to configure this application token in our backend code so that backend can use it to create users and groups on Mesibo platform.

That’s it! Now we will start with configuring backend.

Download Backend Source Code from GitHub

We have uploaded the backend source code on GitHub so that you can get started quickly. There are multiple ways of “downloading” code from the GitHub.

Clone the Repository (Recommended)

If you have git installed, this is a recommended approach as you can quickly sync and stay up to date with the latest version. This is also a preferred way of downloading the code if you decide to contribute to the project.

To download, open a terminal and issue following commands in the root folder of your web server:

$ git clone https://github.com/mesibo/messenger-app-backend

Download the code as a zip file

You can also download the complete backend source code as a zip file. Although trivial, the downside of this approach is that you will have to download the full source code every time it is updated on the repository.

Download

Once the download completes, unzip into the root folder of your web server.

Before we set up backend, we first to set up a database which will be used by the backend.

Setting up the Database

You will need to set up a database so that backend can store various information:

Users phone number and login tokens
Groups, group members, and group admins
Users contacts for contact synchronizations.
Google and Apple push notification tokens

The backend uses MySQL as the database. We will not go into details of setting up MySQL server; there are plenty of tutorials on the web if you are not familiar. Once you’ve set up the MySQL server, create a database and the credentials. These credential will be needed by the backend code to access the database.

The next step is to create the database schema using the supplied SQL file mysql-schema.sql. Run following to create the database schema for the backend.

$ mysql -h <host> -u <username> -p <password> <dbname> < mysql-schema.sql

Push Notifications

The last set of information you need is to enable push notification for Android and iOS. You will need the following:

Google FCM/GCM Key for Android Push notification.
Apple VoIP Certificate and passphrase.

Refer to Google FCM and Apple push notification document to get above credentials.

Configuring the Backend

We now have all the information to configure and go live with backend on your own servers.

Open config.php in the backend code and enter all the information we have obtained above, namely:

MySQL host, database name, username, and password
Facebook Account Kit AppID, and Secret
Google Maps key
Mesibo API Key, and App Token
Google GCM/FCM Key
Apple VoIP certificate, and Passphrase

You will also need to set files_path and files_tn_path to valid paths on your server where backend will store the profile pictures.

That’s it! We are now ready to test the backend!

Testing the backend

It’s now time to test the backend. Open https://example.com/api.php in your browser. It should output

{ "code": "NOOP", "result": "FAIL" }

Above output indicates that the backend appears to be set up correctly. You can further test by opening api.php with some parameters. For example,

https://example.com/api.php?op=login&aktoken=test&appid=com.mesibo.mesiboapplication

this should output like the following

{ "op": "login", "ts": 1555861088, "error": "BADAKTOKEN", "result": "FAIL" }

Looks fine! The next step is to update the Android and iOS App we built in Part 1 with the new backend.

Configure Apps to use the new backend

Edit the following files in the Messenger apps which we build in Part 1 to use the new backend.

Android

Editapp/src/main/res/values/strings.xml and enter your Account Kit APP ID and Client token in FACEBOOK_APP_ID and ACCOUNT_KIT_CLIENT_TOKEN fields respectively.
In the same file, enter Google map key in the GOOGLE_MAP_KEY field.
Edit SampleApi.java and change mApiUrl to reflect the new backend URL.

iOS

Click on Info.plist and enter your APP ID and Client token in FacebookAppID and AccountKitClientToken fields respectively. You also need to edit CFBundleURLSchemes field to reflect your Facebook APP ID after prefixing with fb.
In the same file, enter Google map key in the GoogleMapKey field.
In the same file, enter new backend URL in the MessengerApiUrl field.

That’s it. Recompile both the apps and start using it!

You can now see any new user and groups you create in the Mesibo console along with statistics.

To be continued!

In this part, you’ve created a backend for Android and iOS apps on your own infrastructure. In the next articles, we will describe how the entire app works and customizing it.

Please Follow us to get notified when the next part of this series is published.