Real-Time Data Streaming with Python Flask and Quasar Framework - Incentius Blog Home - Incentius - Enable Digital Transformation [![Logo](/img_astro/incentius-logo.svg)](/) Solutions About [Case Studies](/portfolio/) [Blogs](/blog-posts/) [Career](http://aurochs.freshteam.com/jobs) Open main menu ![Menu icon](/img_astro/menu1.png) [Get In Touch](/contact/) Solutions [![](/img_astro/generative-black.svg) ![](/img_astro/brain-green.svg) Voice AI](/voice-ai/) [![](/img_astro/product-development-black.svg) ![](/img_astro/product-development.svg) Product Development](/product-engineering/) [![](/img_astro/generative-black.svg) ![](/img_astro/brain-green.svg) Generative AI](/generative-ai/) [![](/img_astro/data-black.svg) ![](/img_astro/database-green.svg) Data Engineering](/data-engineering/) [![](/img_astro/mvp-black.svg) ![](/img_astro/rocket-green.svg) Data & Analytics](/data-analytics/) [![](/img_astro/cloud-black.svg) ![](/img_astro/computing-green.svg) DevOps & CloudOps](/devops-and-cloudops/) About Us [![](/img_astro/product-black.svg) ![](/img_astro/product-green.svg) About Us](/about-us/) [![](/img_astro/team_black.svg) ![](/img_astro/team_green.svg) Team](/team/) Solutions ![](/img_astro/dropdown-arr.svg) [ ![](/img_astro/generative-black.svg) Voice AI ](/voice-ai/)[ ![](/img_astro/product-development-black.svg) Product Development ](/product-engineering/)[ ![](/img_astro/generative-black.svg) Generative AI ](/generative-ai/)[ ![](/img_astro/data-black.svg) Data Engineering ](/data-engineering/)[ ![](/img_astro/mvp-black.svg) Data & Analytics ](/data-analytics/)[ ![](/img_astro/cloud-black.svg) DevOps & CloudOps ](/devops-and-cloudops/) [Blogs](/blog-posts/) About ![](/img_astro/dropdown-arr.svg) [ ![](/img_astro/product-black.svg) About Us ](/about-us/)[ ![](/img_astro/team_black.svg) Team ](/team/) [Case Studies](/portfolio/) [Career](http://aurochs.freshteam.com/jobs) [Get In Touch](/contact/) Real-Time Data Streaming with Python Flask and Quasar Framework Yash Pukale 1. Dec 23, 2024 2. 4 min read ![](/_astro/19199402.width-1000_h5CJL.webp) Implementing real-time data streaming from a server to a client can be challenging, especially when working with APIs that return data in chunks. Let me share a story of how I tackled this problem while using Python Flask for the backend and Vue.js with the Quasar framework for the frontend. It was a journey filled with trials, errors, and some exciting discoveries. #### **The Challenge** It all started with a requirement: stream data from an API that sends responses in chunks. The goal was to dynamically append each chunk to a variable on the frontend and display it live. Initially, I turned to Axios for the AJAX call, but it didn’t handle data streaming well. That’s when I switched to JavaScript’s fetch API, which supports response.body.getReader() for handling streamed responses. #### **Backend: Flask Route** On the backend, I used Flask and the requests library to make a streaming call to an external API. Here’s how the route looked: ``` @app.route('/api/stream', methods=['POST']) def stream(): import requests url = "<>" api_key = "<>" headers = {"Authorization": f"Bearer {api_key}"} params = {} def generate(): try: with requests.get(url, headers=headers, stream=True, json=params, timeout=30) as r: r.raise_for_status() for chunk in r.iter_content(chunk_size=8192): if chunk: yield chunk.decode('utf-8', errors='ignore') except requests.exceptions.ChunkedEncodingError as e: yield "Something went wrong. Please try again later" return flask.Response(generate(), content_type='text/plain') ``` his route streams the data from the external API to the client without waiting for the entire response to arrive. Flask is a lightweight Python web framework, ideal for such quick setups. #### **Frontend: Vue.js with Fetch API** On the frontend, I replaced Axios with the fetch API. Here’s the Vue.js method I used: ``` async fetchStream() { const url = "/api/stream"; this.error_message = ""; // Clear previous error message this.chunks = ''; // Clear previous chunks try { const response = await fetch(url, { method: "POST", headers: { "Content-Type": "application/json", }, credentials: 'include', body: JSON.stringify({<< DATA >>}), }); const reader = response.body.getReader(); const decoder = new TextDecoder("utf-8"); while (true) { const { done, value } = await reader.read(); if (done) { break; } const text_chunk = decoder.decode(value, { stream: true }); this.chunks += text_chunk; } } catch (error) { this.error_message = error.message; this.$q.notify({ message: this.error_message || 'Error Occurred', color: 'negative', icon: 'warning', }); } }, ``` This method reads the streamed response in chunks and updates the UI dynamically. Vue.js, combined with Quasar’s rich component library, makes such real-time updates seamless. #### **Proxy Configuration for Development** In development, I needed the Quasar dev server to forward API requests to the Flask backend. For this, I configured a proxy in quasar.config.js: ``` devServer: { proxy: { '/api': { target: 'http://localhost:5000', changeOrigin: true, }, }, } ``` Quasar devServer is a configuration option that simplifies development by proxying requests to the backend, avoiding CORS issues. #### **The Deployment Hurdle** When I deployed the application, a new challenge emerged. NGINX, which handled incoming requests, buffered the response and returned it all at once instead of streaming it. NGINX is a powerful web server and reverse proxy, but its default behavior is to buffer responses, which clashed with the real-time streaming requirement. #### **The Solution: NGINX Configuration** To fix this, I updated the NGINX configuration to disable buffering and enable chunked transfer encoding: ``` location /api { proxy_pass http://127.0.0.1:5000; proxy_http_version 1.1; proxy_set_header Connection ""; proxy_buffering off; # Disable proxy buffering chunked_transfer_encoding on; # Enable chunked transfer } ``` With this configuration, NGINX streamed the data as expected. This small tweak ensured that the real-time experience worked perfectly. #### **Alternative Approaches** During my research, I explored other techniques like Long Polling and Server-Sent Events (SSE). SSE, for instance, is a protocol for streaming events from a server to a client, but it works best with GET requests. My use case required sending data to the backend, making SSE less suitable. #### **Key Takeaways** * Use the fetch API for real-time data streaming as it supports response.body.getReader(). * Configure NGINX to disable buffering and enable chunked transfer encoding for seamless streaming. * Choose the right approach (e.g., SSE, WebSockets) based on your requirements. This journey was an enlightening experience, reinforcing the importance of understanding both backend and frontend configurations for implementing real-time features. I hope this story inspires and helps you tackle similar challenges in your projects! About Author ![](/_astro/yash.width-300_frHNF.webp) Yash Pukale ![](/img_astro/thumb.png) ### See What Our Clients Say ![](/img_astro/left-chevron_1.svg) ![](/img_astro/left-chevron_2.svg) ![](/img_astro/mind-gap-crop.svg) Mindgap Incentius has been a fantastic partner for us. Their strong expertise in technology helped deliver some complex solutions for our customers within challenging timelines. Specific call out to Sujeet and his team who developed custom sales analytics dashboards in SFDC for a SoCal based healthcare diagnostics client of ours. Their professionalism, expertise, and flexibility to adjust to client needs were greatly appreciated. MindGap is excited to continue to work with Incentius and add value to our customers. Samik Banerjee Founder & CEO ![](/img_astro/trusted-by-businesses/worldatwork_coloured.webp) World at Work Having worked so closely for half a year on our website project, I wanted to thank Incentius for all your fantastic work and efforts that helped us deliver a truly valuable experience to our WorldatWork members. I am in awe of the skills, passion, patience, and above all, the ownership that you brought to this project every day! I do not say this lightly, but we would not have been able to deliver a flawless product, but for you. I am sure you'll help many organizations and projects as your skills and professionalism are truly amazing. Shantanu Bayaskar Senior Project Manager ![](/img_astro/trusted-by-businesses/gogla_coloured.webp) Gogla It was a pleasure working with Incentius to build a data collection platform for the off-grid solar sector in India. It is rare to find a team with a combination of good understanding of business as well as great technological know-how. Incentius team has this perfect combination, especially their technical expertise is much appreciated. We had a fantastic time working with their expert team, especially with Amit. Viraj gada Gogla ![](/img_astro/trusted-by-businesses/humblex_coloured.webp) Humblx Choosing Incentius to work with is one of the decisions we are extremely happy with. It's been a pleasure working with their team. They have been tremendously helpful and efficient through the intense development cycle that we went through recently. The team at Incentius is truly agile and open to a discussion in regards to making tweaks and adding features that may add value to the overall solution. We found them willing to go the extra mile for us and it felt like working with someone who rooted for us to win. Samir Dayal Singh CEO Humblx ![](/img_astro/mind-gap-crop.svg) Transportation & Logistics Consulting Organization Incentius is very flexible and accommodating to our specific needs as an organization. In a world where approaches and strategies are constantly changing, it is invaluable to have an outsourcer who is able to adjust quickly to shifts in the business environment. Transportation & Logistics Consulting Organization Consultant ![]() Mudraksh & McShaw Incentius was instrumental in bringing the visualization aspect into our investment and trading business. They helped us organize our trading algorithms processing framework, review our backtests and analyze results in an efficient, visual manner. Priyank Dutt Dwivedi Mudraksh & McShaw Advisory ![](/img_astro/mind-gap-crop.svg) Leading Healthcare Consulting Organization The Incentius resource was highly motivated and developed a complex forecasting model with minimal supervision. He was thorough with quality checks and kept on top of multiple changes. Leading Healthcare Consulting Organization Sr. Principal ![](/img_astro/mind-gap-crop.svg) US Fortune 100 Telecommunications Company The Incentius resource was highly motivated and developed a complex forecasting model with minimal supervision. He was thorough with quality checks and kept on top of multiple changes. Incentive Compensation Sr. Director Most Read [ ![](/_astro/ChatGPT_Image_Apr_2_2025_12_06_35_PM.width-1000_ZUChn3.webp) Optimizing Large-Scale Data Exports: FastAPI, GraphQL, and AWS S3 Struggling with slow, inefficient file downloads in your application? Generating and handling large file downloads can be a nightmare—UI freezing, server overload, and endless waiting. ![](/_astro/Vinay_Chaudhari.width-300_1QPJnB.webp) Vinay Chaudhari 1. Apr 08, 2025 2. 4 min read ](/blog-posts/optimizing-large-scale-data-exports-fastapi-graphql-and-aws-s3/)[ ![](/_astro/Screenshot_2025-04-02_at_12.09.33_PM.width-1000_ZyU6y1.webp) How to Build a Web Search Agent with Phidata: A Step-by-Step Guide Phidata is an **open-source framework** for building AI agents with capabilities like memory, tool use, and reasoning​ It’s model-agnostic and supports various large language models (LLMs), allowing developers to turn any LLM (like OpenAI GPT or local models) into a functional **search agent**. ![](/_astro/Kartik_Puri.width-300_1YNCyp.webp) Kartik Puri 1. Apr 02, 2025 2. 4 min read ](/blog-posts/how-to-build-a-web-search-agent-with-phidata-a-step-by-step-guide/)[ ![](/_astro/e20f5335-cbf6-414c-a096-7d2849109cff.width-1000_15DfBS.webp) Migrating to Soketi: Improving Our Real- Time Communication Architecture Our journey with real-time data communication has evolved significantly. Initially using Flask-SocketIO with Vue, we faced several challenges that led us to seek a more robust solution. ![](/_astro/pratik.width-300_Z2vB9eu.webp) Pratik Patel 1. Mar 17, 2025 2. 4 min read ](/blog-posts/migrating-to-soketi-improving-our-real-time-communication-architecture/)[ ![](/_astro/startup-employee-looking-business-charts-usin.width-1000_2knrAp.webp) Understanding AI Agents: A Comprehensive Guide to AI Agentic Workflows In the rapidly evolving landscape of artificial intelligence, AI Agents have emerged as a transformative technology that represents far more than just industry jargon. ![](/_astro/chetan_piucv.width-300_ZK3Vor.webp) Chetan Patel 1. Feb 28, 2025 2. 4 min read ](/blog-posts/understanding-ai-agents-a-comprehensive-guide-to-ai-agentic-workflows/) ## We use cookies We use cookies to improve site. Some cookies are necessary for our website and services to function properly. Other cookies are optional and help personalize your experience, including advertising and analytics.You can consent to all cookies or decline all optional cookies. Without a selection, our default cookie settings will apply. I agree I decline [![logo](/img_astro/logo.svg)](/) Incentius is a technology and professional services company providing analytics, operations and product engineering services. [![facebook](/img_astro/facebook.svg)](https://www.facebook.com/Incentius/)[![twitter](/img_astro/twitter.svg) ](https://x.com/incentius/)[![linkedin](/img_astro/linkedin.svg)](https://www.linkedin.com/company/incentius/posts/?feedView=all) ![location](/img_astro/pin.svg) Office No.201B, 2nd Floor, Beta-1, Giga Space IT Park, Viman Nagar, Pune - 411014, Maharashtra, India ![email](/img_astro/message-icon.svg) info@incentius.com ![phone](/img_astro/telephone.svg) +1 (302) 415 3208 ![](/img_astro/secure-footer.svg) ![](/img_astro/secure-footer-mobile.svg) * Solutions * [Voice AI](/voice-ai/) * [Generative AI](/generative-ai/) * [Data Engineering](/data-engineering/) * [Product Development](/product-engineering/) * [Data & Analytics](/data-analytics/) * [DevOps & CloudOps](/devops-and-cloudops/) * [UI/UX Design](/ui-ux-design/) * Recent Blog * [Medallion Architecture in Practice: Six Layers, One Source of Truth](/blog-posts/medallion-architecture-in-practice-six-layers-one-source-of-truth/) * ["Document later" is how teams say "document never"](/blog-posts/document-later-is-how-teams-say-document-never/) * [Your Business & AI - What It Actually Means for You](/blog-posts/your-business-ai-what-it-actually-means-for-you/) * [How Internal Agent-Built Software Reduced Our SaaS Dependency](/blog-posts/how-internal-agent-built-software-reduced-our-saas-dependency/) * [MarkItDown: A Powerful Utility for File Conversion to Markdown](/blog-posts/markitdown-a-powerful-utility-for-file-conversion-to-markdown/) * [Python 3.14: A Game-Changing Release for Modern Development](/blog-posts/python-314-a-game-changing-release-for-modern-development/) * [Building a RESTful Blog API with Flask and Swagger: A Complete Guide to Streamlined API Development](/blog-posts/building-a-restful-blog-api-with-flask-and-swagger-a-complete-guide-to-streamlined-api-development/) * [Tailwind CSS 4.0 vs 3.x: What Changed and How We Implemented It](/blog-posts/tailwind-css-40-vs-3x-what-changed-and-how-we-implemented-it/) * [The Future of AI: What to Expect in the Next 5 Years](/blog-posts/the-future-of-ai-what-to-expect-in-the-next-5-years/) * Menu * [About](/about-us/) * [Blog](/blog-posts/) * [Career](http://aurochs.freshteam.com/jobs) * [Case Studies](/portfolio/) * [For Startups](/startups/) * [Let's Talk](/contact/) © Copyright 2025 Incentius [Request Site](/) [Terms and Conditions](/) [Privacy Policy](/privacy-policy/)