Kapitel 7: HTTP-Server Entwicklung

🎯 Lernziele

In diesem Kapitel lernen Sie:

✅ HTTP-Server mit http-Modul erstellen
✅ Anfrage-Objekt (req) und Antwort-Objekt (res) verstehen
✅ HTTP-Anfragemethoden (GET, POST) behandeln
✅ Einfaches Routing implementieren
✅ Statische Ressourcen bereitstellen
✅ Praxis: Einfachen Webserver erstellen

7.1 HTTP-Server mit http-Modul erstellen

📖 Grundlegende Syntax

javascript

const http = require('http');

// Server erstellen
const server = http.createServer((req, res) => {
  // req = Anfrage-Objekt (Request)
  // res = Antwort-Objekt (Response)
  
  // HTTP-Header setzen
  res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' });
  
  // Antwort senden
  res.end('Hallo von Node.js HTTP-Server!');
});

// Server auf Port 3000 starten
server.listen(3000, () => {
  console.log('🚀 Server läuft auf http://localhost:3000');
});

🎨 Visuelle Erklärung

Browser (Client)              Node.js Server
     │                            │
     │── GET / ────────────────>│
     │                            │
     │<── 200 OK + "Hallo" ───│
     │                            │

▶️ Server starten

bash

# Speichern Sie den Code als server.js
node server.js

# Im Browser öffnen:
# http://localhost:3000

7.2 Server-Antwort verarbeiten

📥 Anfrage-Objekt (`req`)

Das req-Objekt enthält Informationen über die eingehende HTTP-Anfrage.

Eigenschaft	Beschreibung	Beispiel
`req.url`	Angefragte URL	`'/about'`
`req.method`	HTTP-Methode	`'GET'`, `'POST'`
`req.headers`	HTTP-Header	`{ 'user-agent': '...' }`
`req.httpVersion`	HTTP-Version	`'1.1'`

javascript

const http = require('http');

const server = http.createServer((req, res) => {
  console.log('URL:', req.url);
  console.log('Methode:', req.method);
  console.log('Header:', req.headers);
  
  res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' });
  res.end('Anfrage empfangen!');
});

server.listen(3000, () => {
  console.log('Server läuft auf Port 3000');
});

📤 Antwort-Objekt (`res`)

Das res-Objekt wird verwendet, um dem Client zu antworten.

Methode	Beschreibung
`res.writeHead(status, headers)`	HTTP-Status und Header setzen
`res.setHeader(name, value)`	Einzelnen Header setzen
`res.statusCode = 200`	Statuscode setzen
`res.write(data)`	Daten senden (mehrfach möglich)
`res.end([data])`	Antwort beenden (muss aufgerufen werden!)

javascript

const http = require('http');

const server = http.createServer((req, res) => {
  // Methode 1: writeHead() verwenden
  res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
  res.end('<h1>Willkommen!</h1>');
  
  // Methode 2: setHeader() verwenden
  // res.setHeader('Content-Type', 'application/json');
  // res.statusCode = 200;
  // res.end(JSON.stringify({ nachricht: 'Hallo!' }));
});

server.listen(3000);

7.3 HTTP-Anfragemethoden

📚 Wichtige HTTP-Methoden

Methode	Beschreibung	Verwendung
GET	Daten abrufen	Seite laden, API-Daten abrufen
POST	Daten senden	Formular absenden, Daten erstellen
PUT	Daten aktualisieren	Ressource komplett aktualisieren
DELETE	Daten löschen	Ressource löschen

🔍 GET vs. POST Unterscheidung

javascript

const http = require('http');

const server = http.createServer((req, res) => {
  if (req.method === 'GET') {
    // GET-Anfrage behandeln
    res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' });
    res.end('GET-Anfrage empfangen!');
    
  } else if (req.method === 'POST') {
    // POST-Anfrage behandeln
    let body = '';
    
    req.on('data', chunk => {
      body += chunk.toString();
    });
    
    req.on('end', () => {
      res.writeHead(200, { 'Content-Type': 'application/json; charset=utf-8' });
      res.end(JSON.stringify({ 
        nachricht: 'POST-Anfrage empfangen!', 
        daten: body 
      }));
    });
  }
});

server.listen(3000, () => {
  console.log('Server läuft auf Port 3000');
});

7.4 Einfaches Routing

🗺️ Was ist Routing?

Routing = Verschiedene URLs zu verschiedenen Inhalten zuordnen.

javascript

const http = require('http');

const server = http.createServer((req, res) => {
  const url = req.url;
  res.setHeader('Content-Type', 'text/html; charset=utf-8');
  
  if (url === '/') {
    res.statusCode = 200;
    res.end('<h1>🏠 Startseite</h1><p>Willkommen auf meiner Webseite!</p>');
    
  } else if (url === '/about') {
    res.statusCode = 200;
    res.end('<h1>ℹ️ Über uns</h1><p>Dies ist eine Node.js-Webseite.</p>');
    
  } else if (url === '/contact') {
    res.statusCode = 200;
    res.end('<h1>📞 Kontakt</h1><p>Email: info@example.com</p>');
    
  } else {
    res.statusCode = 404;
    res.end('<h1>❌ 404 - Seite nicht gefunden</h1>');
  }
});

