React Native Video Calling App – Part 2 – Flutter & React Native Made Easy

Welcome to the second part of React Native Video Calling App. If you have directly come to this page, you can check out small introduction about the app in the first part here :

In this part we will code a simple node server using node express library and make a simple client server communication. This client server communication will be the base of complete Video calling app we are going to do. We will code a dummy web based client which will help us to test the server, and also, same js code of web client we will use for our React Native Video Call App with some small modifications. So lets start.

First create a directory callingapp with mkdir command like this :

mkdir callingapp

Now, create three files package.json, server.js and index.html in the director. Add the code below in the package.json file

{
  "name": "callingapp",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.15.3",
    "open": "0.0.5",
    "socket.io": "^2.0.3"
  }
}

Now, from the calling app directory run the command npm install like this

npm install

npm install command creates a directory node_modules and install the node js default libraries as well as packages listed under dependencies in package.json file.

Now, copy the code below in the server.js file

var express = require('express');
var app = express();
var open = require('open');
var serverPort = (4443);
var http = require('http');
var server;
server = http.createServer(app);
var io = require('socket.io')(server);

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");
  })

  socket.on('message', function(message){
    console.log("Message Received : "+message);
    sendTo(socket,message)
  })
})

server.listen(serverPort, function(){
   console.log('server up and running at %s port', serverPort);   
 });

In the above code we have created a simple node js server. The server is listening at the port 4443 of localhost. When a new user/client gets connected it logs a ‘user connected’ message and when a client gets disconnected it logs ‘user disconnected’ message. Also, when client sends a message, it receives the message and send it back to the client ( which later we can use as acknowledgement for message received or forward it to another client).

Now, add the code below to the index.html file

<!DOCTYPE html>
<html>
    <head>
        <title>Web Client</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
    <div id="messageContainer">
     <input id="message" value="Hello">
     <button onclick="send_message();">Enter Message</button>
   </div>
    </body>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      var socket = io();
    function send_message(){
            var message = document.getElementById('message').value;
      socket.send(message)
    }
    socket.on('connect', function(data) {
          console.log('connect');
        });
    socket.on('message', function(message){
      console.log('Message : '+message);
    })
  </script>
  </html>

In the above code we have created a html document and linked a socket.io.js. When the user opens the html page the client gets connected to the server. We have create a text box and a button. When the user enters some text and press the button it is sent to the server and server sends it back to the client which is then getting logged in the console.

So, here we conclude this part of tutorial and now we have a client and server which can communicated with each other. In the next part we will have multiple clients communicating with each other. To stay tuned subscribe to our news letter as well as our Youtube channel.

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