How to run DASH in async with asyncio - plotly-dash

Question

Has anyone successfully manage running a Dash app using aysncio for Python?
Any examples greatly appreciated.
I have been digging deep into the event loop, co-routines and tasks in asyncio.
Essentially I want to do this:
main_loop()
1. ASYNC - Collect data from web (async call / avoid blocking)
2. ASYNC - Process data (when data is collected from task1)
3. ASYNC - Update data (when data processed from task2)
4. Display Data using Dash (this should be running constantly of status task 1,2 and 3)
So - how to communicate between tasks, and run the Display (DASH) seperately?
Ideas:
- 2 event loops
- Two thread?
Issues:
- How to communicate between tasks
- How to run the DASH app the whole time whilst the event_loop above also repeats forever / until interrupted (i.e. getData, ProcessData, UpdateDashDisplay...)

Answer 1

I have faced similar requirement where I want to run dash and its callbacks asynchronously. So I created this library called async-dash. With this you can use truly asynchronous callbacks as well as web sockets, SSE, etc.
Example:
import asyncio
from async_dash import Dash
from dash import html, Output, Input, dcc, callback
app = Dash(__name__)
app.layout = ...
#callback(...)
async def create_dashboard(...):
await fetch_data()
result await process_data()
return result
if __name__ == "__main__":
app.run_server()
PS: Don't use it for production (just yet!).

Answer 2

Dash App in Async ->
Please refer to:
Asyncio run Dash (Flask) server with another coroutine concurrently
from flask import Flask, jsonify
import asyncio
from threading import Thread
# Dash
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import requests
import plotly.graph_objects as go
# ** Async Part **
async def some_print_task():
"""Some async function"""
while True:
await asyncio.sleep(2)
print("Some Task")
async def another_task():
"""Another async function"""
while True:
await asyncio.sleep(3)
print("Another Task")
async def async_main():
"""Main async function"""
await asyncio.gather(some_print_task(), another_task())
def async_main_wrapper():
"""Not async Wrapper around async_main to run it as target function of Thread"""
asyncio.run(async_main())
# *** Dash Part ***:
app = dash.Dash()
app.layout = html.Div([
# html.Div([
# html.Iframe(src="https://www.flightradar24.com",
# height=500,width=200)
# ]),
html.Div([
html.Pre(id='counter-text',children='Active Flights Worldwide'),
dcc.Graph(id='live-update-graph',style={'width':1200}),
dcc.Interval( id='interval-component',
interval=6000,
n_intervals=0)
])
])
counter_list = []
#app.callback( Output('counter-text','children'),
[Input('interval-component','n_intervals')])
def update_layout(n):
url = "https://data-live.flightradar24.com/zones/fcgi/feed.js?faa=1&mlat=1&flarm=1&adsb=1&gnd=1&air=1&vehicles=1&estimated=1&stats=1"
res = requests.get(url, headers={'User-Agent' : 'Mozilla/5.0'}) # A fake header is necessary to access the site
data = res.json()
counter = 0
for element in data["stats"]["total"]:
counter += data["stats"]["total"][element]
counter_list.append(counter)
return "Active flights Worldwide: {}".format(counter)
#app.callback( Output('live-update-graph','figure'),
[Input('interval-component','n_intervals')])
def update_graph(n):
fig = go.Figure(data=[
go.Scatter(x=list(range(len(counter_list))),
y=counter_list,
mode='lines+markers')
])
return fig
if __name__ == '__main__':
# run all async stuff in another thread
th = Thread(target=async_main_wrapper)
th.start()
app.run_server(debug=True)
th.join()

Answer 3

This may work. Just create an async function for the data collection, processing and updating. Then create another async function for the dash code. Then run it like below:
async def web_data():
# web data code goes here
async def dash_code():
# Dash code goes here
async def main():
await asyncio.gather(web_data(), dash_code())
asyncio.run(main())