How to Build a Video Chat Application with Node.js, Socket.io and TypeScript
Hey awesome people, it’s real good to see you back here. Alright so, in this tutorial we are going to be building a video chat application, yup you heard it right. We will explore how websites like Skype and Slack works. All right so let’s dive in.
Why Node.js ?
On another note a Node.js app is run in a single process, without creating a new thread for every request. Node.js handles concurrency through an event loop which makes it extremely scalable and able to serve millions of requests.
In a nutshell Node.js is built for real time scalable applications. I will provide links to further readings that will give you some further information on why Nodejs is ideal for real time applications.
To get started we need to install necessary packages first using NPM.
npm initnpm install typescript express ts-node
Now lets setup an elementary tsconfig.json file:
Now to run our project let’s add a new script in our `package.json`
Now we are going to create server.ts file in the src directory
Now run the file with following command in your terminal
npm run dev
Now if you are like me you don’t like restarting your server every time you make a change to one of your files. So lets add in hot module reload in our application. We will be using nodemon for this.
npm i nodemon ts-node @types/node --save
Now we don’t have to worry about restarting the server every time.
Adding Socket.io for real time goodies!!!
alright now we are ready to bring in socket.io in our application. First let’s install the node module.
npm i socket.io --save
and now we change our server.js file as following
This is where typescript really shines. We restructured our code in more object oriented manner. As our application keeps growing it becomes important to maintain readability. It is very easy to follow and establish design patterns with typescript while developing low defect highly scalable code.
Next we are going to be creating a server using http. So we add the following code to our chat-server.ts file
we added the sections marked new.
Next we would like to add a static html page. Later we can change this html with a single page application. However, for now let’s add a static index.html. To do so we first create a folder called views in our src directory. You should have a directory structure similar to following.
We also created a routes folder and a routes.ts file for our routes. Now let’s do some code restructuring.
Now in our server.ts file we will have a route class instance that will handle routing to views.
Now let’s make some more changes to our routes.ts file to serve static content.
we are telling express that we want to serve client side resources from public folder. Next, we just create the folder structure and add the files. Our folder structure should look like this now.
download the socket.io client side code and paste it in socket.js file; you can grab any one of these from cdnjs.
now let’s bring in socket.io in the server side by adding the npm module
npm i socket-io — save
We initialize our server with socket. to do so lets make the following changes to our chat-server.ts file
Now we modify the listen() method in our chat-server.ts file. We are going to broadcast our own socket.id to all users except the person sending it.
Now we are going to update our html file and add some client side code.
We are listening to the add-user event that is being broadcasted by the server. In the client side we just retrieve the data and show them on the page.
Now if you open 2 distinct tabs you will see that it indicates that another user is connected. This tells us that our sockets are working properly and we are connected. You may also notice once you leave the page the socket.id is not removed from the page. So let’s create another method in the server-side that will broadcast an event when user disconnect and in the client side we will be listening for that event and change the view accordingly
we added a private variable that will hold all the sockets id.
Now let’s create that createOffer() method. This method is fired when we click on one of the socket ids in the client side. So let’s create that method now.
As you can see here we first initialized a new peer connection. Now describing how STUN and TURN server works is a whole another topic. If you would like to learn about that please go follow the link below.
So inside the function we are creating a new peer to peer connection request, then we are using the socket.io to emit an event to the server channel. I also made an error method to handle any errors.
Now in the server side we need a event listener that listen to offer made event and broadcasts it back to the client.
Now let’s add the offer made listener in the client side.
With our peer connection we set remote socket description and then we emit another socket event called make-answer and we emit the chuck of data through web sockets. And finally in the server side we add another listener make-answer, then we emit answer-made to client.
Finally to get our user media in the browser and to do a p2p streaming we will add the following code block below
That’s it now go into 2 different browser tab. Once you see another person’s id click on it and you two will be connected for a video/audio conversation
The code for this whole section can be found below.