Internet Architecture and Protocol

Practical Implementation of Messenger App

Submitted To: Sir Farooq Javeed

Submitted By: BSCS 5th REG (batch ’27)

Arooj Abbas (BSCS51F23R070)

Fizza Tariq (BSCS51F23S068)
Huriya Tariq (BSCS51F23R026)
Fatima Khan (BSCS51F23R036)
Mahnoor Fatima (BSCS51F23S015)
Zainab Mazhar (BSCS51F23S037)

Table of Contents
1. Introduction of the Application............................................................................................4
2. Architecture of the Application............................................................................................5
3. Pre-Communication Requirements.....................................................................................7
4. Post-Communication Requirements....................................................................................8
5. Working Principles of Messenger........................................................................................8
6. Main Features of Messenger...............................................................................................10
7. Choosing the Model.............................................................................................................12
8. Frontend Technologies........................................................................................................19
9. Messenger Backend Overview............................................................................................20
10. Backend Technologies Used in Messenger.....................................................................24
11. Protocols Used in Messenger App...................................................................................25
12. Baseline Features To Develop An Application...............................................................26
13. UI/UX Tools.......................................................................................................................33
BSCS51F23R070

Arooj Abbas

1. Introduction of the Application

 Overview
The project, titled Messenger , is a real-time chat application inspired by
Facebook Messenger, designed primarily for educational and small team
communication. It aims to demonstrate real-time bidirectional communication
using internet protocols such as WebSockets and HTTPS, offering features like
one-to-one messaging, group chats, image sharing, typing indicators, and
message receipts.

 Objective
The main objective of the Messenger Lite application is to build a scalable and
secure real-time communication system that efficiently demonstrates the
principles of Internet Architecture and Protocols.
Key goals include:

 Demonstrating WebSocket-based communication for real-time updates.

 Ensuring secure authentication using JWT and HTTPS.
 Building a clean, user-centered UI/UX design for intuitive communication.
 Implementing persistent message storage with the ability to retrieve chat
history.

 Target Users
The app primarily targets:

 Students – for project collaboration and casual group communication.

 Teachers/TAs – to broadcast updates and announcements.
 Small Teams – for quick communication and file sharing.
  Functional Requirements

 Real-Time Messaging: Instant send/receive with delivery indicators.

 Group Chats: Multiple participants in one conversation.
 Media Sharing: Image uploads with preview thumbnails.
 Typing & Presence Indicators: Real-time activity visibility.
 Notifications: Push alerts for new messages.
 Secure Login System: JWT authentication with HTTPS protection.

 Non-Functional Requirements

 Low Latency: we want our system to experience very small delay times.
 High Volume: we want our system to support a high volume of requests,
potentially millions of users writing messages at the same time.
 Reliable: Highly reliable and available all the time.
 Secure: Messages should be sent or received securely. Users shouldn’t
receive messages from random users.

2. Architecture of the Application

 Overview
The Messenger Lite architecture follows a client–server model based on modular
microservices. Each component handles a distinct responsibility — from
authentication to message storage and delivery — enabling scalability,
maintainability, and fault tolerance.

 Core Components
1. Client Application

 Platform: Web ([Link]) and Mobile (React Native).

 Function: Handles UI, sends and receives WebSocket events, maintains
session tokens, and locally caches recent messages.
 Communication Protocols: HTTPS for API calls and WSS (Secure WebSocket)
for live communication.

2. API Gateway / Load Balancer

 Tool: NGINX or AWS ALB.
 Responsibilities: Routes client requests, manages TLS termination, and
enforces basic security (rate-limiting, CORS). Authentication
Service

 Function: Handles login, registration, and JWT token generation.

 Implementation: Short-lived tokens for active sessions with secure refresh
token policies.
 Protocol: HTTPS and OAuth 2.0 (optional for later expansion).

3. Messaging Service (Core Engine)

 Function: Handles real-time events (send, deliver, read, typing).

 Tools: [Link] or native WebSocket server.
 Data Handling: Each message event is validated and published to
Redis/Kafka for delivery to the correct recipient instance.

4. Database Layer

 Relational Database (PostgreSQL): Manages user profiles, groups, and

relationships.
 Message Store (MongoDB): Stores chat messages and metadata.
 Object Storage (AWS S3/Local): Stores media like images and files.

5. Notification Service

 Function: Sends push notifications when users are offline.

 Tool: Firebase Cloud Messaging (FCM) or APNs for iOS.

