Client-Server Architecture & Web Protocols: How the Internet Delivers Pages
Client-Server Architecture & Web Protocols: How the Internet Delivers Pages
1. Introduction
In our previous guides, we explored transmission media, network devices like routers and switches, and frontend web development with HTML and CSS. We know that data travels over copper or optical fibers as binary packets, and that browsers render web pages using structured markup.
But what actually happens during the brief two-second pause between typing a web address into your browser and the school notice board appearing on your screen?
Behind every search query, online test portal, and blog visit lies the Client-Server Architecture.
This distributed computing model divides tasks between service requesters (Clients) and service providers (Servers). Governing this exchange is a standardized suite of rules called Application Layer Protocols—primarily HTTP/HTTPS, DNS, and DHCP. Understanding how clients and servers communicate is the master key to demystifying the modern internet.
2. Visual Sketchnote: The Client-Server Handshake & Request-Response Cycle
╔══════════════════════════════════════════════════════════════════════════════╗
║ CLIENT-SERVER & WEB PROTOCOLS SKETCHNOTE ║
╚══════════════════════════════════════════════════════════════════════════════╝
[ STEP 1: RESOLVING THE NAME (DNS) ]
Student Browser ────────► "What is the IP of schoollab.org?" ──► [ DNS SERVER ]
(Client) ◄──────── "The IP is 192.0.2.45" ◄── (Internet Phonebook)
│
─────────┼──────────────────────────────────────────────────────────────────────
▼
[ STEP 2: THE 3-WAY TCP HANDSHAKE ]
Client ────────► SYN (Let's connect!) ──► [ WEB SERVER ]
◄──────── SYN-ACK (Acknowledged, ready!) ◄── (Apache/Nginx)
────────► ACK (Connection Established) ──►
│
─────────┼──────────────────────────────────────────────────────────────────────
▼
[ STEP 3: HTTP/HTTPS REQUEST & RESPONSE ]
Client ────────► GET /notice.html HTTP/1.1 ──► Web Server
◄──────── HTTP/1.1 200 OK (HTML/CSS payload) ◄──
│
─────────┼──────────────────────────────────────────────────────────────────────
▼
[ STEP 4: RENDERING ]
Browser parses HTML, requests linked CSS/images, renders visual page.
════════════════════════════════════════════════════════════════════════════════
3. What is Client-Server Architecture?
The Client-Server Model is a distributed application structure that partitions tasks or workloads between providers of a resource or service (servers) and service requesters (clients).
1. The Client (Service Requester)
* A computing device or software application that requests data, services, or files from a remote host.
* Examples: Web browsers (Chrome, Firefox, Edge), mobile school apps, email clients (Thunderbird, Outlook), and terminal SSH sessions.
* Characteristics: Runs on end-user hardware, initiates requests, and relies on user-friendly graphical interfaces.
2. The Server (Service Provider)
* A high-performance computer or software daemon that continuously listens for incoming requests over a network, processes them, and returns the requested resources.
* Examples:
* Web Servers: Host websites and serve HTML/CSS/JS (e.g., Apache HTTP Server, Nginx).
* Database Servers: Store tabular data and respond to SQL queries (e.g., MySQL, PostgreSQL).
* File Servers: Provide centralized network file storage (e.g., FTP/SFTP, Samba).
* Mail Servers: Manage incoming and outgoing emails (e.g., Postfix, Microsoft Exchange).
* Characteristics: High availability (operates 24/7/365), static IP addressing, large memory pools, and multi-user concurrency.
4. Key Application Layer Protocols Explained
For a client and server to communicate, they must speak the same dialect. These dialects are called Protocols:
1. DNS (Domain Name System) – The Internet's Phonebook
* Port: 53 (UDP/TCP)
* Function: Humans remember names (wikipedia.org), but routers only understand numerical IP addresses (198.35.26.96).
* When a student enters a domain name, the OS queries a DNS Resolver. The resolver returns the corresponding IP address so the client knows exactly where to direct the connection.
2. HTTP & HTTPS (Hypertext Transfer Protocol / Secure)
* Ports: 80 (HTTP), 443 (HTTPS)
* Function: The protocol used by the World Wide Web to transfer hypertext documents and multimedia.
* Request Methods:
* GET: Requests data from a specified resource (e.g., fetching a webpage).
* POST: Submits data to be processed to a specified resource (e.g., submitting exam forms or login credentials).
* Common HTTP Status Codes:
* 200 OK: Request succeeded; data is delivered.
* 301 Moved Permanently: The page has shifted to a new URL.
* 403 Forbidden: Client lacks permission to access the resource.
* 404 Not Found: The requested file does not exist on the server.
* 500 Internal Server Error: The server encountered an unhandled software crash.
3. DHCP (Dynamic Host Configuration Protocol)
* Ports: 67 (Server), 68 (Client)
* Function: Automatically assigns IP addresses, subnet masks, default gateways, and DNS server addresses to lab computers when they boot, preventing manual IP configuration conflicts.
5. Comparison: Client vs. Server
| Feature | Client | Server |
|---|---|---|
| Primary Role | Requests services and displays results | Listens, authenticates, processes, and serves data |
| Initiative | Always initiates the connection | Passively waits for connections |
| Hardware Typical | Standard desktop PC, laptop, or mobile tablet | Dedicated multi-core rack units, ECC memory, high redundancy |
| Operating System | Client OS (Windows 10/11, Ubuntu Desktop, Android) | Server OS (Ubuntu Server, Debian, Windows Server, Red Hat) |
| IP Configuration | Typically dynamic (assigned by DHCP) | Typically fixed (Static IP for reliable DNS mapping) |
6. Hands-on Lab Activity: Inspecting Web Requests and Building a Python HTTP Server
Students can experience both sides of the client-server relationship right inside the school ICT lab:
Task 1: Trace DNS Resolution and Web Ping
* Press Win + R, type cmd, and press Enter.
* Query the DNS resolution for an educational portal:
nslookup wikipedia.org
* Observe the response:
* Notice your local DNS server listed first (often your lab router's gateway IP).
* Note the resolved Non-authoritative answer showing the exact IPv4 and IPv6 addresses of Wikipedia.
Task 2: Launch a Local Python Web Server
Every lab computer with Python installed already contains a built-in lightweight web server. Students can turn their workstation into a local server in seconds:
* Create a new folder on the desktop called my_web_lab.
* Inside my_web_lab, create a simple text file, write <h1>Hello from Lab Server!</h1>, and save it as index.html.
* Open the Command Prompt or Terminal inside that folder and execute:
python -m http.server 8080
* Verification:
* Open any browser on that computer and visit http://localhost:8080.
* You will see your webpage served directly!
* Look at the terminal: it will display real-time client logs showing the incoming GET / HTTP/1.1 request and the 200 status code.
* If computers are networked, another student on a neighboring lab PC can open their browser and visit http://<your-pc-ip>:8080 to view the page across the LAN!
7. Review Questions & Key Answers
Q1: Why is the Domain Name System (DNS) often compared to a telephone directory or contact book?
* Answer: Because humans remember alphabetical domain names (like google.com), while networking hardware only routes traffic using numerical IP addresses (like 142.250.190.46). DNS maps readable names to numerical IP addresses.
Q2: What is the significance of HTTP Status Code 404?
* Answer: It indicates a client-side error where the browser successfully connected to the web server, but the specific file or path requested could not be found on that server.
Q3: Which protocol automatically assigns temporary IP addresses to workstations when they boot up in a school computer lab?
* Answer: DHCP (Dynamic Host Configuration Protocol).
Comments
Post a Comment