تيك تاك تو الجزء 0: مقارنة Svelte والتفاعل
تيك تاك تو الجزء 1: Svelte و Canvas 2D
تيك تاك تو الجزء 2: عديمي الجنسية التراجع / الإعادة
تيك تاك تو ، الجزء 3: تراجع / الإعادة مع تخزين الأوامر
تيك تاك تو الجزء 4: التفاعل مع القارورة الخلفية باستخدام HTTP
في هذه المقالة ، سننظر في تفاعل تطبيق ويب Svelte من المقال السابق مع الواجهة الخلفية Flask باستخدام طلبات HTTP. اتضح أن رفع الحاوية مع تطبيق الواجهة الخلفية على Flask أسرع من Boost.Beast ، لذلك قدمت مثالاً مع Flask . لا تقلق ، فمثال Boost.Beast سيكون متأخراً بعض الشيء.
تركيب المشروع
من المفترض أن يتم تثبيت docker و docker-compose على الكمبيوتر.
نحن استنساخ المشروع على جهاز الكمبيوتر الخاص بك:
git clone https://github.com/nomhoi/tic-tac-toe-part4.git
حاويات الاطلاق:
cd tic-tac-toe-part4 docker-compose up -d
نحن نبني تطبيق الويب:
cd front npm install npm run-script build
افتح المتصفح على http: // localhost . على جهاز Windows ، اكتشف عامل إرساء IP الخاص بالجهاز ، وعادة ما يكون هذا هو http://192.168.99.100 .
نرى أن الزر الحصول على رقم عشوائي ظهر على اليمين. بالنقر على هذا الزر ، يصل تطبيق الويب إلى الواجهة الخلفية - ينفذ طلب http: // localhost / number ويتلقى منه رقمًا عشوائيًا من 0 إلى 8 شامل. يستخدم هذا الرقم لإجراء نقرة بالماوس في البرنامج في الملعب ، وتسمى طريقة history.push ، أو يظهر تقاطع أو صفر في حقل اللعب. إذا تم أخذ الخلية بالفعل ، تظهر رسالة مشغول .
حاويات قفص الاتهام
في الآونة الأخيرة ، ظهرت مقالة رائعة عن عامل الإرساء ورسو السفن للمبتدئين على المحور . هنا سأشير فقط إلى القضايا المتعلقة بمشروعنا. النظر في ملف عامل ميناء - compose.yml . لدينا خدمتان : nginx والقارورة .
عامل ميناء-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
تبدأ خدمة nginx خادم الويب nginx ، والذي يعمل بموجبه تطبيق الويب الخاص بنا. تبدأ خدمة الدورق بخادم Flask من خلال تطبيق الواجهة الخلفية الصغير الخاص بنا.
الواجهة
تم أخذ تطبيق الويب من المقالة السابقة ووضعه في المجلد الأمامي . تمت إضافة مكون مرسل آخر إلى المشروع ، والذي ينسق التفاعل بين تطبيق الويب والخلفية.
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}
الرمز مأخوذ بالكامل تقريبًا من هذا المثال . من خلال النقر على زر الحصول على رقم عشوائي في وظيفة getRandomNumber () ، يتم تقديم طلب باستخدام URI http: // localhost / number ، ويقوم nginx بتمرير الطلب إلى الواجهة الخلفية ، ويقوم بإرجاع رقم عشوائي. يستخدم هذا الرقم لإضافة خطوة إلى القصة.
يمكنك إدخال العنوان http: // localhost / number في علامة تبويب متصفح منفصلة ومعرفة أنه يتم إرجاع أرقام مختلفة عند الطلب.
في إعدادات خادم الويب nginx ، تمت إضافة الإعداد التالي إلى ملف التكوين default.conf الافتراضي:
location /number { proxy_pass http://flask:5000; }
بفضل هذا الإعداد ، يتم إرسال طلب الواجهة الخلفية إلى الخادم.
الخلفية
يتم أخذ أساس تكوين خدمة القارورة هنا: 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))
عندما يصل طلب إلى العنوان / الرقم ، يتم استدعاء الدالة number () . يُظهر الرمز أنه يتم إرجاع رقم عشوائي في النطاق من 0 إلى 8 ضمناً.
استنتاج
عادة ، يتم إرسال الرسائل في تطبيقات الويب بتنسيق JSON. ولكن مثل هذا الشيء الصعب يمكن القيام به بهذه الطريقة.
في المقالات التالية ، من المنطقي مراعاة تطبيق تطبيق ويب متعدد المستخدمين عندما يلعب لاعب مع لاعب آخر من خلال خادم ويب مشترك. يمكنك التفكير في الخيار عندما يلعب اللاعب مع وكيل ذكي مع تطبيق منطق التطبيق على الخادم نفسه ، وليس في تطبيق الواجهة الأمامية.
مستودع جيثب
https://github.com/nomhoi/tic-tac-toe-part4