6. Monitoring & Logging

 Tools: Prometheus + Grafana for metrics, ELK stack for centralized logging.
 Function: Ensures performance tracking and error monitoring.

 Data Flow (Message Delivery Process)

 The user logs in using HTTPS and receives a JWT.
 The client establishes a WebSocket connection to the Messaging Server
using that JWT.
 When the user sends a message, it is:
 o Encrypted and sent via WebSocket.
o Stored in the Message Store (MongoDB).
o Published through the Redis Pub/Sub channel.
 The receiving client’s server instance retrieves the event and pushes it
through their WebSocket connection.
 If the user is offline, the Notification Service sends a push alert.
 Upon reading, a “read receipt” is sent back to update message status.

 Scalability and Security

 Scalability: Stateless services enable horizontal scaling; Redis ensures inter-
server communication.
 Security: TLS encryption, JWT validation, and secure storage for credentials.
 Fault Tolerance: Messages are never lost; database persistence ensures
recovery.

BSCS51F23S068
Fizza Tariq

3. Pre-Communication Requirements
Before initiating communication through Messenger, top-level management should
ensure the following:

 Verification of Identity:
 Ensure that all participants are verified company representatives to maintain
confidentiality and avoid impersonation.
 Official Communication Policy:
 Establish whether Messenger is an approved platform for official
discussions, as some organizations restrict informal apps for sensitive
matters.
 Security Settings:
 Enable end-to-end encryption, two-factor authentication, and privacy
controls to protect strategic and confidential information.
 Clear Purpose of Communication:
 Define the goal of the conversation — for example, giving directives,
discussing performance, or making quick decisions.
  Professional Accounts:
 Use business or work-linked accounts rather than personal profiles to
maintain professionalism.
 Time and Availability:
 Ensure that all concerned executives are available online and aware of the
meeting schedule or discussion time.

4. Post-Communication
Requirements
After communication through Messenger, top-level management should:

 Record and Document Key Points:

Summarize or record the essential decisions made during the chat for future
reference and accountability.

 Follow-Up Actions:
Assign responsibilities or tasks discussed during the conversation to concerned
departments or personnel.

 Maintain Confidentiality:
Ensure that no screenshots or chat content are shared outside the authorized circle .

 Data Backup (if needed):

Save important discussions or transfer them to official records or secure servers for
compliance and transparency.

 Evaluate Effectiveness:
Review whether Messenger was an efficient platform for the purpose, and adjust
policies if communication issues arose.

5. Working Principles of Messenger

Messenger’s functioning relies on a combination of network protocols, encryption
technologies, and cloud-based data management systems that ensure seamless and
secure communication between users.
  Client–Server Architecture
Messenger operates on a client–server model:
 The client (user’s app or web interface) sends messages, media, or
commands.
 The server (Meta’s data centers) processes, stores, and routes messages to
intended recipients.
 Data is transmitted through secure HTTPS (TLS/SSL) connections to
maintain integrity and privacy.
 Data Transmission and Synchronization
 Messages are transmitted using internet protocols (primarily TCP/IP).
 Meta’s edge servers handle initial message routing and synchronization.
 Each message is time-stamped and queued until the recipient device
confirms delivery.
The system ensures multi-device synchronization, meaning messages remain
consistent across mobile, web, and desktop platforms.

 Real-Time Communication Protocols

 Messenger uses MQTT (Message Queuing Telemetry Transport) — a
lightweight messaging protocol optimized for mobile networks.
 MQTT maintains a persistent socket connection between client and server.
 It allows instant delivery notifications, presence updates (online/offline
status), and low-latency performance.
This makes communication appear “instant,” even under variable network
conditions.

 End-to-End Encryption (E2EE)

 For Secret Conversations or encrypted chats, Messenger employs the Signal
Protocol.
 Each message is encrypted on the sender’s device and decrypted only on the
receiver’s device.
 Encryption keys are device-specific and never stored on Meta’s servers.
This ensures data confidentiality, integrity, and non-repudiation.

 Cloud-Based Data Management

Messenger uses Meta’s distributed cloud infrastructure:
  Chat histories, media, and backups are stored redundantly across data
centers worldwide.
 Machine learning algorithms manage message routing, spam detection, and
content moderation.
 Data replication ensures high availability and disaster recovery .
 AI and Machine Learning Integration
