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 :
<!DOCTYPE html>
<html>
<head>
<title>Hello world</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="loginContainer">
<input id="login" value="userA">
<button onclick="user_login();">Login</button>
</div>
</body>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
let username;
function user_login(){
var login = document.getElementById('login').value;
username = login;
socket.send({
type: "login",
name: username
})
}
socket.on('connect', function(data) {
console.log('connect');
});
//when a user logs in
function onLogin(data) {
if (data.success === false) {
alert("oops...try a different username");
} else {
username = data.username;
console.log("Login Successfull");
console.log("logged in as :"+username);
console.log(data.userlist);
}
}
socket.on('roommessage', function(message){
var data = message;
switch(data.type) {
case "login":
console.log("New user : "+data.username);
break;
case "disconnect":
console.log("User disconnected : "+data.username);
break;
default:
break;
}
})
socket.on('message', function(message){
var data = message;
switch(data.type) {
case "login":
onLogin(data);
break;
default:
break;
}
})
</script>
</html>
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.
var express = require('express');
var app = express();
var serverPort = (4443);
var http = require('http');
var server = http.createServer(app);
var io = require('socket.io')(server);
var sockets = {};
var users = {};
function sendTo(connection, message) {
connection.send(message);
}
app.get('/', function(req, res){
console.log('get /');
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
console.log("user connected");
socket.on('disconnect', function () {
console.log("user disconnected");
if(socket.name){
socket.broadcast.to("chatroom").emit('roommessage',{ type: "disconnect", username: socket.name})
delete sockets[socket.name];
delete users[socket.name];
}
})
socket.on('message', function(message){
var data = message;
switch (data.type) {
case "login":
console.log("User logged", data.name);
//if anyone is logged in with this username then refuse
if(sockets[data.name]) {
sendTo(socket, {
type: "login",
success: false
});
} else {
//save user connection on the server
var templist = users;
sockets[data.name] = socket;
socket.name = data.name;
sendTo(socket, {
type: "login",
success: true,
username: data.name,
userlist: templist
});
socket.broadcast.to("chatroom").emit('roommessage',{ type: "login", username: data.name})
socket.join("chatroom");
users[data.name] = socket.id
}
break;
default:
sendTo(socket, {
type: "error",
message: "Command not found: " + data.type
});
break;
}
})
})
server.listen(serverPort, function(){
console.log('server up and running at %s port', serverPort);
});
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.