Ein frei kopier- und anpassbares Lehrmittel von eduskript.org

Built with Eduskript
Am Ende dieses Projekts
  • läuft auf Ihrem Laptop ein echter Webserver, den Ihre Klasse besuchen kann.
  • sehen Sie live, wer gerade bei Ihnen vorbeischaut.
  • haben Sie ein Gästebuch, in das andere hineinschreiben.
  • wissen Sie, was ein Server wirklich ist. (Spoiler: Es ist weniger magisch, als es klingt.)

«Der Server ist down.» «Das liegt in der Cloud.» Hinter solchen Sätzen steckt immer dasselbe: ein Programm auf einem Computer, das wartet. Das bauen wir jetzt selbst. Sie brauchen Python, ein Terminal und jemanden neben sich.

Schritt 1: Eine Seite, die noch niemand sehen kann

Erstellen Sie einen neuen, leeren Ordner meinserver und darin eine Datei index.html:

<!doctype html>
<meta charset="utf-8">
<h1>Willkommen auf dem Server von ...</h1>
<p>Dieser Text kommt direkt von meinem Laptop.</p>

Machen Sie die Seite ruhig zu Ihrer eigenen. Im Moment liegt sie einfach als Datei auf Ihrer Festplatte, und niemand sonst kommt an sie heran.

Schritt 2: Der Server erwacht

Öffnen Sie ein Terminal in diesem Ordner und starten Sie den Server, der bei Python schon dabei ist:

python -m http.server 8000
Wirklich nur im leeren Ordner!

Der Server zeigt alles, was im Ordner liegt, und zwar allen im selben Netz. Starten Sie ihn also nie in Ihrem Benutzerordner.

Und jetzt? Das Terminal scheint zu hängen. Es passiert nichts.

Genau das ist der Server. Er tut nichts, ausser zu warten. Ihr Programm hat sich in die Tür Nummer 8000 gestellt (Sie erinnern sich an die Ports) und schaut hinaus.

Öffnen Sie im Browser http://localhost:8000. localhost heisst: «dieser Computer hier». Schauen Sie dabei aufs Terminal!

127.0.0.1 - - [01/Nov/2026 16:54:23] "GET / HTTP/1.1" 200 -

Das ist Ihre Anfrage, gesehen von der anderen Seite: Jemand von 127.0.0.1 (das sind Sie) hat mit GET die Seite / verlangt, der Server antwortete mit 200, also «alles gut». Es gibt zwei Programme: Ihr Browser fragt, Ihr Server antwortet. Client und Server.

✏️ Probieren Sie aus
  1. Rufen Sie http://localhost:8000/gibtsnicht.html auf. Was steht im Terminal?
  2. Ändern Sie etwas in index.html und laden Sie die Seite neu. Mussten Sie den Server neu starten?
  3. Schliessen Sie den Browser ganz. Was macht der Server?
  4. Beenden Sie den Server mit Ctrl+C und laden Sie die Seite neu. Was passiert? Das ist es, was «Der Server ist down» bedeutet.

Schritt 3: Sie bekommen Besuch

Starten Sie den Server wieder. Finden Sie Ihre IP-Adresse heraus (ipconfig unter Windows, ipconfig getifaddr en0 auf dem Mac) und geben Sie sie Ihrer Nachbarin oder Ihrem Nachbarn. Die Person tippt ein:

http://IHRE-IP:8000

Schauen Sie aufs Terminal. Da steht nun eine fremde IP-Adresse: Ein anderer Computer hat bei Ihnen angeklopft, und Ihr Laptop hat ihm eine Webseite geschickt. Genau so funktioniert jede Webseite der Welt.

✏️ Challenge

Wer bekommt am meisten Besuch? Gehen Sie auf Serversuche in der Klasse und hinterlassen Sie Spuren im Log Ihrer Kolleginnen und Kollegen.

Es klappt nicht?
  • Windows fragt nach der Firewall: Zugriff für private Netzwerke erlauben.
  • «Address already in use»: Tür 8000 ist besetzt. Nehmen Sie eine andere Zahl, z.B. 8001.
  • Niemand kommt durch: Manche Schul-WLANs lassen Geräte nicht miteinander reden. Dann hilft ein Hotspot vom Handy, mit dem sich beide verbinden.

Schritt 4: Ein Server, der sich etwas merkt

Bisher verschickt Ihr Server nur Dateien. Richtig spannend wird es, wenn Besucher etwas hinterlassen können. Dazu braucht es neben GET («Gib mir!») eine zweite Bitte: PUT («Speichere das!»).