Messenger integrates AI systems for:
 Smart replies and chatbots for businesses.
 Spam detection and harmful content filtering.
 User behavior analysis to enhance performance, personalization, and
recommendation systems.
 API and Interoperability
Messenger’s platform supports Graph API and Messenger Platform APIs:
 Enables integration with third-party services, chatbots, and CRM systems.
 Supports business automation, such as order tracking or customer support
via Messenger.
 Security and Privacy Framework
 Transport Layer Security (TLS) for all connections.
 User authentication through Meta accounts and device verification.
 Data minimization and access control to comply with global privacy
standards (e.g., GDPR).
 Regular encryption key rotation to reduce risk of interception.

6. Main Features of Messenger

Messenger’s features integrate network communication protocols, artificial
intelligence, encryption, and data management systems to provide seamless and
secure user experiences.

 Instant Messaging and Multimedia Sharing

 Real-time text messaging through low-latency communication protocols
such as MQTT (Message Queuing Telemetry Transport).
 Support for emojis, GIFs, stickers, and multimedia files (images, videos,
documents).
 Uses cloud synchronization, allowing users to access messages across
multiple devices.
 Voice and Video Communication
 Offers high-quality voice and video calls, including group conferencing.
 Utilizes WebRTC (Web Real-Time Communication) protocols for peer-to-
peer streaming.
 Adaptive bitrate algorithms adjust audio/video quality according to network
conditions.
 End-to-End Encryption (E2EE)
 Messenger provides Secret Conversations protected by the Signal Protocol.
 Encryption ensures that messages are readable only by the sender and
recipient.
 Protects data confidentiality against interception and unauthorized access.
 Cross-Platform Integration
 Works seamlessly on Android, iOS, and web interfaces.
 Integrates with Facebook, Instagram, and Meta’s ecosystem, allowing users
to message across platforms.
 Enables multi-device login with synchronized conversations.
 Artificial Intelligence (AI) and Automation
 Chatbots and automated responses for businesses and customer service.
 AI-driven smart replies and message filtering (spam and harmful content
detection).
 Integration of natural language processing (NLP) to enhance user interaction
and predict responses.
 Business and Commerce Features
 Provides tools for customer engagement, including Messenger for Business
and Meta Business Suite.
 Supports payment systems for transactions via Messenger Pay (in supported
regions).
 Enables order tracking, product browsing, and automated support via
business chatbots.
 Data Synchronization and Cloud Storage
 Uses Meta’s global data centers for real-time message synchronization and
backup.
 Employs distributed storage architecture to ensure high availability and
minimal latency.
 Provides message recovery and search functionality using indexed storage.
 Privacy and Security Controls
 Offers two-factor authentication (2FA) and login alerts.
 Allows custom privacy settings, including message requests and blocking
options.
  Complies with data protection regulations (e.g., GDPR) to safeguard user
information.
 Group Communication and Collaboration
 Supports group chats, polls, and shared media for collaborative interactions.
 Admin controls allow management of group membership and message
approval.
 Integration with productivity tools enhances group coordination.
 API and Developer Support
 Messenger provides Graph API and Messenger Platform API for developers.
 Enables integration with third-party applications, CRMs, and AI systems.
 Encourages research and development in conversational AI and
communication technologies.

BSCS51F23R026

Huriya Tariq

7. Choosing the Model

Layer 7: Application Layer

Role: Message Protocol & Business Logic

Form of Data: JSON (JavaScript Object Notation), Protobuf (Protocol Buffers),

GraphQL queries

Processing:-

 Serializes/deserializes chat messages, delivery receipts, typing indicators

 Executes business logic for thread routing and push notifications
 Manages API endpoints for user profiles and groups
Client Role: Renders UI, captures user input, packages actions into protocol
messages.

Server Role: Processes business logic, enforces policies, persists data, manages
fan-out.
Why Client-Server Model: The server must be the single source of truth for
message ordering, group membership, and delivery status across all user devices.
P2P cannot reliably manage state for billions of users.

Layer 6: Presentation Layer

Role: Data Representation & Encryption

Form of Data: TLS (Transport Layer Security) encrypted payloads, compressed

media streams

Processing:-

 Performs TLS/SSL (Secure Sockets Layer) handshake and session

encryption
 Compresses text payloads using gzip and media using Opus/VP9 codecs
 Translates between JSON and Protobuf formats for different channels
