Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

Link zu der Vergleichsansicht

Beide Seiten, vorherige Überarbeitung Vorherige Überarbeitung
Nächste Überarbeitung		 Vorherige Überarbeitung
talit:web:webapps:server [2025-04-13 09:36] – [Long-Polling] hoftalit:web:webapps:server [2026-08-31 15:13] (aktuell) – [Server-Side Vier-Gewinnt] hof
Zeile 5: Zeile 5:
 Dazu muss Folgendes geschehen: Dazu muss Folgendes geschehen:
   * Die Spiel-Logik muss vom Browser auf den Server wandern.   * Die Spiel-Logik muss vom Browser auf den Server wandern.
-    * Dazu muss ein Server-Prozess gestartet werden, wir verwenden dafür [[https://nodejs.org/|nodejs]] und [[https://expressjs.com/|express]].+    * Dazu muss ein Server-Prozess gestartet werden, der HTTP spricht. 
 +      * Wir könnten dafür Python (mit Flask, Quart, FastAPI) verwenden. 
 +      * Wir wählen Javascript und verwenden [[https://nodejs.org/|nodejs]] und [[https://expressjs.com/|express]].
     * Der Server muss die folgenden zwei Web-APIs zur Verfügung stellen:     * Der Server muss die folgenden zwei Web-APIs zur Verfügung stellen:
       * `/<gameid>/game`: gibt den Zustand des Games mit Id `<gameid>` im JSON-Format zurück.       * `/<gameid>/game`: gibt den Zustand des Games mit Id `<gameid>` im JSON-Format zurück.
Zeile 18: Zeile 20:
   * 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.   * 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.
  
 +{{ :talit:web:webapps:connect4_component_diagram.svg?600&nolink |}}
 ### Installation von node.js und express ### Installation von node.js und express
  
   * Node.js installieren:   * Node.js installieren:
-    * https://nodejs.org/en/download/prebuilt-installer+    * https://nodejs.org/en/download
   * Projekt initialisieren:   * Projekt initialisieren:
     * Eine Eingabeaufforderung **im Ordner der Webapp** öffnen.     * Eine Eingabeaufforderung **im Ordner der Webapp** öffnen.
Zeile 48: Zeile 50:
  
 // Listen on the given port // Listen on the given port
-app.listen(port, () => { +const server = app.listen(port, () => { 
-    console.log(`Example app listening on port ${port}`)+    console.log(`Example app listening on http://localhost:${server.address().port}/`)
 }) })
 </code> </code>
Zeile 55: Zeile 57:
 Mit dem Kommandozeilenaufruf `node app.js` wird der Node-Server gestartet. Auf der Adresse http://localhost:3001/hello können wir auf die oben definierte API zugreifen. Mit dem Kommandozeilenaufruf `node app.js` wird der Node-Server gestartet. Auf der Adresse http://localhost:3001/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.+Der Code bedeutet: Wann immer eine _Request_ (_res_) 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:+Es ist auch möglich, Teile des im Request verlangten Pfades als Parameter zu erhalten:
  
 <code javascript> <code javascript>
 app.get('/hello/:name', (req, res) => { app.get('/hello/:name', (req, res) => {
     let name = req.params['name']     let name = req.params['name']
-    res.send(`Hello ${name}!``)+    res.send(`Hello ${name}!`)
 }) })
 </code> </code>
Zeile 77: Zeile 79:
  
 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. 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.
- 
 ### Server-Side Vier-Gewinnt ### Server-Side Vier-Gewinnt
  
-Erstelle eine Kopie deiner `connect4.js` Datei, um auf dem Server ein Spiel laufen zu lassen.+Erstelle eine Kopie deiner `connect4.js` Datei als `connect4_server.js`, um auf dem Server ein Spiel laufen zu lassen.
  
 Was muss sich ändern? Was muss sich ändern?
Zeile 120: Zeile 121:
  
 app.get('/:gameid/game', (req, res) => { app.get('/:gameid/game', (req, res) => {
-    return the_game;+    res.json(the_game);
 }) })
  
  • talit/web/webapps/server.1744536993.txt.gz
  • Zuletzt geändert: 2025-04-13 09:36
  • von hof