lOMoARcPSD|54294637

Project report real time chat app

Computer Science & Engineering (Lakshmi Narain College of Technology)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

REAL TIME CHAT APPLICATION

A Major Project- I Report
Submitted in Partial fulfilment for the award of
Bachelor of Engineering in Computer Science & Engineering
Submitted to
RAJIV GANDHI PROUDYOGIKI VISHWAVIDYALAYA
BHOPAL (M.P)

MAJOR PROJECT REPORT

Submitted by
ANIKET GAVNDE (0103CS201028)
ANUSHKA SINGH CHAUHAN( 0103CS201039)
Under the supervision of
Dr. SUSHEEL GUPTA
(Assistant Professor)

Department of Computer Science & Engineering

Lakshmi Narain College of Technology, Bhopal (M.P.)
Session 2023-24

1|Page
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

LAKSHMI NARAIN COLLEGE OF TECHNOLOGY, BHOPAL

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

CERTIFICATE
This is to certify that the work embodied in this project work entitled “REAL TIME
CHAT APPLICATION” has been satisfactorily completed by the ANIKET
GAVNDE (0103CS201028.), ANUSHKA SINGH CHAUHAN (0103CS201039.) . It
is a bon-a-fide piece of work, carried out under the guidance in Department of
Computer Science & Engineering, Lakshmi Narain College of Technology, Bhopal
for the partial fulfillment of the Bachelor of Engineering during the academic year
2023-24.

Guided By
Dr. SUSHEEL GUPTA
Assistant Professor

Approved By
Dr. Sadhna K. Mishra
Prof. & Head
Department of Computer Science & Engineering

2|Page
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

LAKSHMI NARAIN COLLEGE OF TECHNOLOGY, BHOPAL

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

ACKNOWLEDGEMENT

We express our deep sense of gra琀椀tude to Prof. NIDHI SINGH department of

Computer Science & Engineering L.N.C.T., Bhopal. Whose kindness valuable guidance
and 琀椀mely help encouraged me to complete this project.
A special thank goes to Dr. Sadhna K. Mishra (HOD) who helped me in comple琀椀ng this
project work. She exchanged her interes琀椀ng ideas & thoughts which made this project
work successful.
We would also thank our ins琀椀tu琀椀on and all the faculty members without whom this
project work would have been a distant reality.

signature

ANIKET GAVNDE [0103CS201028]

ANUSHKA SINGH CHAUHAN [0103CS201039]

3|Page
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

S.NO. TOPICS PAGE No.

1. Problem Domain 5-6

2. Literature Survey 7

3. Major objec琀椀ve & scope of project. 8 - 10

4. Problem Analysis and requirement speci昀椀ca琀椀on 11 - 15

5. Methodology/ Planning of Work 16 – 17

6. Hardware/So昀琀ware pla琀昀orm environment 18

7. Snapshots of Input & Output 19 - 24

8. Coding 25 – 66

9. Project limita琀椀on and Future scope 67 – 68

10. References 69

4|Page
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

CHAPTER 1
PROBLEM DOMAIN

The chatting application has huge impact on day to day life. There are numerous chatting application
available in this world. Each application has different additional features varying from other
applications. These application organizations compete with each other and add some competing
features during each release. They have reached people much and have an impact on people’s life.
People find a better application from an available internet application which they feel much reliable
and secure. Some of the available chatting applications that are available in these days are WhatsApp,
Facebook, Instagram, Hike, etc... . The above mentioned applications have billion users all over the
world. Those companies are one of the top companies in the world. They have higher revenue per year
and have many employees for their organizations developing additional features to compete with other
organizations during each release. These applications have different features and follows different
ways to ensure security of their user data. Today a data theft is the major crime and most people are
involved in it. There are many cases being filed these days about personal data loss. So the
organizations have to ensure the security from data loss by the third party data crisis. The basic chatting
system should involve both sending and receiving processes simultaneously. In this application both
sending and receiving messages simultaneously happens through MERN concept.

Communication is a mean for people to exchange messages. Messaging apps (a.k.a. social messaging
or chat applications) are apps and platforms that enable instant messaging. According to the survey the
group of users prefer WhatsApp and like to communicate using Emoji. 51% of the group uses the chat
applications on an average of 1-2 hours a day. Messaging apps now have more global users than
traditional social network which means they will play an increasingly important role in the distribution
of digital journalism in the future.

Our goal is to build a web chat that holds a single chat room. Any user can connect to it from an open
window/tab, is able to upload an image to use as avatar during the chat, each connected user will see

5|Page
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