Client Role: Encodes/compresses media before upload, decrypts received
messages.

Server Role: Terminates TLS connections, transcodes media formats, standardizes

data for internal services.

Why Client-Server Model: Centralized transcoding (e.g., creating multiple image

thumbnails) is vastly more efficient than having each client device perform these
resource-intensive tasks.

Layer 5: Session Layer

Role: Connection Management

Form of Data: WebSocket frames, SIP (Session Initiation Protocol) session tokens

Processing:-

 Maintains persistent WebSocket connections for real-time messaging

 Manages session failover between edge servers
  Handles call session establishment and teardown
Client Role: Initiates and maintains persistent connection to server, manages local
session state.

Server Role: Manages millions of concurrent connections, acts as message router

and presence tracker.

Why Client-Server Model: The server must know exactly which gateway
instance each user is connected to for efficient message delivery and real-time
presence updates.

- Connection Timeout: Automatically expires idle connections

Layer 4: Transport Layer

Role: End-to-End Reliability

Form of Data: TCP (Transmission Control Protocol) segments, UDP (User

Datagram Protocol) datagrams

Processing:-

 TCP ensures reliable, ordered delivery of all chat messages

 UDP provides low-latency transport for voice/video streams
 QUIC (Quick UDP Internet Connections) reduces mobile connection latency
Client Role: Initiates TCP connections/UDP streams, implements client-side
congestion control.

Server Role: Listens on well-known ports, manages server-side socket

connections and congestion control.

Why Hybrid Model: TCP guarantees message delivery for chat while UDP
minimizes latency for real-time media. The server coordinates which protocol to
use for each data type.

Layer 3: Network Layer

Role: Global Routing

Form of Data: IP (Internet Protocol) packets with QoS (Quality of Service)

markings

Processing:-
 Routes messages through Meta's backbone between edge POPs (Points of
Presence)
 Performs NAT (Network Address Translation) traversal for P2P media
 Implements Anycast routing for DDoS resilience
Client Role: Source of IP packets, uses local routing tables to reach Meta's
network.

Server Role: Destination of IP packets, participates in global BGP routing and

traffic engineering.

Why Client-Server Model: Meta's global network infrastructure with Anycast

and edge POPs provides better performance and reliability than unpredictable P2P
internet routes.

Layer 2: Data Link Layer

Role: Local Network Delivery

Form of Data: Ethernet frames, PPP (Point-to-Point Protocol) frames

Processing:-
 Error detection via CRC (Cyclic Redundancy Check)
 MAC (Media Access Control) address resolution for local network hops
 Manages radio resource allocation in cellular networks
Client Role: End-point that generates/consumes all frames for its local network
interface.

Server Role: Other end-point in the data center with high-speed network
interfaces.
Why Client-Server Model: The physical and data link layers are agnostic to the
higher-layer architecture—they simply deliver frames between two points as
dictated by the IP layer.

Layer 1: Physical Layer

Role: Bit Transmission

Form of Data: Electrical/Optical/RF (Radio Frequency) signals

Processing:-

 Modulates/demodulates signals over fiber, copper, or air interface

 Physical error correction in 5G NR (New Radio) and Wi-Fi 6
 Signal amplification and transmission
Client Role: Uses device hardware (NIC, cellular radio) to transmit/receive
signals.

Server Role: Uses data center networking hardware to handle massive signal
throughput.

Why Client-Server Model: The physical layer is infrastructure-agnostic and

serves both models equally—the choice of Client-Server is made at higher layers.

Working of Client /Server Architecture in chatting on Messenger

Example: You send “Hello” to your friend

 Client (Your Phone)

You type “Hello” in Messenger.

App (built with React + JavaScript) structures it as a JSON object.

It’s encrypted with TLS (Transport Layer Security) and sent via a WebSocket
connection over TCP/IP.

Session Token and user ID verify your identity.

  Server (Facebook Data Center)
The message reaches the nearest Point of Presence (POP) through IP routing.

Server decrypts and authenticates the data.

Message is stored in Cassandra database and assigned a unique message ID for

order tracking.

Server checks if your friend is online or offline.

 Delivery
If online → message is instantly pushed to your friend’s app via their own
WebSocket connection

 Friend’s Device
Friend’s Messenger decrypts and deserializes the message (Protobuf → text).

UI updates instantly to show your “Hello.”

 Acknowledgment
