Volume 8, Issue 6, June – 2023 International Journal of Innovative Science and Research Technology

ISSN No:-2456-2165

Web Chat Application Using MERN Stack

Shivansh Sethi Hemesh Mahra
Department of School of Computing Department of School of Computing
Graphic Era Hill University, Dehradun Graphic Era Hill University, Dehradun
India India

Abstract:- The Internet has revolutionized the way we III. FLOWCHART

communicate and access information, making the world
more interconnected. The primary objective of this
project is to create a chat application using Java multi-
threading and network concepts. The application enables
users to engage in private conversations or participate in
public chat rooms, facilitating the exchange of messages
among users. Additionally, it facilitates the sharing of
various resources such as files, images, and videos. This
online chat system offers enhanced reliability and security
compared to traditional systems. The implementation
utilizes Java, multi-threading, and client-server
architecture, with a scalable design for future
enhancements.

Keywords:- REST API, WebSocket, npm (Node Package

Manager), MongoDB, [Link], [Link].

I. INTRODUCTION Fig. 1. Flowchart

Developers worldwide are continuously striving to
The flowchart illustrates the step-by-step process of the
improve user experience and streamline application chat application. It begins with the creation of a static server
development processes. Web development stacks, such as
socket that binds to a specific host and port. The server listens
MEAN and MERN, have emerged as popular choices for
for incoming requests and establishes connections with
building web applications rapidly. These stacks leverage pre-
clients. Once a connection is established, the server enables
existing frameworks, including JavaScript, to simplify simultaneous read and write operations, allowing clients to
development tasks. This paper focuses on the MERN stack, communicate and share resources. Finally, when the
which comprises MongoDB, [Link], React, and [Link]. communication is complete, the socket is closed on both the
By using a single programming language, JavaScript,
client and server sides.
developers can avoid syntax errors and confusion, while
benefiting from the flexibility offered by the MERN stack.
IV. METHODOLOGY
II. REALTION TO EXTERNAL ENVIRONMENT The proposed application aims to move away from a
centralized system, commonly found in applications like
The chat application allows users to easily connect and
Skype, towards a decentralized approach for improved
communicate with network-connected systems. By selecting
robustness and security. The use of a distributed hash table
a user or system from the list, a chat form opens, enabling for indexing systems allows users to create their own buddy
seamless communication through a socket-based connection. lists without relying on a centralized database. When a user
wants to communicate with another user, the latter acts as a
server and authenticates the client. However, measures must
be taken to prevent masquerading attacks. The proposed
application incorporates the principles of decentralization and
user authentication to address these issues.

IJISRT23JUN763 [Link] 191

Volume 8, Issue 6, June – 2023 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165
V. ARCHITECTURE VI. CHAT APPLICATION OR CLIENT SIDE

A. SERVER The chat application is a crucial component of the

A server may be a computer dedicated to running a overall chat architecture, providing a direct interface for users
server application. Organizations have dedicated computer to interact with. It consists of two main parts:
for server application which has to be maintained periodically 1. Chat Client Engine: This component is responsible for
and has to be monitored continuously for traffic loads would managing communication with the Chat Server Engine. It
never let them go down which affects the company’s revenue. utilizes internal modules such as the Chat REST API
Most organizations have a separate monitoring system to Client Library and the Chat Web Socket Client Library to
keep an eye over their server so that they can find their server facilitate seamless communication between the client and
downtime before its clients. These server computers accept the server.
clients over network connections that are requested. 2. Chat UI: The Chat UI is responsible for presenting data
to users in a user-friendly manner. It includes components
The server responds back by sending responses such as the Chat Contact List UI, which displays the list
being requested. There are many different server applications of contacts or users available for communication, and the
that vary based on their dedicated work. Some are involved Chat Dialog UI, which enables users to engage in
for accepting requests and performing all dedicated works conversations and exchange messages.
like business application servers while others are just to
bypass the request like a proxy server. These server By splitting the chat application into these distinct
computers must have a faster Central processing unit, faster components, users can effectively communicate and interact
and more plentiful RAM, and bigger hard disc drive. More with others while having a clear and intuitive user interface to
obvious distinctions include redundancy in power supplies, facilitate their chat experience.
network connections, and RAID also as Modular design.
VII. DESCRIPTION
B. CLIENT
A client is a software application code or a system that  Initially, a static server socket is created, which is then
requests another application that is running on dedicated bound to a specific host and port.
machine called Server. These clients need not be connected to  Once the server is instantiated and the socket is bound to
the server through wired communication. Wireless the host and port, it starts listening for incoming
communication takes place in this process. Client with a connections on that port. The server is designed to accept
network connection can send a request to the server. client requests through this specific port.
 Upon starting the server, it becomes capable of accepting
