Tic Tac Toe Parte 0: Comparar Svelte y React
Tic Tac Toe Parte 1: Svelte y Canvas 2D
Tic Tac Toe Parte 2: Deshacer / Rehacer sin estado
Tic Tac Toe, parte 3: Deshacer / Rehacer con almacenamiento de comandos
Tic Tac Toe Parte 4: Interactuar con el backend de Flask usando HTTP
En este artículo, consideraremos la interacción de una aplicación web Svelte del artículo anterior con el backend Flask usando solicitudes HTTP. Resultó que levantar un contenedor con una aplicación de fondo en Flask es más rápido que en Boost.Beast , así que hice un ejemplo con Flask . No se preocupe, el ejemplo de Boost.Beast será un poco más tarde.
Proyecto de instalacion
Se supone que docker y docker-compose están instalados en la computadora.
Clonamos el proyecto en su computadora:
git clone https://github.com/nomhoi/tic-tac-toe-part4.git
Lanzamiento de contenedores:
cd tic-tac-toe-part4 docker-compose up -d
Construimos la aplicación web:
cd front npm install npm run-script build
Abra el navegador en http: // localhost . En la máquina de Windows, descubrimos la ventana acoplable IP de la máquina, generalmente esta es http://192.168.99.100 .
Vemos que el botón Obtener número aleatorio apareció a la derecha. Al hacer clic en este botón, la aplicación web accede al backend: ejecuta la solicitud http: // localhost / number y recibe de ella un número aleatorio del 0 al 8 inclusive. Este número se utiliza para realizar un clic del mouse del programa en el campo de juego, se llama al método history.push , aparece una cruz o un cero en el campo de juego. Si la celda ya está ocupada , aparece un mensaje de ocupado .
Contenedores Docker
Recientemente, apareció en el centro un maravilloso artículo sobre docker y docker-compose para principiantes. Aquí solo señalaré cuestiones relacionadas con nuestro proyecto. Considere el archivo docker-compose.yml . Tenemos dos servicios: nginx y frasco .
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
El servicio nginx inicia el servidor web nginx , bajo el cual se ejecuta nuestra aplicación web. El servicio de matraz inicia el servidor Flask con nuestra pequeña aplicación de fondo.
Frontend
La aplicación web se tomó del artículo anterior y se colocó en la carpeta frontal . Se agregó otro componente Dispatcher al proyecto, que coordina la interacción entre la aplicación web y el 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}
El código se toma casi por completo de este ejemplo . Al hacer clic en el botón Obtener número aleatorio en la función getRandomNumber () , se realiza una solicitud utilizando el URI http: // localhost / number , nginx pasa la solicitud al backend y devuelve un número aleatorio. Este número se usa para agregar un paso a la historia.
Puede ingresar la dirección http: // localhost / number en una pestaña separada del navegador y ver que se devuelven diferentes números a pedido.
En la configuración del servidor web nginx , se agregó la siguiente configuración al archivo de configuración predeterminado default.conf :
location /number { proxy_pass http://flask:5000; }
Gracias a esta configuración, la solicitud de back-end se transmite al servidor.
Backend
La base para configurar el servicio de matraz se toma aquí: 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))
Cuando llega una solicitud a la dirección / número , se llama a la función number () . El código muestra que se devuelve un número aleatorio en el rango de 0 a 8 inclusive.
Conclusión
Por lo general, los mensajes en aplicaciones web se envían en formato JSON. Pero una cosa tan difícil se puede hacer de esta manera.
En los siguientes artículos, tiene sentido considerar la implementación de una aplicación web multiusuario cuando un jugador juega con otro jugador a través de un servidor web común. Puede considerar la opción cuando el jugador juega con un agente inteligente con la implementación de la lógica de la aplicación en el propio servidor, y no en la aplicación front-end.
Repositorio de GitHub
https://github.com/nomhoi/tic-tac-toe-part4