instantly any message sent, and new connected users will see the last 10 messages sent.Mongo DB
makes use of records which are made up of documents that contain a data structure composed of field
and value pairs. Documents are the basic unit of data in Mongo DB .Express does is that it enables you
to easily create web applications by providing a slightly simpler interface for creating your request
endpoints, handling cookies, etc. than vanilla Node. React is an open-source, component-based
JavaScript library used to create quick and interactive interfaces or UI components for users for web
and mobile-based applications. It is a declarative and highly accurate library that provides reusable
code, which enhances the efficiency and flexibility of single-page applications.Node.js is an open-
source and cross-platform JavaScript runtime environment. Node.js with Express.js can also be used
to create classic web applications on the server-side.

6|Page
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

CHAPTER 2
LITERATURE SURVEY

In the Online Chat Application , The authors have presented the application which provides note of
authorization that allows the user to use their account anywhere anytime with the use of any mobiles
phone. User needs to send discussion request before sending any communications to any user. When
user accept their request either only they send the communications otherwise not. User has to login
their application with their mail id and watchword as there is no need of OTP From this paper it has
been observed that online communication allows user to speak with others in a quick and profitable
manner. This paper shows the significance of conversation application in day present life and its impact
in technological world. Where as a conversation system for private network or associations is presented
in a paper [2].This system guarantees security of the communication and private data that will be
shared over the network. It also stores behind the scenes data in secure way .It develops a two way
communication system, to add the additional features from other traditional systems that is available
in the demand and to allow both group discussion and private discussion that enable easy and fast way
of communication between people. This guarantees unlimited data transfer without any restriction of
size which make people get connected to others at anytime, from anywhere. To transfer different train
formats over the system. To have unlimited size to store communication data. One more social
networking application provides features like Social networking in favoured language Image backup,
Image theft alert on demand, Landmark detection, OCR, Information on nearly any image. Observed
to work with React Framework to make interactive user interface and the web based real- time chatting
application does not need any added third- party account program, and the visual communication could
be established alongside. The programming tools used in assembling this application is React.js,
Node.js with express framework and Mongo DB database.

7|Page
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

CHAPTER 3

MAJOR OBJECTIVE AND SCOPE OF PROJECT

Chat apps, by default, render you a win-win situation – it gives your users a medium to communicate
with each other. At the same time, it keeps you informed about what they need from your brand. When
built right, the ideas for your business’ roadmap for the next few years will emerge from somewhere
across the chat conversations between your users and your customer support executives. Apart from
these, there are several benefits of chat application development.

3.1 Objectives for real time chat application are mentioned below:

1. Ensuring the security of message and confidential data to be shared over the
network.
to make the user’s private information hidden from any third party user. This may be the
government, hackers, or any other intelligence agency. The service provider may or may not
allow third-parties like the government to access the data as in the case of any criminals or
terrorist activities. But what if the servers get hacked? The information might then be in the
wrong hands. In such cases, the users prefer to choose end-to-end encryption, where even the
service provider cannot access decrypted data.

2. Creating a two-way communication system.

Instant messaging became wildly popular around 1996 and spread even more with AOL in
1997. The concept behind IM is that it is a way of quick communication between two people
due to tools such as knowing when messages are seen or knowing when others are online.
Many social media sites have integrated IM into their sites as ways to spread communication.
Many social media sites have direct message or Private message. Called either PM or DM,
where you can privately text one another from your social media account. Much different
from Chat rooms. Chat rooms are messages to a group of people. Chat rooms are often public,

8|Page
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

meaning that you are able to send a message and anyone can freely join the “room” and view
the message as well as respond.
WebSocket’s enables two-way communication between the client and server in real-time chat
applications. Using Rust to build the WebSocket server will enable the server to handle a large
number of connections without slowing down. This is due to Rust’s speed and reliability.

3. Allow both group chat and private chat:

To develop a chatting application that provide both private and group chatting according to the
user preferences. We believe that not all conversations need to be known to all and so the feature
of private chat which allows a one-on-one conversation between two people. Also sending the
same message to a bunch of people can be a tedious job so to combat that we have group chat
feature that allows multiple persons to see and reply to your message.

4. To allow for easier and faster communication between people

A chat application allows you to message or contact a person in real-time. In some cases, it
becomes the bridge on where customers, potential leads, prospects could ask inquiries about
products or services, and you can respond instantly. This factor alone has a tremendous effect
on the productivity of your business and a perfect reason to incorporate chat application for your
business.

9|Page
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

3.2 SCOPE OF THE PROJECT

To keep pace with this fast-moving world, we need to be adaptable to changing circumstances.
Communication is one of the most important aspects of any business.

