© 2022 IJRTI | Volume 7, Issue 6 | ISSN: 2456-3315

AN OVERVIEW OF REAL-TIME CHAT APPLICATION

1
Akshata D Vhandale, 2Sayam N Gandhak, 3Saundarya A Karhale, 4Sandipkumar R Prasad, 5Prof. Sudhesh A Bachwani
1,2,3,4
Students, 5 Professor
Computer Science Engineering
Government College of Engineering, Yavatmal, Maharashtra, India,
Dr. Babasaheb Ambedkar Technological University Lonere, India

Abstract: Chat application is a feature or a program on the Internet to communicate directly among Internet users who
are online or who were equally using the internet. Chat applications allow users to communicate even though from a great
distance. Therefore, this chat application must be real-time and multi-platform to be used by many users. The development
of information and communication technologies are rapidly making one of the reasons for Indonesia, especially Bandung
to develop this chat application. That's because Indonesia does not always rely on outsiders. It is important for Indonesia
to develop this chat application for themselves. This chat application in the manufacture begins with the collection of
relevant data that will be displayed in the web and mobile versions. The programming language used to build server is
Node.js with express framework and MongoDB database.

Keywords: HTML, CSS, JAVASCRIPT, MERN STACK, Mongo DB, Express JS, React JS, Node JS

1. INTRODUCTION
Today Developers around the world are making efforts to enhance user experience of using application as well as to enhance the
developer’s workflow of designing applications to deliver projects and rollout change requests under strict timeline. Stacks can be
used to build web applications in the shortest span of time. The stacks used in web development are basically the response of
software engineers to current demands. They have essentially adopted pre-existing frameworks (including JavaScript) to make their
lives easier. While there are many, MEAN and MERN are just two of the popular stacks that have evolved out of JavaScript. Both
stacks are made up of open source components and offer an end-to-end framework for building comprehensive web apps that enable
browsers to connect with databases. The common theme between the two is JavaScript and this is also the key benefit of using
either stack. One can basically avoid any syntax errors or any confusion by just coding in one programming language, JavaScript.
Another advantage of building web projects with MERN is the fact that one can benefit from its enhanced flexibility. In order to
understand MERN stack, we need to understand the four components that make up the MERN stack(fig.1), namely – MongoDB,
Express.js, React and Node.js.

Problem Statement
• This project is to create a chat application with a server and users to enable the users to chat with each other’s. • To develop an
instant messaging solution to enable users to seamlessly communicate with each other.
• The project should be very easy to use enabling even a novice person to use it.
• This project can play an important role in organizational field where employees can connect through LAN.
• The main purpose of this project is to provide multi chatting functionality through network.

Innovative Ideas of Project

• GUI: Easy to use GUI (Graphical User Interface), hence any user with minimal knowledge of operating a system can use the
software.
• Platform independence: The messenger operates on any system irrelevant of the underlying operating system.
• Unlimited clients: “N” number of users can be connected without any performance degradation of the server. 1.3 Project Objective
• Communication: To develop an instant messaging solution to enable users to seamlessly communicate with each other.
• User friendliness: The project should be very easy to use enabling even a novice person to use it.

Scope of The Project

• Broadcasting Chat Server Application is going to be a text communication software, it will be able to communicate between two
computers using point to point communication.
• The limitation of Live Chat is it does not support audio conversations. To overcome this limitation, we are concurrently working
on developing better technologies.
• Companies would like to have a communication software wherein they can communicate instantly within their organization.
• The fact that the software uses an internal network setup within the organization makes it very secure from outside attacks.

Workflow Diagram of Real-time Chat Application:-

What is Python?
Python is an interpreted high-level programming language for general-purpose programming. Python features a dynamic type
system and automatic memory management. Python's simple syntax, modules and packages makes it possible for us to develop

IJRTI2206316 International Journal for Research Trends and Innovation (www.ijrti.org) 2095
 © 2022 IJRTI | Volume 7, Issue 6 | ISSN: 2456-3315

