Tic Tac Toe Bagian 0: Membandingkan Langsing dan Bereaksi
Tic Tac Toe Bagian 1: Svelte dan Canvas 2D
Tic Tac Toe Bagian 2: Stateless Undo / Redo
Tic Tac Toe, bagian 3: Undo / Redo dengan penyimpanan perintah
Tic Tac Toe Bagian 4: Berinteraksi dengan Flask Backend Menggunakan HTTP
Pada artikel ini, kami akan mempertimbangkan interaksi aplikasi web Svelte dari artikel sebelumnya dengan backend Flask menggunakan permintaan HTTP. Ternyata menaikkan wadah dengan aplikasi backend pada Flask lebih cepat daripada di Boost.Beast , jadi saya membuat contoh dengan Flask . Jangan khawatir, contoh Boost.Beast akan sedikit kemudian.
Instalasi Proyek
Diasumsikan bahwa buruh pelabuhan dan pekerja menulis diinstal pada komputer.
Kami mengkloning proyek di komputer Anda:
git clone https://github.com/nomhoi/tic-tac-toe-part4.git
Luncurkan kontainer:
cd tic-tac-toe-part4 docker-compose up -d
Kami membangun aplikasi web:
cd front npm install npm run-script build
Buka browser di http: // localhost . Pada mesin Windows, kami menemukan buruh pelabuhan IP mesin, biasanya ini adalah http://192.168.99.100 .
Kami melihat bahwa tombol Dapatkan nomor acak muncul di sebelah kanan. Dengan mengklik tombol ini, aplikasi web mengakses backend - mengeksekusi permintaan http: // localhost / number dan menerima darinya nomor acak dari 0 hingga 8 inklusif. Nomor ini digunakan untuk melakukan klik program mouse di lapangan bermain, metode history.push disebut, tanda silang atau nol muncul di lapangan bermain. Jika sel sudah diambil, pesan yang sibuk muncul.
Wadah buruh pelabuhan
Baru-baru ini, sebuah artikel yang bagus tentang buruh pelabuhan dan buruh pelabuhan menulis untuk pemula muncul di hub . Di sini saya hanya akan menunjukkan masalah yang berkaitan dengan proyek kami. Pertimbangkan file docker-compose.yml . Kami memiliki dua layanan: nginx dan labu .
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
Layanan nginx memulai server web nginx , di mana aplikasi web kami berjalan. Layanan labu memulai server Labu dengan aplikasi backend kecil kami.
Frontend
Aplikasi web diambil dari artikel sebelumnya dan ditempatkan di folder depan . Komponen Dispatcher lain telah ditambahkan ke proyek, yang mengoordinasikan interaksi antara aplikasi web dan 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}
Kode hampir sepenuhnya diambil dari contoh ini . Dengan mengklik tombol Dapatkan nomor acak di fungsi getRandomNumber () , permintaan dibuat menggunakan URI http: // localhost / number , nginx meneruskan permintaan ke backend, dan mengembalikan nomor acak. Nomor ini digunakan untuk menambahkan langkah ke cerita.
Anda dapat memasukkan alamat http: // localhost / number di tab browser terpisah dan melihat bahwa nomor yang berbeda dikembalikan atas permintaan.
Dalam pengaturan server web nginx , pengaturan berikut telah ditambahkan ke file konfigurasi default default.conf :
location /number { proxy_pass http://flask:5000; }
Berkat pengaturan ini, permintaan backend dikirim ke server.
Backend
Dasar untuk mengkonfigurasi layanan labu diambil di sini: 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))
Ketika permintaan tiba di alamat / nomor , fungsi number () dipanggil. Kode menunjukkan bahwa angka acak dikembalikan dalam kisaran dari 0 hingga 8 inklusif.
Kesimpulan
Biasanya, pesan dalam aplikasi web dikirim dalam format JSON. Tetapi hal yang sulit dapat dilakukan dengan cara ini.
Dalam artikel berikut, masuk akal untuk mempertimbangkan penerapan aplikasi web multi-pengguna ketika satu pemain bermain dengan pemain lain melalui server web umum. Anda dapat mempertimbangkan opsi ketika pemain bermain dengan agen cerdas dengan penerapan logika aplikasi di server itu sendiri, dan bukan di aplikasi front-end.
Repositori GitHub
https://github.com/nomhoi/tic-tac-toe-part4