requests from clients.
 On the client side, a socket is instantiated to establish a
connection with the server.
 To handle multiple client requests, a new server thread is
created using the socket, enabling the server to accept
requests from multiple clients concurrently.
 After accepting a request, the server facilitates
simultaneous read and write operations, allowing the
requesting clients to communicate with each other and
share resources.
 Once the communication is complete, both the client and
server close the socket to terminate the connection.

VIII. SCENARIOS AND OPERATIONAL CONCEPTS

The operational concepts of the application rely on user

inputs. The List form presents a comprehensive list of
Fig. 2. Architecture connected systems within the network, allowing users to
choose a specific name and initiate a connection through the
Chat form. The Connect button establishes the connection,
while the Refresh button updates the list of names. Error
handling is implemented to display a message if no name is
selected before clicking Connect.

IJISRT23JUN763 [Link] 192

Volume 8, Issue 6, June – 2023 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165
IX. DEPENDENCIES XII. SYSTEM IMPLEMENTATION AND
MAINTENANCE
The project relies on various third-party packages and
modules installed using npm (Node Package Manager). The A. IMPLEMNTATION
[Link] file serves as the project's manifest, containing The implementation phase holds significant importance
metadata and dependencies required for [Link] in ensuring the successful deployment of a new system.
development. Regardless of how well-designed a system may be, its
effectiveness can be compromised if the implementation
X. COMPONENTS process is not carried out properly. This phase involves a
series of activities aimed at converting a newly developed
Components are the fundamental building blocks of information system into an operational system that can be
React applications. They can be JavaScript classes or used by end users.
functions that accept properties (props) and return a React
element describing the UI section's appearance. B. TESTING
Testing plays a crucial role during the implementation
The chat application comprises several components, phase of a system. It encompasses activities such as system
including the Chat Client Engine, Chat UI, and various UI testing, debugging computer programs, and evaluating the
elements for displaying the contact list and chat dialogs. effectiveness of information processing procedures.

C. TRAINING METHODS
Training methods can include vendor-provided training
and in-service training. Vendors often offer comprehensive
educational programs as part of their services, providing
courses by experienced trainers and sales personnel.
Participants get hands-on experience using the system under
the guidance of the trainer, who can quickly address any
questions or issues.

D. MAINTENANCE
After the successful implementation of a system and its
adoption by end users, the maintenance phase comes into
play. System maintenance encompasses ongoing activities
such as monitoring, evaluation, and modification of the
operational information system to ensure necessary
improvements are made. This phase also involves addressing
user errors that may arise due to unfamiliarity with the new
system and resolving any failures or issues that occur during
its operation. Additionally, regular reviews or audits are
Fig. 3. React Components conducted to verify that the system is fulfilling its intended
objectives.
XI. CHAT SERVER ENGINE
XIII. CONCLUSION
The Chat Server Engine is the core component
responsible for message delivery and dispatch. It includes the Continuous improvement is essential for any
Chat REST API, which handles tasks like user authentication application. While the current focus is on text
and settings, and the Chat WebSocket Server, which communication, there are opportunities for further
transmits messages between users. The Chat App interacts enhancements. The goal is to develop a chat service web
with these components through the Chat REST API Client application with a high-quality user interface. Future
Library and Chat WebSocket Client Library. extensions may include features such as file transfer, voice
and video messages, audio and video calls, and group calling.

IJISRT23JUN763 [Link] 193

Volume 8, Issue 6, June – 2023 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165

Fig. 4. UI Design

REFERENCES

[1].[Link]
content/uploads/papers/v9i5/[Link]
[2].[Link]
[3].[Link]
[4].[Link]
content/uploads/papers/v7i5s2/[Link]
[5].[Link]

IJISRT23JUN763 [Link] 194