applications rapidly. Professionally, Python is great for backend web development, data analysis, artificial intelligence, and
scientific computing. Many developers have also used Python to build productivity tools, games, and desktop apps.
The syntax of the language is clean and length of the code is relatively short. It's fun to work in Python because it allows you to
think about the problem rather than focusing on the syntax. Python's simple, easy to learn syntax emphas. Chat application is a
feature or a program on the Internet to communicate directly among Internet users who are online or who were equally using the
internet. Chat applications allow users to communicate even though from a great distance. Therefore, this chat application must be
real-time and multi-platform to be used by many users. The development of information and communication technologies are
rapidly making one of the reasons for Indonesia, especially Bandung to develop this chat application. That's because Indonesia does
not always rely on outsiders. It is important for Indonesia to develop this chat application for themselves. This chat application in
the manufacture begins with the collection of relevant data that will be displayed in the web and mobile versions. The programming
language used to build server is Node.js with express framework and MongoDB database.

2. SYSTEM DESIGN OF REAL-TIME CHAT APPLICATION:

Chat application is a feature or a program on the Internet to communicate directly among Internet users who are online or
who were equally using the internet. Chat applications allow users to communicate even though from a great distance.
Therefore, this chat application must be real-time and multi platform to be used by many users.
Application module Description:
 Direct messages
 Group messages

Technology:
Realtime chat applications interface are created using scripting languages like HTML CSS3, JavaScript, and Bootstrap.
This markup language makes the application more attractive, useful and user-friendly to use and purchase. Markup languages help
make things more engaging and imaginative.

HTML
HTML is a hypertext markup language. Here is an emerging technology, Cascading Style Sheets, which can eliminate much of the
HTML table that can be used to control the layout of a web page. A web designer can separate the header, body, and sidebar sections
of a web page by placing each section in a separate cell. Alternatively, the network designer can put each link button on the header
and sidebar in a separate cell so that he can set unique attributes for each button. Then, in the body of the page, the network designer
can separate the text and graphic elements into different cells to adjust spacing and other properties individually.

CSS
CSS can be a formatting language to which you want to add style to your page. This can be done by having the associated CSS
document in your html page. The page then has selectors and attributes that affect the tags inside your html document. CSS was
introduced in 1996. It was created to prevent people from having to repeat a lot of code.
is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML
(including XML dialects such as SVG, MathML or XHTML).[1] CSS is a cornerstone technology of the World Wide Web,
alongside HTML and JavaScript.[2]
CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts.[3] This separation can
improve content accessibility; provide more flexibility and control in the specification of presentation characteristics; enable
multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, which reduces complexity and
repetition in the structural content; and enable the .css file to be cached to improve the page load speed between the pages that
share the file and its formatting.
Separation of formatting and content also makes it feasible to present the same markup page in different styles for different
rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile
devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.[4]
The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule
matches a particular element. This cascading priority scheme is predictable.

JavaScript
JavaScript is a powerful client-side scripting language. JavaScript is mainly used to enhance user interaction with the website. In
other words, you can make your web content more relatable and interactive with the help of JavaScript. JavaScript is increasingly
widely used in game development and mobile application development.

MERN Stack consists of four main components or can say four main technologies:
M represents Mongo DB (Database), primarily utilized for planning record data set and is a No SQL (Non-Structured Query
Language) Database System
E represents Express, primarily utilized for creating Node.js web system
R represents React, primarily utilized for fostering a customer side JavaScript system
N represents js, primarily utilized for fostering the chief JavaScript

IJRTI2206316 International Journal for Research Trends and Innovation (www.ijrti.org) 2096
 © 2022 IJRTI | Volume 7, Issue 6 | ISSN: 2456-3315

1.MONGO DB: We utilized Report Situated Data set for example MongoDB for our venture MongoDB is an information base
where each record is an archive design. In the background on the server, MongoDB changes over our JSON information into a
paired adaptation of it which is fundamentally put away and questioned all the more proficiently. MongoDB utilizes BSON to
inquiry information base. MongoDB stores BSON design both inside, and over the organization, yet that implies we can't consider
MongoDB a JSON information base. we can address any information in JSON design which can be locally put away in MongoDB,
and recovered straightforwardly in JSON design. As we contemplated and executed MongoDB, we can say that it is adaptable and
permits its clients to make construction, information bases, tables, and so on Subsequent to introducing MongoDB we had a choice,
of utilizing Mongo shell as it gives us a JavaScript interface through which the clients can collaborate and complete any activities
identifying with questioning. MongoDB is a record-arranged information base, so it is not difficult to list reports. Also, that is the
explanation it handles reactions at a quicker pace. MongoDB is Adaptable In the MongoDB data set, we dealt with huge information
by isolating it into a settled archived structure. MongoDB is an information base server that permits us to run different data sets on
it. As innovation creates and the requirement for quick and enormous information trade emerges, a kind of NoSQL or unstructured
data set arises. SQL and social information bases have table structures, while NoSQL has a configuration of document-oriented
stores. Reconciliation issues came as difficult when the two distinct data sets were utilized on similar programming. Perhaps the
most recent innovation in the information base field is No SQL (Not just Organized Inquiry Language).

