Mit unserem Wissen über Web-APIs und JSON wollen wir nun die TicTacToe Web-App weiterentwickeln, so dass zwei Spieler:innen übers Web gegeneinander spielen können.

Dazu muss Folgendes geschehen:

• Die Spiel-Logik muss vom Browser auf den Server wandern.
  • Dazu muss ein Server-Prozess gestartet werden, wir verwenden dafür nodejs und express.
  • Der Server muss geeignete Web-APIs zur Verfügung stellen:
    • /game/<gameid>: gibt den Zustand des Games mit Id <gameid> im JSON-Format zurück.
    • /join: nimmt an einem Spiel teil (entweder an einem bereits mit einem Spieler wartenden, oder es wird ein neues Spiel gestartet). Gibt anschliessend den Game-Zustand zurück.
    • /set/<gameid>/<cellid>: Setzt im Game mit Id <gameid> die Zelle <cellid> (muss im Bereich von 0-8 sein) an. Gibt anschliessend den Game-Zustand zurück.
• Das Javascript im Browser muss sich nur noch darum kümmern, die richtigen Web-APIs auf dem Server aufzurufen, und den Zustand des Spiels im HTML darzustellen.

• Node.js installieren:
  • https://nodejs.org/en/download/prebuilt-installer
• Projekt initialisieren:
  • Eine Eingabeaufforderung im Ordner der Webapp öffnen.
    • npm init
    • npm install express cookie-parser
  • Öffne die Datei package.json:
    • füge einen Eintrag hinzu: "type": "module"
  • Falls du git verwendest:
    • füge node-modules zu .gitignore hinzu.

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

app.js

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

Mit dem Kommandozeilenaufruf node app.js wird der Node-Server gestartet. Auf der Adresse http://localhost:3000/hello können wir auf die oben definierte API zugreifen.

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

Es ist auch möglich, Teile der im Request (req) verlangten Adresse als Parameter zu erhalten:

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