عرض البيانات المتدفقة من طريقة عرض القارورة أثناء تحديثها

مقدمة

في تطبيقات Flask، غالبًا ما يكون من المرغوب عرضه البيانات التي يتم إنشاؤها أو تحديثها في الوقت الحقيقي. على الرغم من أن Flask يحتوي على دعم مدمج للاستجابات المتدفقة، إلا أن دمج هذه البيانات في قالب HTML قد يكون أمرًا صعبًا. تستكشف هذه المقالة كيفية تحديث البيانات وتنسيقها وعرضها ديناميكيًا أثناء تدفقها إلى الصفحة.

دفق البيانات في Flask

لتدفق البيانات في Flask، عليك يمكن استخدام المولد كرد على الطريق. في كل مرة يتم تكرار الاستجابة، ينتج المولد جزءًا من البيانات للعميل. على سبيل المثال:

@app.route('/') فهرس التعريف (): مواطن الداخلية (): لأني في النطاق (500): # محاكاة عملية طويلة للمشاهدة ي = math.sqrt(i) وقت النوم(1) # يجب إدراج هذه القيمة في قالب HTML العائد str(i) '
\n' return flask.Response(inner(), mimetype='text/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.

التعامل مع البيانات المتدفقة في JavaScript

بينما يدعم Flask الاستجابات المتدفقة، يتم عرض قوالب HTML مرة واحدة على جانب الخادم ولا يمكن تحديثه ديناميكيًا. للتعامل مع البيانات المتدفقة في المتصفح، يمكنك استخدام JavaScript لتقديم طلب إلى نقطة النهاية ومعالجة البيانات المتدفقة عند وصولها.

تتمثل إحدى الطرق في استخدام كائن XMLHttpRequest (XHR) لإنشاء طلب إلى نقطة نهاية التدفق. يمكنك بعد ذلك قراءة البيانات من الرد بشكل دوري حتى اكتمالها. إليك مثال:

var xhr = new XMLHttpRequest(); xhr.open('GET', '{{ url_for('stream') }}'); xhr.send(); موضع فار = 0; مقبض الوظيفةNewData() { // يتضمن نص الرد الاستجابة بأكملها حتى الآن // قم بتقسيم الرسائل، ثم خذ الرسائل التي لم يتم التعامل معها بعد // يتتبع الموضع عدد الرسائل التي تم التعامل معها // تنتهي الرسائل بسطر جديد، لذا سيُظهر القسم دائمًا رسالة فارغة إضافية في النهاية رسائل فار = xhr.responseText.split('\n'); messages.slice(position, -1).forEach(function(value) { // قم بتحديث البيانات المعروضة باستخدام JavaScript last.textContent = value; // قم بتحديث أحدث قيمة موجودة // إلحاق القيمة الحالية بالقائمة لتسجيل جميع المخرجات var item = document.createElement('li'); item.textContent = value; input.appendChild(item); }); الموضع = الرسائل. الطول - 1؛ } // التحقق من وجود بيانات جديدة بشكل دوري مؤقت فار؛ الموقت = setInterval (وظيفة () { // التحقق من الاستجابة للبيانات الجديدة HandleNewData(); // توقف عن التحقق بمجرد انتهاء الاستجابة إذا (xhr.readyState == XMLHttpRequest.DONE) { ClearInterval(timer); last.textContent = 'تم'; } }, 1000);

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

يستخدم كود JavaScript هذا كائن XMLHttpRequest لإنشاء طلب إلى نقطة نهاية الدفق. ثم يقوم بعد ذلك بإعداد مؤقت للتحقق بشكل دوري من البيانات الجديدة وتحديث الصفحة وفقًا لذلك.

استخدام iframe لمخرجات HTML المتدفقة

طريقة أخرى لعرض البيانات المتدفقة من طريقة عرض القارورة هي استخدام iframe. iframe هو مستند منفصل يمكن استخدامه لعرض مخرجات HTML المتدفقة. إليك مثال:

@app.route('/stream') تيار محدد (): @stream_with_context إنشاء مواطن (): # خدمة CSS الأولية لتصميم iframe العائد render_template_string('') # دفق محتوى HTML بشكل مستمر داخل إطار iframe لأني في النطاق (500): العائد render_template_string('

{{ i }}: {{ s }}

\n', i=i, s=sqrt(i)) النوم(1) إرجاع app.response_class(generate())

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

هذا هو كل الناتج:

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

يستخدم هذا الكود مصمم Stream_with_context لتحسين المولد لدعم وظائف إضافية. إنه يخدم CSS الأولي لتصميم iframe ويتدفق محتوى HTML بشكل مستمر داخل iframe. يمكن أن يكون قالب HTML الموجود في iframe أكثر تعقيدًا ويمكن أن يتضمن تنسيقات مختلفة حسب الحاجة.