1. Introduction to Client–Server Architecture

A website is built on the client–server model. The client is typically a web browser or mobile app requesting resources (HTML, CSS, JavaScript, images). The server is a machine (or cluster) that hosts those resources and responds to client requests. Communication happens over the HTTP protocol.

2. HTTP Protocol Overview

2.1. Request–Response Cycle

• Client sends an HTTP request to the server, specifying:
  • HTTP method (GET, POST, etc.)
  • URL path
  • Headers (Host, User-Agent, Accept, etc.)
  • Optional message body (for POST, PUT)
• Server processes the request (reads files, queries databases, runs code).
• Server replies with an HTTP response containing:
  • Status line (HTTP version, status code, reason phrase)
  • Headers (Content-Type, Content-Length, Set-Cookie, etc.)
  • Message body (HTML document, JSON data, binary file, etc.)

2.2. Common HTTP Methods

2.3. HTTP Status Codes

Status codes tell the client whether the request succeeded, failed, or needs further action:

3. HTTP in Action: Example of Request and Response

The following shows a raw HTTP GET request sent by a client, and the HTTP response from the server.

Client request:

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html
Connection: close

  

Server response:

HTTP/1.1 200 OK
Date: Mon, 01 Jul 2024 12:34:56 GMT
Server: Apache/2.4.41 (Ubuntu)
Content-Type: text/html; charset=UTF-8
Content-Length: 137



  
    
    
  
  
    
Welcome to Example.com!
    
This page was served over HTTP.
  

  

4. Building a Simple HTTP Server (Node.js)

Below is a minimal HTTP server using Node.js’s built-in http module. It listens on port 3000 and serves two routes: / and a 404 for others.

// Load the http module
const http = require('http');

// Create the server
const server = http.createServer((req, res) => {
  console.log(`Incoming request: ${req.method} ${req.url}`);

  if (req.method === 'GET' && req.url === '/') {
    // Send HTML response
    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    });
    res.end('
Hello from Node.js HTTP server!
');
  } else {
    // Handle 404 Not Found
    res.writeHead(404, {
      'Content-Type': 'text/plain; charset=utf-8'
    });
    res.end('404 Not Found');
  }
});

// Start listening on port 3000
server.listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});
  

5. Client-Side Fetch Example

Modern browsers provide the fetch API to request resources asynchronously:

// Fetch JSON data from an API
fetch('https://api.example.com/users')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('User list:', data);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });
  

6. Summary

• Web browsers (clients) and web servers communicate over HTTP.
• Clients send requests (method, path, headers, optional body).
• Servers process requests, send back status codes, headers, and bodies.
• HTTP methods define the operation; status codes inform outcome.
• You can build servers in many languages—Node.js example shows how HTTP works under the hood.