Add Video to Your React Chat App
In this tutorial, we would take you through the steps required to add a video chat functionality to your react project.
In this tutorial, I am going to guide you through building a clone of WhatsApp using the React Library. Don't worry! We will be leveraging CometChat to make things easy. So we will not be writing too much code. This is what we will be building, as shown in the image given below:
Now, Let's hit the road...
In order to be able to follow along, you need to have basic knowledge of React. If you will like to catch up on this, check out the React official Website: https://reactjs.org/.
React is a JavaScript library for building user interfaces or UI components. It is open-source and is maintained by Facebook and a community of volunteers. It can be used as a base in the development of single-page websites. See more on the official Website: https://reactjs.org/.
CometChat provides Text chat & video calling solutions for websites and applications to quickly connect your users with each other; patients with doctors, buyers with sellers, teachers with students, gamers, community users, event attendees, and more.
For this tutorial, we will be focusing on the CometChat Pro product. It houses highly customizable and easy-to-use SDKs, UI kits, Extensions and Plugins. It also supports more than 10 programming languages and platforms as you may see in the docs here.
With this information, you can see that what you can do with CometChat is only limited to your imagination. It could be solutions on Social community, Marketplace, Dating, On-Demand, Edu-Tech, Live Stream and so on. Just Dream and Build with the support of CometChat.
Messaging sites like WhatsApp are now a common tool today as it has found its way to revolutionize communication. As a developer, you must have thought of the complexity of building an application that will provide such functionalities that WhatsApp provides. Functionalities such as adding our choice of contact and chatting with them is something that has made WhatsApp so unique.
We want to begin by building out the necessary parts of the application we need. We need a place to sign up, login, logout, add friend, and show chat UI. Follow the next steps to build that out:
In the code above, we are rendering the Chat Body and the Authentication Forms altogether. So if you view your project in the browser, you should see a whole lot going on. Shortly, we will make it make sense.
We now have a base for our project. Let's integrate CometChat
In the section, we are going to be doing the following:
Let's dive in...
Follow the next steps to quickly create a CometChat Pro account:
You should be on your dashboard like mine below:
Now, let's create an app to obtain a set of unique values we will be using in a moment
Create an App
You should now be in that App's dashboard like so:
All Good! Your App has been created.
Now let's invite CometChat into our project. The following steps will help us do that:
Since all other files are linked to index.js file, it is important you do the initialization in the index.js file so that other files have easy access to the initialization.
Do not forget to replace the APP_ID and the REGION with your own values. You can get yours from your dashboard. Click on the App you created and you should have the following details:
To see it working, save the file and check your browser's console
At this point, we want to show the Login and Registration forms if the user is NOT logged in. If, on the other hand, the user is logged in, we will show them the chat body, the form to add friend and the logout button.
In the code above, we initialized a user constant and set it to null. We rendered logout button, add friend form, and chat if the user exists or is authenticated else we display the Login and Register forms. Then we called a logout function for our logout button and addFriend function for the Add Friend button. Finally, we passed down the setUser function as a props to the authentication forms so that the user will be updated with the setUser function as soon as login or registration is successful.
We will be back shortly to flesh out the empty functions on this page. Meanwhile, since we have not authenticated any user yet, if you view your application now, you should have the following screen:
It is now time to make it possible for users to join our application. Follow the next steps:
In the code above, we imported CometChat at the top, initialized the input values and obtained the setUser function from the props we sent down from our App.js file, and we set up a handleSubmit function to be fired once the form is submitted.
Enter the following code in the handleSubmit function :
Do not forget to replace the AUTH_KEY with your own value.
In the code above, we are setting the uid to the phone number of the user because just like WhatsApp, two users cannot have the same phone number. Then we set the name to a combination of the userName and phone number because just like WhatsApp, we can save a user just how we like it to be.
Do not forget to replace the AUTH_KEY with your own value.
Can you see how we have been able to use the uid to log in and used the setUser function to update the user indicating that the user is authenticated?
If you register a user now, you should be redirected to this screen:
If we have a returning user, then the returning user will have to use the login form since we can't register one user multiple times. So, to enable user login, do the following:
In the code above, we have imported CometChat, received the setUser props and created an empty handleSubmit function that will be fired when the form is submitted.
In the handleSubmit function, enter the following code:
Do not forget to replace the AUTH_KEY with your own value.
With this, login is complete and you should be redirected to this screen once login is successful:
Now that we can authenticate users, we need to make it possible for them to be able to chat with just their friends. Remember that on WhatsApp, for you to be able to chat with a friend, that person must be a registered user. It is the same with CometChat.
Before you add a new contact to your friends list, ensure that the contact is already registered on our application. So create a couple of contacts or users on your app so that you will have contacts to add as friends.
Do not forget to replace the appId and apiKey with yours
In the code above, body: JSON.stringify({ accepted: [phone] }) collects an array of the contacts to be added as friends. Since we are going to be adding one friend at a time, we add just one phone number to the array.
You can now add any contact that has been created before as a friend
Still in the App.js file, add the following code to the empty logout function:
Notice that we are setting the user to null as soon as logout is successful. This will hide chat body and display the authentication forms.
Login and Logout in action
Before we can use the CometChat Pro React UI kit, we need to add it in our project so that we can reference it. To do that, follow the next steps:
As soon as the installation is completed, you now have access to all the React UI Components. Walah!!!!
The React UI kit contains different chat UI components for different purposes as you can see in the documentation here. It includes:
1. CometChatUI
2. CometChatUserListWithMessages
3. CometChatGroupListWithMessages
4. CometChatConversationListWithMessages
5. CometChatMessages
6. CometChatUserList
7. CometChatGroupList
8. CometChatConversationList
But we are concerned with the component that will show us a list of users who are our friends and show us the conversations we might have had. The Chat UI Component is: CometChatUserListWithMessages.
The CometChatUserListWithMessages component displays a list of all the users in our application but we can limit it to display only our friends by adding the friendsOnly={true} props.
To make that happen, import it at the top of the App.js file like so:
You should have the following screen if you are a new user with no friends yet:
If you have friends, your screen will look like this:
Conclusion
We have been able to see the possibility of creating a WhatsApp-like application using React with the help of CometChat. We made functions to create new user, login user, add a friend, logout of the application and chat with friends in a very short while.
You will notice that the were eight (8) Chat UI Component but we only made use of one. Please do take time to check out the documentation and see what you can achieve with the other Components.
About Author
Njoku is a software engineer who is interested in building solutions to real world problems and teaching others about the things I know. Something I really enjoy doing asides writing codes and technical articles is body building.
.svg)
.jpg)
.jpg)
.svg)
