Tic Tac Toe Teil 0: Vergleich von Svelte und React
Tic Tac Toe Teil 1: Svelte und Canvas 2D
Tic Tac Toe Teil 2: Staatenloses Rückgängigmachen / Wiederherstellen
Tic Tac Toe, Teil 3: Rückgängig / Wiederherstellen mit Befehlsspeicher
Tic Tac Toe Teil 4: Interaktion mit dem Flask Backend über HTTP
In diesem Artikel betrachten wir die Interaktion einer Svelte-Webanwendung aus dem vorherigen Artikel mit dem Flask-Backend unter Verwendung von HTTP-Anforderungen. Es stellte sich heraus, dass das Erhöhen eines Containers mit einer Backend-Anwendung auf Flask schneller ist als auf Boost.Beast , also habe ich ein Beispiel mit Flask gemacht . Keine Sorge, das Boost.Beast- Beispiel wird etwas später erscheinen.
Projektinstallation
Es wird davon ausgegangen, dass Docker und Docker-Compose auf dem Computer installiert sind.
Wir klonen das Projekt auf Ihren Computer:
git clone https://github.com/nomhoi/tic-tac-toe-part4.git
Container starten:
cd tic-tac-toe-part4 docker-compose up -d
Wir erstellen die Webanwendung:
cd front npm install npm run-script build
Öffnen Sie den Browser unter http: // localhost . Auf dem Windows-Computer ermitteln wir den IP-Docker des Computers. In der Regel ist dies http://192.168.99.100 .
Wir sehen, dass der Button Zufallszahl abrufen rechts angezeigt wird. Durch Klicken auf diese Schaltfläche greift die Webanwendung auf das Backend zu - führt die Anforderung http: // localhost / number aus und erhält von ihr eine Zufallszahl von 0 bis einschließlich 8. Diese Zahl wird verwendet, um einen Programm-Mausklick auf das Spielfeld auszuführen . Die Methode history.push wird aufgerufen. Auf dem Spielfeld wird ein Kreuz oder eine Null angezeigt. Wenn die Zelle bereits belegt ist, wird eine Besetztmeldung angezeigt.
Docker-Container
Kürzlich erschien ein wunderbarer Artikel über Docker und Docker-Compose für Anfänger im Hub . Hier werde ich nur auf Probleme im Zusammenhang mit unserem Projekt hinweisen. Betrachten Sie die Datei docker-compose.yml . Wir haben zwei Dienstleistungen: Nginx und Flasche .
docker-compose.yml:
version: "3.5" services: nginx: image: nginx:alpine container_name: nginx volumes: - ./front/public:/usr/share/nginx/html - ./default.conf:/etc/nginx/conf.d/default.conf:ro ports: - "80:80" depends_on: - flask networks: - backend flask: build: context: flask/ dockerfile: Dockerfile ports: - "5000:5000" volumes: - ./flask:/code environment: FLASK_ENV: development networks: - backend networks: backend: name: backend
Der Nginx- Dienst startet den Nginx -Webserver, unter dem unsere Webanwendung ausgeführt wird. Der Flask- Service startet den Flask- Server mit unserer kleinen Backend-Anwendung.
Frontend
Die Webanwendung wurde aus dem vorherigen Artikel übernommen und im vorderen Ordner abgelegt. Dem Projekt wurde eine weitere Dispatcher- Komponente hinzugefügt, die die Interaktion zwischen der Webanwendung und dem Backend koordiniert.
Dispatcher.svelte:
<script> import { history, status } from './stores.js'; import { Command } from './helpers.js'; let promise = null; async function getRandomNumber() { const res = await fetch(`number`); const text = await res.text(); if (res.ok) { let i = parseInt(text); if ($status === 1 || $history.state.squares[i]) return text + ' - busy'; history.push(new Command($history.state, i)); return text; } else { throw new Error(text); } } function handleClick() { promise = getRandomNumber(); } </script> {#if $status > 0} <button disabled> Get random number </button> {:else} <button on:click={handleClick}> Get random number </button> {/if} {#await promise} <p>...</p> {:then number} <p>Respond from backend: {number}</p> {:catch error} <p style="color: red">{error.message}</p> {/await}
Der Code stammt fast vollständig aus diesem Beispiel . Durch Klicken auf die Schaltfläche Zufallszahl abrufen in der Funktion getRandomNumber () wird eine Anforderung unter Verwendung des URI http: // localhost / number gestellt . Nginx leitet die Anforderung an das Backend weiter und gibt eine Zufallszahl zurück. Diese Nummer wird verwendet, um der Geschichte einen Schritt hinzuzufügen.
Sie können die Adresse http: // localhost / number in einem separaten Browser-Tab eingeben und sehen, dass auf Anfrage unterschiedliche Nummern zurückgegeben werden.
In den Einstellungen des nginx -Webservers wurde der Standardkonfigurationsdatei default.conf die folgende Einstellung hinzugefügt:
location /number { proxy_pass http://flask:5000; }
Dank dieser Einstellung wird die Backend-Anfrage an den Server übertragen.
Backend
Die Grundlage für die Konfiguration des Kolbendienstes finden Sie hier: https://docs.docker.com/compose/gettingstarted/ .
App.py:
from flask import Flask from random import randrange app = Flask(__name__) @app.route('/number') def number(): return str(randrange(9))
Wenn eine Anfrage an der Adresse / Nummer eintrifft, wird die Funktion number () aufgerufen. Der Code zeigt, dass eine Zufallszahl im Bereich von 0 bis einschließlich 8 zurückgegeben wird.
Fazit
In der Regel werden Nachrichten in Webanwendungen im JSON-Format gesendet. Aber so etwas kann man so schwer machen.
In den folgenden Artikeln ist es sinnvoll, die Implementierung einer Mehrbenutzer-Webanwendung in Betracht zu ziehen, wenn ein Spieler über einen gemeinsamen Webserver mit einem anderen Spieler spielt. Sie können die Option in Betracht ziehen, wenn der Player mit einem intelligenten Agenten bei der Implementierung der Anwendungslogik auf dem Server selbst und nicht in der Front-End-Anwendung spielt.
GitHub-Repository
https://github.com/nomhoi/tic-tac-toe-part4