When your friend reads it, the app sends a “Seen” receipt back through the same
encrypted path.

Your app updates the status from “Sent” → “Delivered” → “Seen.”

Advantages of Client/Server Model

 Provides centralized control of chats and user data.
 Ensures data consistency and synchronization across devices.
 Offers high security through encryption and authentication.
 Allows easy maintenance, updates, and data backups.
 Enables reliable message delivery even when users are offline.

Disadvantages of Client/Server Model

  Depends heavily on central servers — if they fail, service stops.
 Requires high infrastructure and maintenance costs.
 Can face network congestion with heavy traffic.
 May suffer from single points of failure or server attacks.
 Raises privacy concerns since all data passes through Facebook’s servers.

Client/Server Model Vs Peer-to-Peer (P2P) Model:

 Client–Server Model
 It is a centralized network model.
 The server provides services or resources.
 The client requests data or services from the server.
 Data is stored and controlled on a central server.
 Server failure can stop the entire system.
 Security is easier to manage (central control).
 Performance may decrease if many clients connect at once.
 Setup and maintenance cost is high (requires dedicated server).
 Examples: Websites, email systems, online banking, cloud apps.
 Peer-to-Peer (P2P) Model
 It is a decentralized network model.
 Each peer acts as both a client and a server.
 Data is shared directly between peers, without a central server.
 No single point of failure — network continues if one peer goes offline.
 Security is harder to ensure (each peer manages itself).
 Performance often improves as more peers join (resource sharing).
 Low cost — no need for a dedicated server.
 Maintenance is distributed and complex.
 Examples: BitTorrent, blockchain, early Skype, file sharing networks.
 Client-server Network VS Peer-to-peer Network

[Link] Technologies
 [Link] – Core UI Framework
Role: Builds Messenger’s entire user interface — chat windows, message bubbles,
sidebar, input box, etc.

How it works: Uses a component-based architecture. Each chat bubble, typing

bar, emoji picker, etc., is a React component that re-renders only when its data
changes.

 Virtual DOM (inside React)

Role: Optimizes rendering speed.

How it works: React first updates a “virtual” copy of the page in memory,
compares it with the real DOM, and changes only what’s different.
 WebSocket / MQTT – Real-Time Transport
Role: Provides an always-on, bidirectional channel between browser/app and
Messenger servers.

How it works: When you send a message, the frontend sends JSON data through
WebSocket or MQTT; when your friend replies, the server pushes new message
data back instantly.

 Web Crypto API

Role: Provides client-side cryptography for secure chats (“Secret Conversations”).

How it works: Generates encryption keys locally; messages are encrypted before
leaving the client.

 CSS-in-JS / Styled Components

Role: Defines the Messenger theme — blue bubbles, shadows, dark mode,
animations.

How it works: CSS styles are embedded inside React components and change
dynamically based on state (e.g., sender = blue, receiver = gray).

 HTTP/2 + HTTPS
Role: Handles the initial app load (HTML, JS bundles, images) and uploads
(attachments, profile photos).

How it works: Browser securely requests static assets from Messenger’s CDN
using encrypted HTTPS connections.

BSCS51F23R036

Fatima Khan
 9. Messenger Backend Overview
Messenger’s backend is responsible for handling:

 Sending and receiving messages in real-time.

 Storing messages and user data.
 Delivering notifications.
 Managing media (images, videos, audio).
 Ensuring scalability and reliability.

Core Backend Components

 Application Servers
Function: Handle client requests, manage business logic, and route messages.

 Request Handling: Accepts messages, API calls, media uploads, and user
presence updates.
 Message Routing: Determines which server cluster or user device should
receive a message.
 Load Distribution: Uses horizontal scaling to run multiple instances across
server clusters.
 Session Management: Maintains user sessions for authentication and
authorization using tokens or session IDs.
 State Management: Tracks user presence (online/offline/idle) and active
conversations.
 Fault Tolerance: Supports failover, so if one server crashes, requests are
automatically redirected to another server.

Example Technologies: Hack (HHVM), Erlang, Java, PHP, [Link].2. Databases

 Databases
Function: Store persistent data for users, messages, and media.

 Relational Databases (SQL):

 Store structured user data like account info, friend lists, and groups.
  Support ACID transactions for critical operations like login and friend
requests.

 NoSQL Databases:
 Store chat logs, messages, and media metadata.
 Optimized for high write throughput and low-latency read access.
 Examples: Cassandra for distributed storage, RocksDB for fast local
