Tic Tac Toe Partie 0: Comparaison de Svelte et React
Tic Tac Toe Partie 1: Svelte et Canvas 2D
Tic Tac Toe Partie 2: Annuler / Rétablir sans état
Tic Tac Toe, partie 3: Annuler / Rétablir avec stockage des commandes
Tic Tac Toe Partie 4: Interaction avec le backend Flask en utilisant HTTP
Dans cet article, nous considérerons l'interaction d'une application Web Svelte de l' article précédent avec le backend Flask à l'aide de requêtes HTTP. Il s'est avéré que monter un conteneur avec une application backend sur Flask est plus rapide que sur Boost.Beast , j'ai donc fait un exemple avec Flask . Ne vous inquiétez pas, l'exemple Boost.Beast sera un peu plus tard.
Installation du projet
Il est supposé que docker et docker-compose sont installés sur l'ordinateur.
Nous clonons le projet sur votre ordinateur:
git clone https://github.com/nomhoi/tic-tac-toe-part4.git
Lancement de conteneurs:
cd tic-tac-toe-part4 docker-compose up -d
Nous construisons l'application web:
cd front npm install npm run-script build
Ouvrez le navigateur à http: // localhost . Sur la machine Windows, nous découvrons le docker IP de la machine, généralement il s'agit de http://192.168.99.100 .
Nous voyons que le bouton Obtenir un nombre aléatoire est apparu à droite. En cliquant sur ce bouton, l'application web accède au backend - exécute la requête http: // localhost / number et en reçoit un nombre aléatoire de 0 à 8 inclus. Ce numéro est utilisé pour effectuer un programme avec un clic de souris sur le terrain de jeu, la méthode history.push est appelée, une croix ou un zéro apparaît sur le terrain de jeu. Si la cellule est déjà prise, un message occupé apparaît.
Conteneurs Docker
Récemment, un merveilleux article sur le docker et le docker-compose pour les débutants est apparu sur le hub . Ici, je ne signalerai que les problèmes liés à notre projet. Considérez le fichier docker-compose.yml . Nous avons deux services: nginx et flask .
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
Le service nginx démarre le serveur Web nginx , sous lequel notre application Web s'exécute. Le service flask démarre le serveur Flask avec notre petite application backend.
Frontend
L'application Web est extraite de l' article précédent et placée dans le dossier avant . Un autre composant Dispatcher a été ajouté au projet, qui coordonne l'interaction entre l'application Web et le backend.
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}
Le code est presque entièrement extrait de cet exemple . En cliquant sur le bouton Obtenir un nombre aléatoire dans la fonction getRandomNumber () , une demande est effectuée à l'aide de l'URI http: // localhost / number , nginx transmet la demande au serveur principal et renvoie un nombre aléatoire. Ce numéro est utilisé pour ajouter une étape à l'histoire.
Vous pouvez entrer l'adresse http: // localhost / number dans un onglet de navigateur séparé et voir que différents numéros sont retournés sur demande.
Dans les paramètres du serveur Web nginx , le paramètre suivant a été ajouté au fichier de configuration par défaut default.conf :
location /number { proxy_pass http://flask:5000; }
Grâce à ce paramètre, la requête backend est transmise au serveur.
Backend
La base de configuration du service de flacon est prise ici: 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))
Lorsqu'une demande arrive à l'adresse / au numéro , la fonction number () est appelée. Le code montre qu'un nombre aléatoire est retourné dans la plage de 0 à 8 inclus.
Conclusion
En règle générale, les messages des applications Web sont envoyés au format JSON. Mais une chose aussi difficile peut être faite de cette façon.
Dans les articles suivants, il est logique d'envisager la mise en œuvre d'une application Web multi-utilisateurs lorsqu'un joueur joue avec un autre joueur via un serveur Web commun. Vous pouvez envisager l'option lorsque le joueur joue avec un agent intelligent avec la mise en œuvre de la logique d'application sur le serveur lui-même, et non dans l'application frontale.
Dépôt GitHub
https://github.com/nomhoi/tic-tac-toe-part4