Statt die Dateien lokal zu laden, möchten wir einen Webserver betreiben, der unsere Dateien (HTML, CSS, JS) an die Clients (also Webbrowser) ausliefern. Der Server kann in jeder beliebigen Sprache geschrieben sein, solange er das HTTP-Protokoll implementiert.

Mit Python könnten wir dazu Flask, Quart oder FastAPI verwenden. Wir bleiben allerdings Javascript treu: Javascript kann auch ausserhalb des Browsers ausgeführt werden, wozu wir nodejs verwenden. Als HTTP-Server nutzen wir express.

Schritte:

• Node herunterladen und installieren
• im Projekt ein node-Projekt initialisieren (erzeugt package.json) und express installieren.
• express so konfigurieren, dass unsere Web-Dateien ausgeliefert werden.

• Node.js installieren:
  • https://nodejs.org/en/download
  • ev. Visual Studio Code neu starten
• Projekt initialisieren:
  • Ein Terminal im Ordner der Webapp öffnen (Ctrl+J) und die folgenden Befehle ausführen
    • npm init es6
      • es6 ist ein bestimmter Dialekt von Javascript
      • Der Befehl erzeugt die Datei package.json, die definiert, wie unsere Node-App funktioniert.
    • npm install express cookie-parser
      • die direkt benötigten Bibliotheken werden in package.json deklariert.
      • die installierten Bibliotheken (inklusive aller transitiver Abhängigkeiten) werden in package-lock.json aufgelistet und in node-modules gespeichert.
  • Falls du git verwendest:
    • füge node-modules zu .gitignore hinzu.

Zuerst benötigen wir eine Datei index.js, die definiert, wie der Server funktioniert, und welche APIs wir bereitstellen:

index.js

import express from 'express'
 
const app = express()
const port = 3001
 
// Hello World.
app.get('/hello', (req, res) => {
  res.send('Hello World!')
})
 
// Listen on the given port
const server = app.listen(port, () => {
    console.log(`Example app listening on http://localhost:${server.address().port}/`)
})

Mit dem Kommandozeilenaufruf node index.js wird der Node-Server gestartet. Auf der Adresse http://localhost:3001/hello können wir auf den oben definierten URL zugreifen.

Der Code bedeutet: Wann immer eine Request (req) für den Pfad /hello ankommt, so sende als Response (res) den String Hello World zurück.

Es ist auch möglich, Teile des im Request verlangten Pfades als Parameter zu erhalten. Dazu wird dem Pfadsegment ein : vorangestellt, anschliessend kann der Parameter über req.params ausgelesen werden:

app.get('/hello/:name', (req, res) => {
  res.send(`Hello ${name}``)
})

Der Aufruf für http://localhost:3001/hello/mr_president sollte jetzt eine entsprechende Antwort liefern.

Die bisherigen HTML und CSS Dateien bleiben unverändert - der Server soll diese bitte direkt zum Browser übertragen. Das erreichen wir, indem wir einen Ordner static anlegen, und die client-side Dateien dorthin verschieben. Node wird instruiert, diese Dateien unverändert auszuliefern. Achtung, diese Snippet muss vor dem listen aufgeführt werden!

index.js

// Serve all files from static/ as is.
// For example, a request for '/42/connect4.html' will be served from
// 'static/connect4.html'
app.use('/:gameid/', express.static('static'))

Ausprobieren: Node neu starten und den URL http://localhost:3001/0/connect4.html laden - unser HTML + CSS sollte korrekt angezeigt werden! Allenfalls ist der Port 3001 bereits besetzt, dann muss ein anderer Port gewählt werden.

Cool, wir haben einen HTTP-Server, der unsere Dateien ausliefert. Danach läuft das Spiel aber weiterhin ausschliesslich im Browser ab. Wir möchten erreichen, dass zwei Spieler in unterschiedlichen Clients (Browsern) gegeneinander antreten können - wie geht das?

Weiter gehts mit Dynamische JSON-APIs