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.

Our Stack

  1. Node.js

Why Node.js ?

That is an excellent question. Usually REST apis are written in a client/server model, in which the client would demand certain resources from the server, and get those resources in response. This architecture is common in traditional web applications. The server reacts when the client made a request, and then closed the connection right after each response. However, in 2009, Ryan Dahl introduced a new approach to server-side runtime written in JavaScript. It enables requesting in and out of the web server (I/O) to be processed concurrently and asynchronously using a concept called non-blocking, or asynchronous I/O. The original idea behind this was to build websites with real-time push capability. Thus Node.js was born.

Unlike the previous client/server model, it became possible to develop two-way connection websites with free data exchange. It’s mostly due to WebSockets, which allow opening an interactive communications session between a user’s browser and a server. Requests to a server are then processed as a loop (event loop, to be more precise), which makes Node.js a JavaScript runtime environment that takes a “non-blocking” approach to serving requests and thus, achieves low latency and high throughput along the way.

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.

Project Setup

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:

tsconfig.json

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.

routes.ts

Now in our server.ts file we will have a route class instance that will handle routing to views.

server.ts

Now let’s make some more changes to our routes.ts file to serve static content.

Above is our index.html file. Now in the browser we should be able to see the hello world message. Next we are going to add some client side javascript to our index.html page. To do so we need to let express know that we are serving client side javascript. In out chat-server.ts file we add the following line.

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.

https://cdnjs.com/libraries/socket.io

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.

very simple changes added some elements to our file. Now let’s add some code in the client side javascript index.js file.

index.js

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.

https://www.html5rocks.com/en/tutorials/webrtc/infrastructure/

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.

Software Craftsman | Entrepreneur | Freelancer. Always on the look for opportunities to make the world a little bit better with technology.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store