Real time private chatting app using Angular 2, Nodejs, mongodb and Socket.io – Part 1

Yes, you heard it, Today we will implement a Real time private chatting app using Angular (Latest) and Nodejs.
Now one might ask why on God’s green earth another chat application?
Well, In my defense I would like to say,

This is not just another group chat application. It’s a private chat application, so you will learn much more than just broadcasting socket event. And I assure you, even if you are new in Angular, This application will be a piece of cake for you.

Yes, you won’t find any extra weird ceremony Added in this application, you will feel that I know Angular; I can create stuff using Angular.

Not convinced yet?

No problem, let’s talk about few more features. As the title reads Realtime Private chat, Here you will get to know how you can implement real-time private chat between users those who are online. It’s better, I list down all these features instead of writing a paragraph.

  1. First Thing first, you will implement a Login and Registration in your application.
  2. After a Successful Login/Registration, User will be redirected to the Home Page. This Hompage will be protected by none other than Angular Route Guard.
  3. Here You will implement a Realtime chat list, why Realtime because chat list will update automatically when any new comes online or any user goes offline.
  4. On the Home Page, User can initiate a conversation with any other online user. Also, the user can read their old conversation.
  5. Once you are done talking, Then you can use Logout button to go offline.
Looking for Real-Time private chatting app using AngularJswe have that too.

 

     Download

     Demo

 




Let’s take a look at the final outcome of this application, Before going any further.

Login page output real time private chatting app using Angular 2

Login And Registration Page

 

Home page output Real time private chatting app using Angular 2Home Page

 

So we will implement all the above-listed features in the series of Fours articles. As this article seems little spacious, hence I have divided it into 4 parts. Each part of this article covers unique part in building the Real Time private chatting app.

First part: Covers the prerequisites, server configuration setup and we will configure our angular application and application Routing.

Second part: In this part, you will implement Login, Registration, Checking uniqueness of the username before registration and Checking the Session of a user (when the user navigates to the home page).

Third part: Here You will implement a Realtime Chat list.

Fourth part: In the last part, you will implement chat feature, where the user actually can chat with each other.

Before we start I want to confess that this series is going to be long even for me, so bear with me and you might also want to go grab a coffee or Beer whatever works for you. So let’s first start with prerequisites.

Prerequisites

Before you start, I want you to have some knowledge of Angular, Nodejs and MongoDB. Because we are going to use these stacks to implement our application.

I assume, that you are familiar with the below-listed concepts. Supposing you are not familiar with the concepts listed below , no worries then take a look at below article and then come back.

  1. Highlight selected row in Angular 2
  2. Angular 2 CRUD application using Nodejs

Creating a new Angular project

Let’s use Angular CLI to setup our application. If you don’t have Angular CLI installed on your machine run the below command to install it globally.
npm install -g angular-cli
After Angular CLI installation, to create a new Angular project Run below command. This command will create all the necessary files, download all the required external dependencies and do all of the setup work for us.

ng new AppName

Project structure and Folders

In my opinion, it is very important that you understand what folders and files you will create to in this application. You can see all the folders and files in the below image.

Project structure Real time private chatting app using Angular 2, Nodejs, mongodb and Socket.io

The above Image is snapshot /app  folder with few folders and files inside it. We have created three folders /components, /interfaces and /services for obvious reasons. So that being said, now let’s understand the motive of each file and folder.

1. /components: Needs no introduction I believe. Inside component, we have 4 other components. Though the name of each component is comprehensible, But still I will list down each component along with its usage for the sake of our conscience.

  1. Auth Component: We will use it for Login and Registration.
  2. Chat-list Component: As the name suggests, to display the real-time Chatlist.
  3. Conversation Component: This component is used to display messages.
  4. Home Component: This will be the host component of Chatlist and conversation component.

2. /interfaces: Again, I bet you are familiar with this word. We will see all the interfaces down the road when we will create them.

3. /services: And then we have total 6 services. We will consume these services in our application and the name of the services are screaming their agenda.

  1. Auth-gaurd Service: Your Angular Route guard will use this service before redirecting to you anywhere.
  2. Emitter Service: To send data to each component we will use this service.
  3. Form Service: This service will help in building the forms in our component.
  4. Chat Service: This service will hold all your HTTP request.
  5. Socket Service: As the name suggests, In this service, we will emit and subscribe to socket.io events.

Angular and it’s Modules

We all are aware of that, the Angular is Modular. So why don’t you use this awesome feature of it? Well if you ask me, I would suggest you must.

In this application, we will interconnect our all components and services by using Angular modules only. By doing this way your application will become more readable and modular as well as your application will perform much better.

Angular by default comes with app.module.ts file, which is a top-level module, So open the app.module.ts file and write down the below code into it. In the below code, The important thing is to notice only import array. In the import array, you will add only two modules First is AppRoutingModule and second will be ServicesModule that’s it.

app.module.ts:

Now let’s start with Services Module, create services module by running below CLI command.

This command we will generate the services.module.ts inside the /app/services folder.

--module=app tells the CLI to register it in the imports array of the AppModule.

