This document describes a real-time chat application project created by students Tirth Shah and Om Pawar. It discusses what real-time web applications are, provides an overview of the project's scope and technology stack, describes use cases and architectural components, addresses challenges, and outlines the data flow and activity diagrams. Data dictionaries are also included to define the application's user signup and chat data.

1. SHREE SWAMINARAYA POLYTECHNIC
Project Title – Real Time Chat Application
Mentor – Tejaswini Ramaiya
Created by – Tirth Shah (219860307076)
Om Pawar (219860307078)

2. Topics
1. What is a Real Time Web Application ?
2.Scope Of Project
3.Technology Stack
4.Use Case
5.Architecture
6.Challenges
7.Advantages
8.Data Flow Diagram (DFD)
9.Activity Diagram
10. Analysis
11. Data dictionary

3. What is Real Time Web Applications?
•A real-time web application is a type of web application that provides instantaneous,
live, and interactive experiences to users by delivering data updates and changes without
the need for manual page reloads.
•Real-time applications are increasingly popular due to their ability to offer dynamic
content and immediate responses, enhancing user engagement and productivity. Below,
I'll delve into the details of real-time web applications.

4. 1.Instant Messaging: The primary purpose of a real-time chat application is to enable
users to send and receive text messages instantly. Users can engage in one-on-one
conversations or group chats, fostering real-time communication.
2.User Presence: Real-time chat apps often indicate the online/offline status of users,
letting people know when their contacts are available for communication.
3.Multimedia Sharing: Users can share various types of media such as images, videos,
audio clips, documents, and links within the chat interface.
Scope Of Project

5. Technology Stack
• Real-time web applications are typically built using a combination of technologies
and protocols, including:
• Web Sockets: A bidirectional communication protocol that enables real-time data
transfer between a client (browser) and a server. It establishes a persistent
connection, allowing both parties to send and receive data instantly.
• Server-Sent Events (SSE): An HTTP-based protocol that allows servers to push
data to clients over a single HTTP connection. SSE is suitable for applications
where data needs to be streamed from the server to the client continuously.

6. Use Case
• Real-time web applications are used in various scenarios, including:
• Instant messaging and chat applications: Users can send and receive messages in real-
time, making conversations more interactive and engaging.
• Collaborative tools and productivity apps: Real-time updates allow multiple users to
work together simultaneously on shared documents or projects.

8. Architecture
• The architecture of real-time web applications typically involves a combination of
frontend and backend components:
• Frontend: The client-side code (usually written in JavaScript) is responsible for
interacting with the server and rendering real-time data updates. It establishes and
maintains the WebSocket connection or subscribes to SSE channels to receive data.
• Backend: The server-side handles client connections and manages data updates. It
communicates with various data sources and sends real-time updates to connected
clients using WebSocket or SSE protocols.

9. Architecture of Real Time Web Application

10. Challenges
•Real-time web applications come with some unique challenges, including:
•Scalability: Handling a large number of concurrent connections can strain server
resources. Horizontal scaling and load balancing techniques are often used to address
this.
•Latency: Reducing the latency of data updates is crucial to providing a smooth real-time
experience. Optimizing server response times and minimizing data payloads can help
mitigate this issue.
•Security: With real-time communication, security becomes critical. Implementing
authentication, authorization, and encryption mechanisms is essential to prevent
unauthorized access and data breaches.

11. Advantages
• Immediate Updates.
•Enhanced User Experience.
• Faster Decision Making.
• Collaboration and Communication.
•Reduced Server Load.
• Real-Time Notifications.
• Automated Data Updates.
• Predictive Analytics.
•IoT and Sensor Integration.

12. Data Flow Diagram
Level 0 DFD:
At the highest level, the DFD shows the main processes and external entities without
diving into the details.
•External Entities:
• Users
•Processes:
• Web Application
•Data Flows:
• User Requests/Interactions
• Real-time Data Updates
• User Notifications

13. Level 1 DFD:
Here, we'll break down the "Web Application" process into more detailed
subprocesses.
•External Entities:
• Users
•Processes:
• Web Application
• User Authentication
• Real-time Data Processing
• Database Management
• User Interface Management

14. •Data Stores:
• User Data (User Profiles, Preferences)
• Real-time Data Store (Live Updates, Sensor Data)
• Application Data (Configuration, Reference Data)
• Session Data
•Data Flows:
• User Input
• Authentication Tokens
• Real-time Data Flow
• Data Updates
• Notifications

15. Level 2 DFD:
In this level, we'll further detail some of the subprocesses.
•External Entities:
• Users
•Processes:
• Web Application
• User Authentication
• Verify User Credentials
• Generate Authentication Tokens

16. •Real-time Data Processing
• Analyze Real-time Data
• Generate Real-time Insights
•Database Management
• Store User Profiles
• Store Real-time Data
•User Interface Management
• Display Real-time Updates
• Display Notifications

17. •Data Stores:
•User Data (User Profiles, Preferences)
•Real-time Data Store (Live Updates, Sensor Data)
•Application Data (Configuration, Reference Data)
•Session Data
•Data Flows:
•User Input
•Authentication Tokens
•Real-time Data Flow
•Data Updates
•Notifications

18. Data Flow Diagram

19. Activity Diagram
oUser Interaction:
User starts by accessing the web application's homepage.
User can choose to log in or sign up.
User Authentication:
If the user chooses to log in, the system prompts for credentials.
System validates the credentials and generates an authentication token.
.

20. Main Application Flow:
•Once authenticated, the user enters the main application flow.
•User interacts with various features, such as real-time updates, notifications, and setting.

21. Activity Diagram

22. Analysis
Purpose and Goals:
Define the purpose of the real-time web application and its primary goals. Identify what
problem the application aims to solve and the value it will provide to users.
User Requirements:
Gather and analyze user requirements to understand the features and functionalities
expected from the application. This could involve creating user stories, use cases, and
personas.

23. Scalability and Performance:
Assess the expected user load and traffic patterns. Define how the application will
handle scalability and ensure optimal performance under varying loads. Consider
technologies like WebSockets, serverless architectures, and content delivery networks
(CDNs).
Data Management:
Determine the types of data the application will handle in real time. Analyze how data
will be collected, processed, stored, and distributed among users. Consider databases,
caching mechanisms, and data synchronization techniques.

24. Data Dictionary
• A data dictionary is a file or a set of files that includes a database's metadata.
• The data dictionary holds records about other objects in the database, such as
data ownership, data relationships to other objects, and other data.
• The data dictionary is an essential component of any relational database.
• Ironically, because of its importance, it is invisible to most database users.
• Typically, only database administrators interact with the data dictionary.

25. Data Directory for Signup

26. Data Directory of Users Chat

31. THANK YOU