2.EXPRESS JS: We utilized Express as it is a Node.js system. While building the application we concentrated on that as opposed
to making heaps of hub modules and composing the code with Hub JS, Express simplified it and simpler to compose the back-end
code and carry out it in an organized arrangement. Express aided us in planning our web applications and APIs needed in our
venture as it upholds numerous middleware which makes the code more limited and more straightforward to compose.
Nonconcurrent programming and Single-strung design are the greatest benefits of utilizing Express in our application. For our
application hearty Programming interface Made another organizer to begin our express undertaking and the means for it are, we
needed to add an order in the order brief to introduce the bundle. json record. From that point forward, we needed to acknowledge
the default settings and proceed. Npm init is the order to begin.

3.REACT JS: React JS is an open-source, front-end JavaScript library to foster UI parts. It delivers quicker due to the virtual DOM,
henceforth reloading can be made quicker. Some continuous items use React Js like Facebook, Netflix. React utilizes virtual DOM
that concludes whether or not the part must be reloaded dependent on the present status of the part and the progressions that have
happened. This keeps the application from re-delivering pointlessly. Aside from this Respond likewise presents one way
information stream which assists with controlling the progression of the information inside the application which makes the
following of the happened simpler and furthermore improves on the spread and the dependability. React.JS utilizes Parts. Parts are
the structure squares of UI wherein every part had a rationale identified with our web-based business application and it added to
the general UI of our web application. Parts can be reused, and it helped our code for web applications more straightforwardly to
be perceived by different designers and generally speaking web applications better at execution. There is an explanation React is
known as the best library for building UIs. How it approaches building UIs is extraordinary yet congenial. React.js breaks UIs into
free, reusable pieces, and disconnected parts. This is the way you characterize a part, 'Welcome,' in ES6. Also, you don't need to
record each part while building applications in Respond. There are numerous part libraries accessible in the Respond environment:
React Material-UI, Respond Bootstrap, and Respond Beauty are a couple of models.
Note: React is not a framework. It is just a library developed by Facebook to solve some problems that we were facing earlier.
Prerequisites: Download Node packages with their latest version.
How does it work: While building client-side apps, a team of Facebook developers realized that the DOM is slow (The
Document Object Model (DOM) is an application programming interface (API) for HTML and X ML documents. It defines the
logical structure of documents and the way a document is accessed and manipulated.). So, to make it faster, React implements a
virtual DOM that is basically a DOM tree representation in JavaScript. So when it needs to read or write to the DOM, it will use
the virtual representation of it. Then the virtual DOM will try to find the most efficient way to update the browser’s DOM.
Unlike browser DOM elements, React elements are plain objects and are cheap to create. React DOM takes care of updating the
DOM to match the React elements. The reason for this is that JavaScript is very fast and it’s worth keeping a DOM tree in it to
speed up its manipulation.
Although React was conceived to be used in the browser, because of its design it can also be used in the server with Node.js.

IJRTI2206316 International Journal for Research Trends and Innovation (www.ijrti.org) 2097
 © 2022 IJRTI | Volume 7, Issue 6 | ISSN: 2456-3315

2. Node.JS: This section contains a brief technical overview of the Node.js platform Node.js is an open-source, cross-stage,
back-end JavaScript runtime climate that sudden spikes in demand for the V8 motor and executes JavaScript code outside an
internet browser. Node.js allows designers to utilize JavaScript to compose order line devices and for server-side
prearranging—running contents server-side to deliver dynamic site page content before the page is shipped off the client's
internet browser. Thusly, Node.js addresses a "JavaScript all over" paradigm,[6] bringing together web-application
advancement around a solitary programming language, rather than various dialects for server-side and customer side contents.

3. IMPLEMENTATION OF REAL-TIME CHAT APPLICATION

 Sign-Up page