As we discussed above, you will import all the services into this services.module.ts file. Which means whenever you create new service just import that service into Services Module and add it into providers array of Services module and you are done. Open  services.module.ts  file and write some code into it.

services.module.ts:

Application Routing and Lazy Loading

In this section, we will also configure our application’s routing and all in all we only have two routes in this application that also without any parameter. So I don’t think one should be worried about routing at all.

Now run the below CLI command to generate the app-routing.module.ts file,

This command we will generate the app-routing.module.ts inside the /app folder.

--flat puts the file in src/app instead of its own folder.
--module=app tells the CLI to register it in the imports array of the AppModule.

Now Add the Route with Lazy loading enabled. Open the app-routing.module.ts file and write down the below into it.

As you can see in above code, we have only two routes, Goes without saying each route points to some module. Here you have two modules, which are listed below,

  1. auth.module.ts (AuthModule)
  2. home.module.ts (HomeModule)

Here you will create two components Auth component and Home component as of now. Later you will create rest of the two components when we will actually need them.

Here you have to run, two CLI commands the first command to generate module with the routing file and after the first command, you have to run command to generate the component with the same name as a module. Take a look at below commands,

The above command we will generate the auth.module.ts and route file auth-routing.module.ts inside the /auth folder.

This command we will generate the auth component inside the /auth folder.

Now you have to do the same for the home module as well and after run the command to generate the home component.

If you run the application at this point, you won’t see much on the screen obviously. You can skip all this step and take the clone of this repository and avoid all the work if you are already pro in Angular.

Creating New Nodejs Project and Application Folder structure

Till now you created and completed Angular application setup. As of now, your angular is nothing a but clean slate, and you will write rest of the A B C D in next 3 part of the series.

In this section, you will create Nodejs API boilerplate. For those who don’t know why Nodejs server is obvious to us,

  1. First, you will need a server where you can store and fetch user’s data and messages.
  2. Second, you need to implement real-time messaging for that we need Web socket.
  3. Third, it is the best choice available out there, you don’t have to learn anything at all except Javascript sure!

Okay so let’s go ahead and start the development, but before that let’s take a look at our folder structure of nodejs server.

Nodejs API Project structure Real time private chatting app using Angular 2, Nodejs, mongodb and Socket.io

 

As you can see, There are Five Folders in this application; Here you will create Four folders, expect one folder i.e. /node_modules. As of now, our application is not that much big, so I have kept the folder structure very minimal and easy to understand.In case if you want to go big, I would recommend reading Folder Structure guide provided by Rising Stack.

To understand the Purpose of each folder, go through the below-listed points.

1. /config: In this folder total, we have Four files as shown in the above image. In these files, we will cover the application and express related configuration along with the database connection.

2. /handlers: Here you will create files, which would include MongoDB query execution and Express route handlers. Which we will see down the road.

3. /utils: You will create files, which are mainly used as sugar in order to fulfill the other operations. In this case password hashing for Login and Registration.

4. /web: All your Express Routes and Socket Events will go here.

And at the end, we have .env and server.js file, and I believe these files needs no introduction.

Well, You studied and understood the project structure you have. Now let’s create Nodejs project by running below command.

This command will create a package.json file, by asking about your project. Now let’s take a look at package.json which, I have created.

package.json:

Creating a Nodejs Server

So you are familiar with the folder structure, it’s time to go ahead a create Nodejs server. You will start your Nodejs in the server.js file, as the name of the file represent itself. Open the server.js file and write down the below code.

server.js:

Explanation:

The above code is straightforward, don’t you think!  The server starts in three steps, which are listed below.

  1. First, The app starts with by executing constructor method when we create an Object of Server class.
  2. Second, in the appConfig() method you will include all your configurations.
  3. The last step is, you have to include the Routes and Socket Event.

And all this will happen when you will execute aapExecute() method by creating the Object of Server.

Creating a Configurations Files:

This section is all about writing configuration file, So you will basically deal with the files inside /config folder.

Let’s start with express-config.js file, Honestly at this point, you don’t need this file. Though when your application grows, will need to do express configuration. So open the express-config.js file and write down the below code,

express-config.js:

Second and our main configuration file is the app-config.js file, where you will write all your application related configurations, also you will include ExpressConfig file there. Open the app-config.js and write down the below code.

app-config.js:

Explanation:

  1. Since this application uses .env file to store configurations, you will dotenv module, read more about it here.
  2. Inside the includeConfig() you will basically use bodyparser and activate CORS for the application routes.

Nothing much to do here, let’s move on to next step.

Connecting with database (MongoDB):

Create a db.js file under /config folder and write down the below code. Here I am using the mongodb module, though you can use mongo schema and all. Since I don’t want to make this article more complicated so I will leave that to you.

db.js:

Conclusion

So here we are at the end of the first part, I know it was a really big article not only for you but for me as well. So let’s encore all the step one more time,

  1. We created the Angular app and understood each component, service, and classes required for the application.
  2. Second, we created a new Nodejs application and did the configuration.
  3. Also, we created Nodejs server and connected our application to the MongoDB.

In the next part, you will implement Login, Registration, and Logout feature along with other required features. I’ll see you in the next part.