reads.
 Partitioning/Sharding: Distributes data across multiple servers to scale
horizontally.
 Replication: Multiple copies of data for high availability and disaster
recovery.
 Consistency Models: Eventual consistency for messages, strong consistency
for user account data.

 Caching Systems
Function: Reduce latency and database load for frequently accessed data..

 Applications:
 Stores recent messages for active conversations.
 Maintains user presence information for fast updates.
 Reduces the number of database queries, improving performance for
large-scale traffic.
 Expiration Policies: Automatically remove stale data to optimize memory
usage.
 Distributed Caching: Supports multi-node cache clusters for scalability.

 Media Servers
Function: Handle storage, processing, and delivery of images, videos, GIFs, and
voice messages.

 Storage Management: Uses distributed storage systems to store large

media files.
 Encoding & Compression: Reduces file size while maintaining quality to
save bandwidth.
  Delivery Optimization: Integrates with CDNs for fast content delivery
globally.
 Access Control: Restricts media access to authorized users only.
 Redundancy: Media files are replicated across multiple servers for
reliability.

 Notification Services
Function: Deliver alerts to users for messages, calls, or status updates.

 Integration: Works with MQTT and application servers for push

notifications.
 Offline Support: Stores notifications for users who are not currently
connected.
 Custom Payloads: Allows message previews or status information in
notifications.

 Load Balancers
Function: Distribute traffic efficiently across server clusters..

 Traffic Distribution: Uses round-robin, least connections, or IP hash

strategies.
 High Availability: Prevents single points of failure.
 Health Checks: Automatically redirects traffic if a server node fails.

 Content Delivery Networks (CDNs)

Function: Deliver static content like images, videos, and GIFs efficiently.

 Technologies: Akamai, Cloudflare, Facebook’s internal CDN.

 Geographical Optimization: Content served from servers closest to the
user to reduce latency.
 Caching: CDN caches static files to reduce backend load.
 Load Distribution: Balances requests across edge servers for scalability.

 Data Replication and Backup Systems

Function: Ensure fault tolerance, high availability, and disaster recovery.
  Database Replication: Multiple copies of messages and user data stored
across servers.
 Multi-Region Replication: Data replicated in different data centers for
global availability.
 Backup Schedules: Periodic backups for critical user and media data.
 Failover Support: Automatic switch to backup servers if the primary server
fails.

 Encryption and Security Technologies

Function: Protect user data and messages from unauthorized access.

 End-to-End Encryption: Only sender and recipient can decrypt messages.

 Transport Layer Security (TLS/HTTPS): Secures communication between
client and server.
 Access Control: Authentication and authorization ensure only valid users
access data.
 Data Integrity: Cryptographic checks prevent tampering of messages

10. Backend Technologies Used in Messenger

 Backend Language / Runtime:
o [Link] / Python / Java — used for building server-side logic and
handling concurrent connections.
 Web Framework:
o [Link] / Django / Spring Boot — provides routing, request
handling, and API endpoints for messenger features.
 Real-Time Communication Technology:
o WebSockets — enables persistent full-duplex communication
between client and server for instant message delivery.
 Database:
o NoSQL (MongoDB / Cassandra) — stores messages, chat history,
users, and conversation metadata with high write performance.
o SQL (PostgreSQL / MySQL) — optional for structured user/account
data.
 Caching System:
 o Redis — used to speed up message fetch operations, active user
sessions, and real-time data.
 Message Broker / Queue:
o Kafka / RabbitMQ — ensures reliable message delivery, load
distribution, and scalable real-time communication.
 Authentication & Authorization:
o JWT / OAuth 2.0 — verifies user identity for secure messaging
communication.
 Reverse Proxy / Web Server:
o Nginx — handles load balancing, reverse proxying, and improves
performance of backend services.
 Cloud & Storage:
o AWS / Google Cloud / Azure — stores user media (images, voice
notes, videos) and runs backend services using cloud infrastructure

11. Protocols Used in Messenger App

 XMPP (Extensible Messaging and Presence Protocol)
 Real-time instant messaging and presence tracking.
 Handles message delivery, read receipts, typing indicators, and user
status.
 MQTT (Message Queuing Telemetry Transport)
 Lightweight protocol optimized for mobile and low-bandwidth