Fig: SIGN-UP PAGE

This is our Sign-Up page where the user need to enter the details like name , username , phone number , Avatar Url, and password
to sign-Up .

Fig : SIGN-IN PAGE

This is the Sign-in page . From here registered users can sign-in using username and password.

Fig. MAIN INTERFACE PAGE

This is the main interface of our application where different options are available like user can create groups , can message any
person in personal , can see how many users are online ,etc.

Fig. DIRECT MESSAGES PAGE

This is the interface from where user can directly message anyone registered on the application .

IJRTI2206316 International Journal for Research Trends and Innovation (www.ijrti.org) 2098
 © 2022 IJRTI | Volume 7, Issue 6 | ISSN: 2456-3315

Fig. CREATING CHANNEL

From here user can create group or channel and can add the other participants as per their convinience.

Fig. GROUP MESSAGES PAGE

This is the group messages interface from where user can message on group and all the group members can view the messages .

Fig. EDIT CHANNEL

From this page the user can edit the channel or group . and can add more group members .

Fig. ATTACH FILES OPTION

From here user can send the attachment to the other person . by using this feature user can send pictures , videos, documents also.

Fig. EMOJIS OPTION

From here user can send different emojis to the other user to expression the emotions .

IJRTI2206316 International Journal for Research Trends and Innovation (www.ijrti.org) 2099
 © 2022 IJRTI | Volume 7, Issue 6 | ISSN: 2456-3315

Fig. REACTIONS OPTION

From here user can react to any one’s message and pictures too using emojis and text too.

Fig. MORE OPTIONS

From here users can access to other options like delete messages, edit messages , reactions and reply.

4. CONCLUSION

One of the most widely used and modern full-stacks is the MERN stack, which plays a leading role in web development nowadays.
The four components included in MERN stack are MongoDB database, Express as back-end web framework, React.js serves as
front-end library and Node.js as JavaScript environment. The purpose of this thesis was to study the usability and functionality of
each technology in the MERN stack and as a consequence, to develop a fully functional E-commerce web application by utilizing
MERN as well as some other additional modules. We have used React for frontend & redux for state management, Node JS &
Express for backend with MongoDB as database.HTML,CSS and Javascript were also used as they are essentials for creating
websites.the general purpose of the website is to help customers to sell and buy products with fair price with ease of handling
website.Unlike traditional commerce that is distributed physically with an individual's effort to travel and search for products, e-
commerce has made it easy for people to reduce manual labour and avoid wasting time. The basic concept of the website is to allow
customers to make physical purchases using the network and to allow customers to purchase the things are easy .

REFERENCES:

,[1] Masiello Eric, author. Mastering React Native. January 11; 2017. Accessed 1 Jan 2022
[2] Naimul Islam Naim, ReactJS: An Open-Source JavaScript library for front-end development, Metropolia University of Applied
Sciences, accessed on 1 Jan 2022
[3] Stefanov Stoyan, editor. React: Up and Running: Building web Applications. First Edition; 2016. Accessed 1 Jan 2022
[4]Horton Adam. Vice Ryan, author. Mastering React; February 23; 2016. Accessed 1 Jan 2022
[5]]https://alexkondov.com/express-architecture-review
[6] https://expressjs.com
[7]https://www.techmagic.co/blog/node-js-vs-python-what-to-choose
[8] https://nodejs.dev/learn
[9] http://vschart.com
[10] http://en.wikipedia.org/wiki/MongoDB
[11] International Journal of Engineering Research & Technology Published by : www.ijert.org vol. 10 Issue 06, June-2021.
Performance Optimization using MERN stack on Web Application.
[12] Lakshmi Prasanna Chitra, Ravikanth Satapathy Department Of Computer Science Department Of Computer Science GITAM
University Visakhapatnam, India . Performance Comparison and Evaluation Of Node.Js And Traditional Web Server (IIS)
[13] 2020 3rd International Conference on Computer and Informatics Engineering (IC2IE) 978-1-7281-8247-6/20/$31.00 ©2020
IEEE 261 Online Integration of SQL and No-SQL Databases using RestAPIs: A Case on 2 furniture e-Commerce Sites
[14]https://www.guru99.com/react-vs-angular-key-difference.html

IJRTI2206316 International Journal for Research Trends and Innovation (www.ijrti.org) 2100