server.listen(3000, () => {
  console.log('🚀 Server läuft auf http://localhost:3000');
  console.log('Verfügbare Routen:');
  console.log('  /        - Startseite');
  console.log('  /about   - Über uns');
  console.log('  /contact - Kontakt');
});

🎨 Visuelle Routing-Tabelle

Anfrage-URL    │  Antwort
─────────────────┼──────────────────────
  /              │  Startseite
  /about         │  Über uns
  /contact       │  Kontakt
  * (andere)     │  404 Fehler

7.5 Statische Ressourcen bereitstellen

📂 Statische Dateien servieren

javascript

const http = require('http');
const fs = require('fs');
const path = require('path');

const server = http.createServer((req, res) => {
  // Basis-Verzeichnis für statische Dateien
  const basisVerzeichnis = './public';
  let dateiPfad = basisVerzeichnis + req.url;
  
  // Wenn URL = '/', dann index.html servieren
  if (req.url === '/') {
    dateiPfad = path.join(basisVerzeichnis, 'index.html');
  }
  
  // Dateiendung bestimmen → Content-Type setzen
  const erweiterung = path.extname(dateiPfad);
  const contentTypen = {
    '.html': 'text/html',
    '.css': 'text/css',
    '.js': 'text/javascript',
    '.json': 'application/json',
    '.png': 'image/png',
    '.jpg': 'image/jpeg',
    '.gif': 'image/gif',
    '.svg': 'image/svg+xml',
    '.ico': 'image/x-icon'
  };
  
  const contentType = contentTypen[erweiterung] || 'text/plain';
  
  // Datei lesen und senden
  fs.readFile(dateiPfad, (err, inhalt) => {
    if (err) {
      if (err.code === 'ENOENT') {
        // Datei nicht gefunden → 404
        res.writeHead(404, { 'Content-Type': 'text/html; charset=utf-8' });
        res.end('<h1>404 - Datei nicht gefunden</h1>');
      } else {
        // Serverfehler → 500
        res.writeHead(500);
        res.end(`Serverfehler: ${err.code}`);
      }
    } else {
      // Erfolg → 200
      res.writeHead(200, { 'Content-Type': `${contentType}; charset=utf-8` });
      res.end(inhalt);
    }
  });
});

server.listen(3000, () => {
  console.log('🚀 Statischer Server läuft auf http://localhost:3000');
  console.log('📂 Dateien aus ./public werden serviert');
});

📂 Projektstruktur

mein-projekt/
├── server.js           # Server-Code
└── public/            # Statische Dateien
    ├── index.html
    ├── style.css
    ├── script.js
    └── bilder/
        └── logo.png

7.6 Praxisbeispiel: Erstellen eines einfachen statischen Webservers

🛠️ Fallstudie: Vollständiger statischer Webserver

Schritt 1: Projektstruktur erstellen

bash

mkdir statischer-server
cd statischer-server
npm init -y

Schritt 2: HTML-Dateien erstellen

public/index.html:

html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meine Webseite</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>🏠 Willkommen!</h1>
  <p>Dies ist eine mit Node.js servierte Webseite.</p>
  <a href="/about.html">Über uns</a>
  <script src="script.js"></script>
</body>
</html>

public/about.html:

html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Über uns</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>ℹ️ Über uns</h1>
  <p>Diese Webseite wurde mit Node.js erstellt.</p>
  <a href="/">Zurück zur Startseite</a>
</body>
</html>

public/style.css:

css

body {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 50px auto;
  padding: 0 20px;
}

h1 {
  color: #333;
}

a {
  color: #0066cc;
  text-decoration: none;
}

public/script.js:

javascript

console.log('JavaScript wurde geladen!');

Schritt 3: Server-Code erstellen

server.js:

javascript

const http = require('http');
const fs = require('fs');
const path = require('path');