Beenden Sie den alten Server. Legen Sie im Ordner meinserver drei Dateien an.

daten.json ist das Gedächtnis des Servers, am Anfang eine leere Liste:

[]

server.py ist Ihr eigener Server. Er kann alles, was der alte konnte, und dazu PUT:

from http.server import SimpleHTTPRequestHandler, ThreadingHTTPServer
import json

class MeinServer(SimpleHTTPRequestHandler):
    def do_PUT(self):
        # Nur diese eine Adresse darf beschrieben werden.
        if self.path != "/daten.json":
            self.send_error(403, "Hier darf nichts gespeichert werden")
            return

        # Der Client sagt uns, wie viele Bytes er schickt.
        laenge = int(self.headers.get("Content-Length", 0))
        inhalt = self.rfile.read(laenge)

        # Nur gültiges JSON speichern.
        try:
            json.loads(inhalt)
        except ValueError:
            self.send_error(400, "Das ist kein JSON")
            return

        with open("daten.json", "wb") as datei:
            datei.write(inhalt)

        self.send_response(204)  # 204 = «Hat geklappt, keine Antwort nötig»
        self.end_headers()

print("Server läuft auf http://localhost:8000")
ThreadingHTTPServer(("", 8000), MeinServer).serve_forever()

index.html ersetzen Sie durch das Gästebuch:

<!doctype html>
<meta charset="utf-8">
<h1>Mein Gästebuch</h1>
<input id="name" placeholder="Name">
<input id="text" placeholder="Nachricht">
<button id="senden">Eintragen</button>
<ul id="liste"></ul>

<script>
  const liste = document.querySelector("#liste");

  async function laden() {
    const antwort = await fetch("daten.json", { cache: "no-store" });
    return await antwort.json();
  }

  async function anzeigen() {
    const eintraege = await laden();
    liste.innerHTML = "";
    for (const e of eintraege) {
      const li = document.createElement("li");
      li.textContent = e.name + ": " + e.text;
      liste.append(li);
    }
  }

  document.querySelector("#senden").onclick = async () => {
    const eintraege = await laden();
    eintraege.push({
      name: document.querySelector("#name").value,
      text: document.querySelector("#text").value,
    });
    await fetch("daten.json", { method: "PUT", body: JSON.stringify(eintraege) });
    anzeigen();
  };

  anzeigen();
  setInterval(anzeigen, 2000);
</script>

Starten Sie ihn mit python server.py (macOS/Linux: python3 server.py) und lassen Sie die Klasse in Ihr Gästebuch schreiben. Beobachten Sie dabei gleichzeitig drei Dinge: die Seite, das Terminal und die Datei daten.json.

Beenden Sie den Server und starten Sie ihn neu. Die Einträge sind noch da, denn sie liegen in einer Datei. Nichts anderes macht ein grosser Dienst mit Ihren Nachrichten, nur mit mehr Festplatten.

✏️ Fragen zum Gästebuch
  1. Die Seite fragt alle 2 Sekunden nach neuen Einträgen. Wo sehen Sie das?
  2. Was ist im Terminal anders, wenn jemand etwas einträgt?
  3. Die Browser Ihrer Gäste erhalten daten.json und index.html. Laufen die Zeilen in <script> auf Ihrem Laptop oder bei den Gästen?

Schritt 5: Gestalten und angreifen

Jetzt gehört der Server Ihnen. Suchen Sie sich etwas aus:

  • 🎨 Schön machen: Geben Sie dem Gästebuch mit CSS ein eigenes Gesicht.
  • 🕒 Zeitstempel: Speichern Sie zu jedem Eintrag die Uhrzeit (new Date().toLocaleTimeString()).
  • 🗳️ Umbauen: Machen Sie daraus eine Abstimmung, ein Klassen-Quiz oder eine Liste für den Znüni.
🕵️ Für Neugierige: Trauen Sie nie dem Client

Schauen Sie genau hin: Der Browser schickt jedes Mal die ganze Liste, und der Server speichert sie einfach. Ihre Gäste kontrollieren also, was gespeichert wird.

Machen Sie das nur bei Servern von Kolleginnen und Kollegen, die einverstanden sind: Tippen Sie in der Konsole der Entwicklertools (F12) auf deren Seite:

fetch("daten.json", { method: "PUT", body: "[]" })

Das Gästebuch ist leer. Überlegen Sie: Wie müsste der Server gebaut sein, damit das nicht geht? Das ist die Denkweise, mit der echte Webseiten gebaut werden.

Wenn Sie fertig sind: Ctrl+C. Ihr Server ist down, und jetzt wissen Sie, was das heisst. 🎉

dfc2b34