networks.
 Handles message delivery, status updates, and push notifications.
 Supports publish/subscribe model.
 HTTP/HTTPS
 Standard client-server protocol for API calls.
 Used for fetching message history, uploading media, updating profiles,
and secure data transfer.
 WebSockets
 Maintains persistent, full-duplex connections between client and server.
 Enables real-time message delivery, typing indicators, and instant
updates.
 TLS/SSL (Transport Layer Security / Secure Sockets Layer)
  Ensures encrypted, secure communication between client and server.
 Protects messages and user data from eavesdropping.
 TCP/IP (Transmission Control Protocol / Internet Protocol)
 Underlying protocol for reliable, ordered delivery of data packets across
the network.
 Forms the basis for HTTP, WebSockets, MQTT, and XMPP
communications.
 UDP (User Datagram Protocol) (less common for Messenger)
 Sometimes used for real-time media streams like voice or video calls
due to low latency.
 SIP (Session Initiation Protocol) (for voice/video calls)
 Used to establish, manage, and terminate voice/video sessions between
clients.
 RTP/RTCP (Real-time Transport Protocol / Real-time Transport Control
Protocol)
 Transports audio and video streams during calls.
 Ensures timing, synchronization, and minimal latency in media delivery.

BSCS51F23S015
Mahnoor Fatima

[Link] Features To Develop An

Application
1. User Authentication
Purpose: To identify and secure each user’s access to the app.

It’s the first step in any messenger app — ensures only verified users can log in
and interact.

 Key components:
 Registration:
 Users sign up using their phone number, email, or social login (Google,
Facebook, Apple).

Phone number sign-up (like WhatsApp) is popular because it links directly to

contacts.

 Verification:
Verify user identity with OTP (One-Time Password) or an email link. Prevents
fake accounts.

 Login System:
Allows users to securely access their account after registration.

 Forgot Password:
Users can reset passwords via email/OTP.

 Session Management:
Handle user sessions securely using tokens (JWT or OAuth).

Example: When a user signs up with a phone number, they receive an OTP →
enter OTP → verified → logged in.

2. User Profile
 Purpose:
Gives each user a digital identity and helps personalize the chat experience

 Key components:
 Basic Info:
Name, username (optional), profile photo, status/bio message.

 Presence Indicators:
Show online/offline status or “last seen at [time].”

 Profile Editing:
 Allow users to update profile details anytime.

 Privacy Control:
Options to hide “last seen,” profile photo, or status from specific users.

Example: Like WhatsApp’s “About” or Telegram’s bio — helps others recognize

you.

3. Contact Management
 Purpose:
To help users find friends easily and control who can interact with them.

 Key components:
 Contact Sync:
The app scans the phone’s contact list and checks which contacts also use the app.

 Add/Remove Contacts:
Option to manually add a user by username, QR code, or phone number.

 Block/Unblock Users:
Restrict communication from unwanted people.

 Search Contacts: A search bar to quickly find people to chat with.

Example: WhatsApp auto-detects who among your phone contacts uses the app.

4. Real-Time Messaging
 Purpose:
The heart of the messenger — allows instant exchange of text messages.

 Key components:
 Instant Delivery:
 Implemented via WebSocket, Firebase Realtime Database, or MQTT protocol to
ensure real-time data flow.

 Message Status:
Indicators like “Sent,” “Delivered,” “Read” (✓, ✓✓, ✓✓ blue in WhatsApp).

 Typing Indicator:
Shows when someone is typing to make chat feel live and responsive.

 Timestamps:
Every message shows when it was sent or received.

 Message History:
Store chat history locally and on the cloud for sync across devices.

 Message Reactions & Replies (optional baseline):

Add quick emoji reactions and threaded replies for clarity.

Example: Telegram uses MTProto protocol for real-time encrypted delivery.

5. Group Chat
 Purpose:
Allows communication among multiple users within one shared conversation.

 Key components:
 Group Creation:
Users can create groups, give them names, and add participants.

 Admin Controls:
Admins can add/remove members, change group info, and manage permissions.

 Group Notifications:
 Notify members when someone joins, leaves, or changes the group name/photo.

 Mention System:
Allow users to mention someone in chat (@username).

 Group Message Status:

Track who has seen messages (optional but useful).

Example: WhatsApp allows up to 1024 members in a group; admins can restrict

who can post messages.

6. Media & File Sharing

 Purpose:
Enables richer communication beyond text.

 Key components:
 Image/Video Sharing:
Compress and send media with preview thumbnails.

 Audio Messages:
Record and send voice notes directly.

 File Attachments:
Share documents (PDF, Word, Excel, etc.).

 Media Preview:
Users can preview photos or videos before sending.

 Download/View Options:
Let users view media within the chat or download it to their device.

 Storage Management:
 Option to delete media to save space.

Example: WhatsApp compresses images automatically and allows documents up

to 2GB.

7. Notifications
 Purpose:
Keeps users engaged and informed about new messages or activity.

 Key components:
 Push Notifications:
Alerts even when app is closed (using Firebase Cloud Messaging or APNs).

 In-App Notifications:
Show new message indicators when user is inside the app.

 Custom Settings:
Users can mute chats or turn off notifications for specific contacts/groups.

 Badge Counters:
App icon shows number of unread messages.

Example: WhatsApp badges unread chats; Telegram allows custom notification

sounds per chat.

8. Privacy & Security

 Purpose:
Protects user data, communication, and personal information.

 Key components:
 End-to-End Encryption (E2EE):
Messages are encrypted so only sender and receiver can read them.
  Two-Step Verification:
Adds an extra layer of security.

 Block & Report Users:

Protects from spam or abuse.

 Privacy Settings:
Control who can see your last seen, profile photo, and status.

 Secure Data Storage:

Encrypt local databases (SQLite) and secure cloud backups.

Example: Signal and WhatsApp both use the Signal encryption protocol for E2EE.

9. Backend Infrastructure
 Purpose:
The backbone that supports all chat operations reliably.

 Key components:
 Real-Time Server:
Handles instant communication (using WebSocket, [Link], or Firebase).

 Database:

Stores users, messages, media links (MongoDB, PostgreSQL, Firebase Firestore).

 Cloud Storage:
For storing and retrieving media files (AWS S3, Google Cloud Storage).

 APIs:
Handle user management, message sync, and media upload/download.

 Load Balancing & Scalability:

 Ensure performance as the user base grows.

 Backup & Recovery:

Automatic backups for messages and media.

Example: WhatsApp uses Erlang-based servers for massive concurrency; Firebase

is a simpler option for small-scale apps.

10. User Interface (UI/UX)

(Often overlooked but still part of baseline MVP)

Purpose: Makes the app simple, intuitive, and fast to use.

 Clean chat layout (like bubble-style messages)

 Chat list with unread message indicators
 Search bar for chats and messages
 Light/dark themes (optional early on)

Example: Minimal and responsive layout like Telegram for better usability.

BSCS51F23R037

Zainab Mazhar

13. UI/UX Tools

 Overview
The UI/UX design ensures simplicity, clarity, and consistency for an intuitive
messaging experience. The visual design uses olive and cream color tones,
offering a calm, professional aesthetic suitable for both light and dark
environments.

 Tools Used

Purpose Tool Description

 Used to create
low-fidelity and
Wireframing Figma
high-fidelity
prototypes.
To define
Adobe XD /
typography,
Design System Figma Tokens
colors, and
Plugin
spacing.
Clean and scalable
Lucide / Feather
Icons vector icons for
Icons
chat actions.
Brainstorming and
Collaboration FigJam user journey
mapping.

 Design System (Olive Theme)

 Primary Color: Deep Olive #556B2F
 Accent Color: Light Olive #B5BFA1
 Background: Off-white #F8F8F3
 Text Color: Charcoal #333333
 Highlight: Soft Beige #E8E6DA

 UI Components
1. Login Page

 Minimal login form with rounded input fields.

 “Sign In” button in deep olive tone.
 Background: light olive with subtle shadow.

2. Main Chat Dashboard

 Left sidebar: Chat list and search bar.

 Center area: Active conversation.
 Right sidebar: User info and group details.

3. Header

 Contains app name, profile icon, and settings.

 Fixed for consistent navigation.

4. Chat Interface

 Incoming messages: left-aligned.

 Outgoing messages: right-aligned.
 Typing indicators and unread badges for feedback.

5. Footer

 Input area for typing messages.

 Attachment and send buttons (icon-based).

 UX Considerations
 Micro-interactions: Smooth animations for message delivery.
 Responsiveness: Fully adaptive to web and mobile screens.
 Accessibility: High contrast and large touch targets.
 Testing: Conduct quick usability testing with peers for flow validation.