And being able to develop these features is essential to growing a business. Having a good customer
service team is essential to improving business relationships with the customer. But it also helps to
reach out to your clients where you are. Showing that you are also improving can be important to your
customers. This feature indicates that you are willing to adjust to a variety of changes for potential
customers.

In addition, chat apps allow employees to interact and work together. Teams of employees can share
ideas and solve company problems with a single click. At a time when people are sitting at computers
all day, it makes sense that conversations take place there. The chat app works very well in email
communication. And the main goal of a chat request is cooperation. This means that its integration can
lead to better employee performance and productivity.

10 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

CHAPTER 4
PROBLEM ANALYSIS AND REQUIREMENT SPECEFICATION

4.1 PROBLEM ANAYLYSIS

1. Instant messaging. Users should be able to send one-to-one and group messages instantly,
easily and in real time.

2. Host custom fonts, stickers, and royalty-free emojis. This adds a bit of spark on conversations
and keeps them lively.

3. Allow users to mute chats. Group chats are especially active and some of the buzz may be a bit
much, so allow users to be able to mute them altogether.

4. Enable statuses such as “read, sent, and seen” for the messages. Everyone wants to see whether
their message was received or not.

5. Enable video and voice calls. Your users will expect to be able to make individual and group
calls as well as video chats.

6. Allow file transfers in several different formats like voice notes, videos, images and documents.

7. Make it so that the private key is stored on the device itself and therefore inaccessible without
the device.

8. Allow the ability to time a message so that it disappears from both the sender’s and the
receiver’s devices a certain amount of time after it’s read.

9. Build an always-on, strong, truly end-to-end encryption where no one can decipher the content
of the messages.

11 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

4.2 REQUIREMENT SPECIFICATIONS

4.2.1 User Classes and Characteristics: -

Standard users may belong to any demographic group including any gender, nationality that can use
computer’s browser. It does require its users to have any specific computer knowledge. User interface
is in English language so users should have basic English reading knowledge.

4.2.2 Operating Environment: -

HARDWARE REQUIREMENTS:

• Pentium-IV (Processor)

• 256 MB Ram

• 512 KB Cache Memory

• Hard disk 10 GB

• Microsoft Compatible 101 or more key Board

SOFTWARE REQUIREMENTS:

• Operating System: Windows 7 or above

12 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

4.2.3 Technology Used: -

FRONTEND:

• HTML - HTML, in full hypertext markup language, a formatting system for displaying material
retrieved over the internet. Each retrieval unit is known as a Web page (from www), and such pages
frequently contain hypertext links that allow related pages to be retrieved. HTML is the markup
language for encoding Web pages.

• CSS - Stands for "Cascading Style Sheet." Cascading style sheets are used to format the layout of
web pages. They can be used to define text styles, table sizes, and other aspects of Web pages that
previously could only be defined in a page's HTML.

• JS - Javascript (JS) is a scripting language, primarily used on the Web. It is used to enhance HTML
pages and is commonly found embedded in HTML code. JavaScript is an interpreted language. Thus,
it does not need to be compiled. JavaScript renders web pages in an interactive and dynamic fashion.
This allowing the pages to react to events, exhibit special effects, accept variable text, validate data,
create cookies, detect a user’s browser, etc.

• React.js - React.js, more commonly known as React, is a free, open-source JavaScript library. It
works best to build user interfaces by combining sections of code (components) into full websites.

13 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

BACKEND:

• Express.js - Express.js is a web application framework for Node.js. It provides various features that
make web application development fast and easy which otherwise takes more time using only Node.js.

• Node.js - Node.js (Node) is an open-source development platform for executing JavaScript code
server-side. Node is useful for developing applications that require a persistent connection from the
browser to the server and is often used for real-time applications such as chat, news feeds and web
push notifications.

• Socket. IO - Socket.IO enables real-time bidirectional event-based communication. It works on

every platform, browser or device, focusing equally on reliability and speed. Socket.IO is built on top
of the WebSockets API (Client side) and Node.js. It is one of the most depended upon library on npm
(Node Package Manager).

DATABASE:

• MongoDB - MongoDB is a document-oriented NoSQL database used for high volume data storage.
Instead of using tables and rows as in the traditional relational databases, MongoDB makes use of
collections and documents.

14 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

4.2.4 Design and Implementation Constraints: -

• Website will support the following browsers: Microsoft Edge, Chrome 27.0+, and Firefox 30+.

• The website supports English language only.

• This website version is intended to be viewed best on a desktop browser.

15 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

CHAPTER 5
METHODOLOGY / PLANNING OF WORK

Part 1: To design a layout for website.

