टिक टीएसी को पैर की अंगुली भाग 4: HTTP का उपयोग करके फ्लास्क बैकएंड के साथ बातचीत

टिक टीएसी को पैर की अंगुली भाग 0: तुलना सेवेल्ट और प्रतिक्रिया
टिक टीएसी को पैर की अंगुली भाग 1: स्वेलेट और कैनवस 2 डी
टिक टीएसी को पैर की अंगुली भाग 2: स्टेटलेस पूर्ववत करें / फिर से करें
टिक टीएसी को पैर की अंगुली, भाग 3: कमांड स्टोरेज के साथ पूर्ववत करें / फिर से करें
टिक टीएसी को पैर की अंगुली भाग 4: HTTP का उपयोग करके फ्लास्क बैकएंड के साथ बातचीत

इस लेख में, हम पिछले लेखों से HTTP अनुरोधों का उपयोग करते हुए फ्लास्क बैकएंड के साथ एक Svelte वेब एप्लिकेशन के इंटरैक्शन पर विचार करेंगे। यह पता चला है कि फ्लास्क पर बैकएंड एप्लिकेशन के साथ एक कंटेनर को ऊपर उठाना Boost.Beast की तुलना में तेज़ है , इसलिए मैंने फ्लास्क पर एक उदाहरण दिया। चिंता मत करो, 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 पर खोलें। विंडोज मशीन पर, हम मशीन के आईपी डॉकटर का पता लगाते हैं, आमतौर पर यह http://192.168.99.100 है ।

हम देखते हैं कि दाईं ओर बटन बटन यादृच्छिक संख्या दिखाई देती है। इस बटन पर क्लिक करके, वेब एप्लिकेशन बैकएंड तक पहुंचता है - अनुरोध http: // लोकलहोस्ट / नंबर निष्पादित करता है और इसे 0 से 8 समावेशी तक एक यादृच्छिक संख्या प्राप्त करता है। इस नंबर का उपयोग खेल के मैदान पर प्रोग्राम माउस क्लिक करने के लिए किया जाता है, इतिहास .push विधि को कहा जाता है, खेल मैदान पर एक क्रॉस या शून्य दिखाई देता है। यदि कक्ष पहले से ही लिया गया है, तो एक व्यस्त संदेश प्रकट होता है।

डॉकटर कंटेनर

हाल ही में, हब पर शुरुआती लोगों के लिए docker और docker-compose पर एक अद्भुत लेख दिखाई दिया। यहां मैं केवल हमारी परियोजना से संबंधित मुद्दों को इंगित करूंगा। Docker-compose.yml फ़ाइल पर विचार करें। हमारे पास दो सेवाएं हैं: नगनेक्स और फ्लास्क ।

डोकर-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 वेब सर्वर शुरू करती है, जिसके तहत हमारा वेब एप्लिकेशन चल रहा है। फ्लास्क सेवा हमारे छोटे बैकएंड एप्लिकेशन के साथ फ्लास्क सर्वर शुरू करती है।

दृश्यपटल

वेब एप्लिकेशन को पिछले लेख से लिया गया था और सामने वाले फ़ोल्डर में रखा गया था। एक अन्य डिस्पैचर घटक को परियोजना में जोड़ा गया था, जो वेब एप्लिकेशन और बैकएंड के बीच बातचीत का समन्वय करता है।

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(); } //setInterval(handleClick, 500); </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 / नंबर का उपयोग करके अनुरोध किया जाता है, nginx बैकएंड के लिए अनुरोध पारित करता है, और यह एक यादृच्छिक संख्या देता है। इस संख्या का उपयोग कहानी में एक कदम जोड़ने के लिए किया जाता है।
आप एक अलग ब्राउज़र टैब में पता http: // localhost / नंबर दर्ज कर सकते हैं और देख सकते हैं कि अनुरोध पर विभिन्न नंबर वापस आ गए हैं।

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)) 

जब एक पता / नंबर पर अनुरोध आता है, तो नंबर () फ़ंक्शन कहा जाता है। कोड से पता चलता है कि 0 से 8 तक की सीमा में एक यादृच्छिक संख्या वापस आ गई है।

निष्कर्ष

आमतौर पर, वेब एप्लिकेशन में संदेश JSON प्रारूप में भेजे जाते हैं। लेकिन इस तरह से एक मुश्किल काम किया जा सकता है।

निम्नलिखित लेखों में, एक बहु-उपयोगकर्ता वेब अनुप्रयोग के कार्यान्वयन पर विचार करना समझ में आता है जब एक खिलाड़ी किसी अन्य खिलाड़ी के साथ एक सामान्य वेब सर्वर के माध्यम से खेलता है। आप विकल्प पर विचार कर सकते हैं जब खिलाड़ी सर्वर पर एप्लिकेशन लॉजिक के कार्यान्वयन के साथ एक बुद्धिमान एजेंट के साथ खेलता है, और फ्रंट-एंड एप्लिकेशन में नहीं।

गिटहब भंडार

https://github.com/nomhoi/tic-tac-toe-part4