Real time chat app with React, Nodejs, MongoDb and Socket.io (Part 1 Serverside)

I wanted to Build a real-time chat app using React and Nodejs and MongoDB. To do that the best solution is to use socket.io. After few hours Browsing internet but I didn’t find the expected solution correctly. There are many tutorials for creating chat app with react-socket.io , react-nodejs, nodejs-socket.io but i didn’t find real solution for (Real time chat app with React, Nodejs, MongoDB and Socket.io) this…

So After few Hours I understand how socket.io works with react and nodejs then i build this real time demo chat application.

first of all I create a node-express backend server by using git-bash command-prompt and vs code as text editor..

And i put default values ( Press Enter to Everything ) and created package.json file

Then I create my index.js file ( Which is the main js file in server side )

To get express mongoose and other staff I need to install them in to my app folder. I install these dependencies to my app using npm i — save command.

In this app I use these dependencies — express as nodejs framework mongooge to connect mongoDB, socket.io to make my app real time update, concurrently to run nodejs server and react app using one command and finally nodemon for restart my server when I save the js file ( without nodemon we need to manually restart my server every time we make changes to our code )… We need to install some other dependencies to our React app but we will do the later ( After we Create the React app ).

After Installed all dependencies we get the messages like above. And When we look at our package.json file it will looks like this,

( I forgot one dependency called config to install it we can simply do npm i config — save )

Now we can Start with Our backend. Here is my Code in index.js page

My Database connection file code,

In Here we use config dependency because we need to protect our database details if we use some clientIds and clientSecrects so i put all of them in a json file and with the help of config I can access them in any where in my app like I did in Here.. All we need to do is config.get(‘variable-name’).. i will show my json file then you can get the point.

To Build this app we don’t need jwtSecret, or github cliendId or secret. But Using config we can get all these files. And Also we need to install mongoDB local to your pc or you can do using mongoDB Online I use local mongoDB.

And To save data in MongoDB We need to create models for that. In here we only Need one model i called it chats model and here is it.

We Only Store username name and message and the message date.. In Here first i create a Schema Using Mongoose and export it so we can access it anywhere in our app..

And We need to create Home page Which in the Index page as a Variable,

Here is My Home page Code..

Using React app first we load latest 4 messages in the database to do that we use axios in our react app when the axios request “http://localhost:5000/api” our backend server send the latest 4 message to the react app as json format.

After that the socket.io magic happens.. In socket.on means get data and socket.emit means send data io.emit means send data to all users and socket.emit means send data to the one specific user which is who send the data to the server.

Now Our Serverside part is done. And Part2 I will Implement the Client side Using React.