Part 2: To build a frontend (UI) for the website using react.
Part 3: Con昀椀gure the server side by connec琀椀ng Node.js and Express.js to MongoDB on
the backend.
Part 4: Integra琀椀ng the backend with the frontend.

5.1 DATA FLOW DIAGRAM :-

0- Level DFD

16 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

Fig 5.1

1-Level DFD

17 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

Fig 5.2

2- Level DFD

Fig 5.3

CHAPTER 6

18 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

HARDWARE AND SOFTWARE PLATFORM ENVIRONMENT

HARDWARE REQUIREMENTS:
• Pen琀椀um-IV (Processor)
• 256 MB Ram
• 512 KB Cache Memory
• Hard disk 10 GB
• Microso昀琀 Compa琀椀ble 101 or more key Board

SOFTWARE REQUIREMENTS:

• Operating system : Windows XP, Windows 7/8/8.1/10

• Language : HTML, CSS, Javascript
• Database : MongoDB Atlas
• Browser : Mozilla/Opera/Chrome
• Framework : React, Socket IO

CHAPTER 7

19 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

SNAPSHOTS

LOGIN PAGE

20 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

SIGN UP PAGE

21 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

HOME PAGE

22 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

GROUP CHAT PAGE

23 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

CHAT PAGE

24 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

SEARCH USER

25 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

CHAPTER 8
CODING

26 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

27 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

28 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

29 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

30 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

31 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

32 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

33 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

34 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

35 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

36 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

37 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

38 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

39 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

40 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

41 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

42 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

43 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

44 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

45 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

46 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

47 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

48 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

49 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

50 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

51 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

52 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

53 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

54 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

55 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

56 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

57 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

58 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

59 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

60 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

61 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

62 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

63 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

64 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

65 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

66 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

67 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

CHAPTER 9
PROJECT LIMITATIONS AND FUTURE SCOPE

9.1 PROJECT LIMITATIONS

1. Addi琀椀onal cost:
Live chat so昀琀ware can be expensive and may require ongoing subscrip琀椀on fees.

2. Sta昀케ng requirements:
Sta昀케ng a live chat service can be challenging, and it may require hiring
addi琀椀onal sta昀昀 or training exis琀椀ng employees.

3. Limited availability:
Live chat is not always available, and users may be frustrated if they are unable
to reach a representa琀椀ve during certain hours or if the chat service is o昀渀ine.

4. Limited func琀椀onality:
Live chat may not be able to handle more complex or technical issues, and users
may need to be directed to other channels for assistance.

5. Privacy concerns:
Live chat interac琀椀ons are typically not private, and users may be hesitant to
share sensi琀椀ve informa琀椀on.

6. Technical issues:
There may be technical issues with the live chat so昀琀ware that can disrupt
service or cause delays in responding to users.

7. Misunderstandings:
With live chat, misinterpreta琀椀on and misunderstanding are more common due
to lack of non-verbal cues and facial expression.

68 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

8. Limited scalability:
Live chat may not be able to handle a high volume of users at once and may
slow down the website's performance.

9. Quality assurance:
Quality assurance can be more di昀케cult with live chat, as it can be harder to
monitor and evaluate chat interac琀椀ons.

9.2 FUTURE SCOPE

1. Text-to-Speech or Speech-to-text can be integrated with chat platform.

Text to speech (TTS) is a natural language modelling process that requires
changing units of text into units of speech for audio presentation. While speech
to text, where a technology takes in spoken words and tries to accurately record
them as text.

2. AI also can be integrated with the platform to auto generate messages based
on messages from other user.
AI can be used to complete incomplete sentences and also to predict what can be
answered to a received message

3. App Only approach

An app is much more convenient than a website for a user. An app gives a more
personalized experience than websites.

69 | P a g e
Downloaded by tipen motivue ([email protected])
 lOMoARcPSD|54294637

CHAPTER 10
REFERENCES

➢ https://cyfersolutions.com/all-about-the-future-scope-of-chatwebsite/
➢ https://www.techopedia.com/definition/23843/text-to-speech-tts
➢ https://www.quora.com/What-are-some-of-the-disadvantages-of-adding-a-
live-chat-to-a-website
➢ https://www.freeprojectz.com/dfd/online-chat-application-dataflow-
diagram#:~:text=Online%20Chat%20Application%20Data%20flow,of%2
0the%20Chat%20Application%20process.
➢ https://www.tutorialspoint.com/socket.io/index.htm
➢ https://scopicsoftware.com/blog/top-5-challenges-building-chat-app/

70 | P a g e
Downloaded by tipen motivue ([email protected])