React Native Video Calling App – Part 3

Welcome to the third part of tutorial React Native Video Calling App. In the previous part of tutorial we built a simple node js server and client that simply connects to the the server. If you haven’t checked the previous parts, then you can follow this link React Native Video Calling App – Part 2 .

In this part of tutorial, we will make the users login to the Chat App and logout automatically when they disconnect ( or close their browser ) . These features will work automatically in The React Native App i.e. users won’t login manually. for Video calling. So lets start with the changes to the simple node js app we have built.

First we will change the UI identifiers, button name, and function names to suit the login feature. Also, at present we are sending simple string based messages to server which we will change to different types of message. To make the messages specific we will be sending json based messages in which we will send ‘type’ property so that server can distinguish between different types of messages. So, are new client code will be like this :

In the above code,  we have simple Login UI. When user enters a username and click on the login button, client send a message of type login and user name to the server (in json format) . If login is successfully server responses with a success as true otherwise server sends success as false.    Also whenever any user is getting connected or disconnected, client is getting intimation about it.

Now, lets change the server code. Server will act as mediator between different client. It will keep track of users ( sockets) connection and disconnection and will keep sending information about it to the logged in clients.  So, lets have a look of our new server side code.

In the above code, when a user (client) login, the first server checks if the username doesn’t exist. Then the new user is sent a success message and made to join room named ‘chatroom’. Also, the new joined user is sent list of existing user and existing user is informed about the new user. When a user disconnects, we inform all the logged in users about the disconnected user and also clear their socket information and socket id from json variable.

So, this is how login and disconnect (logout) feature is working. In next part we will add the calling feature. Subscribe to our news-letter and Youtube channel to keep yourself up-to-date with the series of awesome tutorials we do. Below is the video version of this tutorial.

2 thoughts on “React Native Video Calling App – Part 3”

Leave a Reply

Your email address will not be published. Required fields are marked *