Socket.io, WebRTC, Node, Express, MongoDB, and Vue

Hey devs,

How's been your week. I hope you all had a good one. In today's tutorial, we will discuss how we can integrate socket.io with a Node, Express, and MongoDB application. For a bonus, I will add WebRTC.

Socket.io is one package that you should really know. It's simple but very powerful. Many applications are using it. I once talked about AWS Websocket and detailed how you can integrate it into your application https://dev.to/kevin_odongo35/build-video-chat-app-with-aws-websocket-webrtc-and-vue-part-1-5fob. AWS Websocket and Socket.io does the same thing they provide bi-directional communication.

Imagine you are building a logging application like Cloudwatch, alert application, video, chat, payment application, etc you will need real-time communication in your application.

Too many articles have documented about socket.io but few will give you a practical approach. I have appreciated articles that always give a practical approach for example AWS Amplify team. They have truly sold the product by teaching how to use it not leaving everyone to use documentation.

In today's tutorial, we will build a simple meeting application like Google meet, Jitsi, etc. Our stack will be Vue, Socket.io, MongoDB, Node, Express, and WebRTC. I am building a course about this and will add React Native for mobile applications.

Here is the application https://main.d37i78548hx7uj.amplifyapp.com/. This is a meeting application that works like Google meet. Try it in your browser.

1. Open two windows.
2. Create a meeting in one browser.
3. Join the meeting in the other browser.
4. Two videos will appear on the side indicating two users in the meeting.

If you like what you have seen or working on an application that requires socket.io or WebRTC this tutorial will be quite beneficial.

What we will learn.
Description of the course outline

Vue.

You will learn all you need to know about Vue. From installation, Router, Vuex, PWA, unit testing with jest package, End to End testing with Cypress. The bonus you will learn how to use Tailwind with Vue. (For the course you can use any framework).

React Native

You will learn to build the same application with React Native and Chakra UI. Navigation, integrating your API's and consuming. Ensuring web and mobile are in sync

Authentication we will use Passport.js

You will learn how to integrate passport.js for authentication. Add social authentication Facebook, Google, and Twitter. Protecting your routes and encryption.

Socket.io

You will learn how to add socket.io to your application. We will go through different scenarios and ensure you are an expert by the end of the tutorial.

WebRTC

You will learn how to fully use WebRTC for video. Configuring a Turn server in AWS EC2. Adding auto-scaling and ensuring your application can handle the sessions. Best practices while using WebRTC.

Docker.

You will learn how to use Docker to deploy your application. There will be a lot of exercises throughout the process. I will be as detailed as possible.

Bonus

I will detail how you can use AWS Websocket as an alternative. Protect your routes with Lambda and DynamoDB for the backend.

If you will be interested register here https://forms.gle/Lm5L1sVcBnfi7PgA8.

Back to the tutorial sorry about all that. I will breakdown this tutorial into two articles.

Today let me talk about the logic of the application and the steps we will want to achieve. With this description of the steps, you can build your own in any framework so you can follow along in the next article.

Front-End

The front-end will only require 3 components.

1. Home.vue (Vue) OR Home.js (React Native)
2. Session.vue (Vue) OR Session.js (React Native)

The home component will pick the name of the meeting. We will encrypt the name and the origin/hostname. Get a URL that you can share with those who want to join.

The session will render two children component

1. Meeting.vue (Vue) OR Meeting.js (React Native)
2. Join.vue (Vue) OR Join.js (React Native)

The join component will ensure a user gives a name that others can identify them with. Then when the form is validated they will join the meeting. The logic will be to hide one child and render the other when required.

That's all add a script.js to handle our API calls.

Backend

For backend we will have node, express, mongodb and socket.io. We will create two API's one to persist sessions and the other to handle chat contents.

When a Peer A joins a meeting their socket id will be persisted in the Database and they will notify others they have joined the meeting by sharing their socket id.

When another Peer B joins a meeting the same process will occur in the backend there socket id will be persisted and Peer A will be notified Peer B has joined.

Peer A will create an offer and generate ice candidates to share with Peer B and send through the connected socket. Once Peer B receives the offer they will send an answer and his ice candidates. Once this is complete video streaming will be shared through peers.

The offers and answers will only be sent between each individual user connected to the specific meeting. There are steps that MUST be followed.

Two approaches can be used to share ice candidates trickle or without trickle will explain how to achieve both depending on which one your application will require.

The chats will be broadcasted to everyone in the meeting. Once the meeting ends everything will be cleared in the database.

That is how simple it is to build a Meeting Application that handles both chat and video capabilities.

Then what's the catch?

The catch is with video streaming you need to have a server that can scale. A lot of items are exchanged during the process and you have to have a good infrastructure to handle the load. We will discuss how to use AWS EC2, Autoscaling to build your infrastructure that can handle this.

Digest the logic then we handle the practical bit tomorrow.

Thank you