const server = http.createServer((req, res) => {
  // URL bereinigen (query parameter entfernen)
  const url = req.url.split('?')[0];
  
  // Basis-Verzeichnis
  let dateiPfad = path.join(__dirname, 'public', url === '/' ? 'index.html' : url);
  
  // Dateiendung → Content-Type
  const erweiterung = path.extname(dateiPfad);
  const mimeTypen = {
    '.html': 'text/html',
    '.css': 'text/css',
    '.js': 'text/javascript',
    '.json': 'application/json',
    '.png': 'image/png',
    '.jpg': 'image/jpeg',
    '.jpeg': 'image/jpeg',
    '.gif': 'image/gif',
    '.svg': 'image/svg+xml',
    '.ico': 'image/x-icon',
    '.woff': 'font/woff',
    '.woff2': 'font/woff2'
  };
  
  const contentType = mimeTypen[erweiterung] || 'application/octet-stream';
  
  // Datei lesen
  fs.readFile(dateiPfad, (err, inhalt) => {
    if (err) {
      if (err.code === 'ENOENT') {
        // 404 - Datei nicht gefunden
        fs.readFile(path.join(__dirname, 'public', '404.html'), (err404, inhalt404) => {
          res.writeHead(404, { 'Content-Type': 'text/html; charset=utf-8' });
          if (err404) {
            res.end('<h1>404 - Seite nicht gefunden</h1>');
          } else {
            res.end(inhalt404);
          }
        });
      } else {
        // 500 - Serverfehler
        res.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8' });
        res.end('Serverfehler');
      }
    } else {
      // 200 - Erfolg
      res.writeHead(200, { 'Content-Type': `${contentType}; charset=utf-8` });
      res.end(inhalt);
    }
  });
});

const PORT = 3000;
server.listen(PORT, () => {
  console.log(`🚀 Statischer Webserver läuft auf http://localhost:${PORT}`);
  console.log('📂 Statische Dateien aus ./public werden serviert');
  console.log('\nVerfügbare Seiten:');
  console.log(`  http://localhost:${PORT}/`);
  console.log(`  http://localhost:${PORT}/about.html`);
});

Schritt 4: Server starten

bash

node server.js

Öffnen Sie Ihren Browser und navigieren Sie zu:

http://localhost:3000/
http://localhost:3000/about.html

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

✅ HTTP-Server mit http.createServer() erstellen
✅ req-Objekt (Anfrage) und res-Objekt (Antwort) verstehen
✅ GET- und POST-Anfragen unterscheiden
✅ Einfaches Routing implementieren
✅ Statische Dateien (HTML, CSS, JS, Bilder) servieren
✅ Praxis: Vollständigen statischen Webserver erstellt

🎯 Nächste Schritte

Im nächsten Kapitel werden wir:

GET-Parameter aus URL auslesen
POST-Anfragedaten empfangen
JSON-Antworten senden
CORS-Probleme lösen

📚 Weiterführende Ressourcen

🎉 Kapitel 7 abgeschlossen! Weiter zu Kapitel 8: Anfrage & Antwort Verarbeitung

Kapitel 7: HTTP-Server Entwicklung ​

🎯 Lernziele ​

7.1 HTTP-Server mit http-Modul erstellen ​

📖 Grundlegende Syntax ​

🎨 Visuelle Erklärung ​

▶️ Server starten ​

7.2 Server-Antwort verarbeiten ​

📥 Anfrage-Objekt (req) ​

📤 Antwort-Objekt (res) ​

7.3 HTTP-Anfragemethoden ​

📚 Wichtige HTTP-Methoden ​

🔍 GET vs. POST Unterscheidung ​

7.4 Einfaches Routing ​

🗺️ Was ist Routing? ​

🎨 Visuelle Routing-Tabelle ​

7.5 Statische Ressourcen bereitstellen ​

📂 Statische Dateien servieren ​

📂 Projektstruktur ​

7.6 Praxisbeispiel: Erstellen eines einfachen statischen Webservers ​

🛠️ Fallstudie: Vollständiger statischer Webserver ​

Schritt 1: Projektstruktur erstellen ​

Schritt 2: HTML-Dateien erstellen ​

Schritt 3: Server-Code erstellen ​

Schritt 4: Server starten ​

📝 Zusammenfassung ​

🎯 Nächste Schritte ​

📚 Weiterführende Ressourcen ​

Kapitel 7: HTTP-Server Entwicklung

🎯 Lernziele

7.1 HTTP-Server mit http-Modul erstellen

📖 Grundlegende Syntax

🎨 Visuelle Erklärung

▶️ Server starten

7.2 Server-Antwort verarbeiten

📥 Anfrage-Objekt (`req`)

📤 Antwort-Objekt (`res`)

7.3 HTTP-Anfragemethoden

📚 Wichtige HTTP-Methoden

🔍 GET vs. POST Unterscheidung

7.4 Einfaches Routing

🗺️ Was ist Routing?

🎨 Visuelle Routing-Tabelle

7.5 Statische Ressourcen bereitstellen

📂 Statische Dateien servieren

📂 Projektstruktur

7.6 Praxisbeispiel: Erstellen eines einfachen statischen Webservers

🛠️ Fallstudie: Vollständiger statischer Webserver

Schritt 1: Projektstruktur erstellen

Schritt 2: HTML-Dateien erstellen

Schritt 3: Server-Code erstellen

Schritt 4: Server starten

📝 Zusammenfassung

🎯 Nächste Schritte

📚 Weiterführende Ressourcen