फ्लास्क व्यू से स्ट्रीम किए गए डेटा को अपडेट होने पर प्रदर्शित करना

परिचय

फ्लास्क अनुप्रयोगों में, इसे प्रदर्शित करना अक्सर वांछनीय होता है वह डेटा जो वास्तविक समय में उत्पन्न या अद्यतन किया जाता है। जबकि फ्लास्क में स्ट्रीमिंग प्रतिक्रियाओं के लिए अंतर्निहित समर्थन है, इस डेटा को HTML टेम्पलेट में शामिल करना चुनौतीपूर्ण हो सकता है। यह आलेख बताता है कि पेज पर स्ट्रीम होने पर डेटा को गतिशील रूप से कैसे अद्यतन, प्रारूपित और प्रदर्शित किया जाए।

फ्लास्क में डेटा स्ट्रीम करना

फ्लास्क में डेटा स्ट्रीम करने के लिए, आप किसी मार्ग की प्रतिक्रिया के रूप में जनरेटर का उपयोग कर सकते हैं। हर बार जब प्रतिक्रिया दोहराई जाती है, तो जनरेटर क्लाइंट को डेटा का एक हिस्सा देता है। उदाहरण के लिए:

@app.route('/')
def index():
    def inner():
        for i in range(500):
            # simulate a long process to watch
            j = math.sqrt(i)
            time.sleep(1)
            # this value should be inserted into an HTML template
            yield str(i)   '
\n'
    return flask.Response(inner(), mimetype='text/html')

यह कोड एक लंबी चलने वाली प्रक्रिया का अनुकरण करता है जो हर सेकंड मान उत्पन्न करता है। फिर इन मानों को HTML फ़्रैगमेंट के रूप में प्रतिक्रिया में स्ट्रीम किया जाता है। और गतिशील रूप से अद्यतन नहीं किया जा सकता. ब्राउज़र में स्ट्रीम किए गए डेटा को संभालने के लिए, आप एंडपॉइंट पर अनुरोध करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं और स्ट्रीम किए गए डेटा के आने पर उसे संसाधित कर सकते हैं।

अनुरोध बनाने के लिए एक दृष्टिकोण XMLHttpRequest (XHR) ऑब्जेक्ट का उपयोग करना है स्ट्रीमिंग समापन बिंदु. फिर आप प्रतिक्रिया से डेटा पूरा होने तक पढ़ सकते हैं। यहाँ एक उदाहरण है:var xhr = new XMLHttpRequest(); xhr.open('GET', '{{url_for('stream') }}'); xhr.भेजें(); वर स्थिति = 0; फ़ंक्शन हैंडलन्यूडेटा() { // प्रतिक्रिया पाठ में अब तक की संपूर्ण प्रतिक्रिया शामिल है // संदेशों को विभाजित करें, फिर उन संदेशों को लें जिन्हें अभी तक संभाला नहीं गया है // स्थिति ट्रैक करती है कि कितने संदेशों को संभाला गया है // संदेश एक नई लाइन के साथ समाप्त होते हैं, इसलिए स्प्लिट हमेशा अंत में एक अतिरिक्त खाली संदेश दिखाएगा var संदेश = xhr.responseText.split('\n'); messages.slice(स्थिति, -1).forEach(function(value) { // जावास्क्रिप्ट का उपयोग करके प्रदर्शित डेटा को अपडेट करें नवीनतम.textContent = मूल्य; // स्थान पर नवीनतम मान अद्यतन करें // सभी आउटपुट को लॉग करने के लिए वर्तमान मान को एक सूची में जोड़ें var आइटम = document.createElement('li'); आइटम.टेक्स्टकंटेंट = मान; आउटपुट.एपेंड चाइल्ड(आइटम); }); स्थिति = संदेश.लंबाई - 1; } // समय-समय पर नए डेटा की जांच करें वर टाइमर; टाइमर = सेटइंटरवल(फ़ंक्शन() { // नए डेटा के लिए प्रतिक्रिया की जाँच करें हैंडलन्यूडेटा(); // प्रतिक्रिया समाप्त होने के बाद जाँच करना बंद कर दें यदि (xhr.readyState == XMLHttpRequest.DONE) { क्लियरइंटरवल(टाइमर); नवीनतम.textContent = 'संपन्न'; } }, 1000);

यह जावास्क्रिप्ट कोड स्ट्रीमिंग एंडपॉइंट के लिए अनुरोध बनाने के लिए XMLHttpRequest ऑब्जेक्ट का उपयोग करता है। इसके बाद यह समय-समय पर नए डेटा की जांच करने और उसके अनुसार पेज को अपडेट करने के लिए एक टाइमर सेट करता है। फ्लास्क दृश्य एक आईफ्रेम का उपयोग करना है। आईफ़्रेम एक अलग दस्तावेज़ है जिसका उपयोग स्ट्रीम किए गए HTML आउटपुट को प्रदर्शित करने के लिए किया जा सकता है। यहां एक उदाहरण है:

@app.route('/stream') डीईएफ़ स्ट्रीम(): @stream_with_context डीईएफ़ उत्पन्न(): # आईफ्रेम को स्टाइल करने के लिए प्रारंभिक सीएसएस परोसें उपज रेंडर_टेम्पलेट_स्ट्रिंग('') # HTML सामग्री को iframe के भीतर लगातार स्ट्रीम करें मेरे लिए रेंज में (500): उपज रेंडर_टेम्पलेट_स्ट्रिंग('

{{ i }}: {{ s }}

var xhr = new XMLHttpRequest();
xhr.open('GET', '{{ url_for('stream') }}');
xhr.send();
var position = 0;

function handleNewData() {
    // the response text includes the entire response so far
    // split the messages, then take the messages that haven't been handled yet
    // position tracks how many messages have been handled
    // messages end with a newline, so split will always show one extra empty message at the end
    var messages = xhr.responseText.split('\n');
    messages.slice(position, -1).forEach(function(value) {
        // Update the displayed data using JavaScript
        latest.textContent = value;  // update the latest value in place
        // Append the current value to a list to log all output
        var item = document.createElement('li');
        item.textContent = value;
        output.appendChild(item);
    });
    position = messages.length - 1;
}

// Check for new data periodically
var timer;
timer = setInterval(function() {
    // check the response for new data
    handleNewData();
    // stop checking once the response has ended
    if (xhr.readyState == XMLHttpRequest.DONE) {
        clearInterval(timer);
        latest.textContent = 'Done';
    }
}, 1000);

यह कोड अतिरिक्त कार्यक्षमता का समर्थन करने के लिए जनरेटर को बढ़ाने के लिए स्ट्रीम_विथ_कॉन्टेक्स्ट डेकोरेटर का उपयोग करता है। यह आईफ्रेम को स्टाइल करने के लिए प्रारंभिक सीएसएस प्रदान करता है और आईफ्रेम के भीतर HTML सामग्री को लगातार स्ट्रीम करता है। आईफ़्रेम में HTML टेम्प्लेट अधिक जटिल हो सकता है और आवश्यकतानुसार विभिन्न स्वरूपण शामिल कर सकता है।