Можно ли визуализировать сериализованные компоненты Da sh на внешнем интерфейсе?
Здесь небольшое само-контейнерное приложение, которое связывает нажатие кнопки с обратным вызовом. Обратный вызов внутренне выдает пять сообщений через сокет, и эти сообщения принимаются от внешнего интерфейса, а содержимое сообщения записывается на консоль.
Вместо простой записи содержимого сообщения на консоль Я хотел бы каким-то образом использовать DashRenderer, чтобы преобразовать сериализованные dash_html_components в правильные значения HTML (и вставить их в дерево HTML DOM).
import dash_html_components as html
from dash import Dash
from flask import Flask
from dash.dependencies import Input
from dash.dependencies import Output
from dash.exceptions import PreventUpdate
from flask_socketio import SocketIO
# add socketio script to javascript
external_scripts = [
{
'src': 'https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js',
'integrity': 'sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=',
'crossorigin': 'anonymous'
}
]
server = Flask(__name__)
socketio = SocketIO(server)
app = Dash(__name__, server=server, external_scripts=external_scripts, serve_locally=True)
app.index_string = '''
<!DOCTYPE html>
<html>
<head>
{%metas%}
<title>{%title%}</title>
{%favicon%}
{%css%}
</head>
<body>
{%app_entry%}
<footer>
{%config%}
{%scripts%}
<script>
var socket = io();
socket.on("component-channel", function (component, cb) {
console.log("Component: ")
console.log(component)
});
</script>
{%renderer%}
</footer>
</body>
</html>
'''
app.layout = html.Div(
id="outer-div", children=[
html.Button("Send event", id="button"),
html.Div(id="output-div")
]
)
@app.callback(
Output("output-div", "children"),
[Input("button", "n_clicks")]
)
def on_click(n_clicks):
if n_clicks is None:
raise PreventUpdate()
import time
for i in range(5):
component = html.P("Loop {}".format(i))
serialised_component = component.to_plotly_json()
socketio.emit("component-channel", serialised_component)
time.sleep(2)
return html.P("Terminated")
if __name__ == '__main__':
app.run_server()
Как мне рендеринг данных, полученных в веб-сокете, в правильное значение HTML?
под рисунком, показывающим текущее поведение приложения, т.е. данные, отправленные через веб-сокет с сервера на внешний интерфейс, принимаются и регистрируются через консоль.
