Runing websockets in Django with django-plotly-dash

I want to communicate with a separate frontend whenever the user interacts with the graph in order to update different elements of the frontend in real time. For this purpose, I was thinking on creating a websocket.

I am using django-plotly-dash library from @delsim & co. My first step on this direction was trying to run the example four provided by the library. The thing is that while the other examples work correct, in this example, when I load the demo four, I start getting some errors on the console that I thing that might be related:

HTTP GET /demo-four 200 [0.12, 127.0.0.1:58488]
HTTP GET /static/channels/js/websocketbridge.js 404 [0.05, 127.0.0.1:58488]
HTTP GET /django_plotly_dash/app/LiveInput/ 200 [2.12, 127.0.0.1:58489]
HTTP GET /django_plotly_dash/app/LiveOutput/ 200 [2.17, 127.0.0.1:58493]
HTTP GET /django_plotly_dash/instance/liveoutput-2/ 200 [2.29, 127.0.0.1:58495]
HTTP GET /django_plotly_dash/app/LiveInput/_dash-component-suites/dpd_static_support/bootstrap.v0_1m1655632109.min.css 302 [0.05, 127.0.0.1:58493]
Not Found: /django_plotly_dash/app/LiveInput/_dash-component-suites/dash/deps/polyfill@7.v2_3_1m1655718599.12.1.min.js
HTTP GET /django_plotly_dash/app/LiveInput/_dash-component-suites/dash/deps/polyfill@7.v2_3_1m1655718599.12.1.min.js 404 [0.09, 127.0.0.1:58489]
HTTP GET /static/dash/component/dpd_static_support/bootstrap.min.css 404 [0.03, 127.0.0.1:58489]
Not Found: /django_plotly_dash/app/LiveInput/_dash-component-suites/dash/deps/react@16.v2_3_1m1655718599.14.0.min.js
HTTP GET /django_plotly_dash/app/LiveInput/_dash-component-suites/dash/deps/react@16.v2_3_1m1655718599.14.0.min.js 404 [0.07, 127.0.0.1:58493]
HTTP GET /django_plotly_dash/app/LiveOutput/_dash-layout 200 [0.10, 127.0.0.1:58495]
HTTP GET /django_plotly_dash/app/LiveOutput/_dash-dependencies 200 [0.15, 127.0.0.1:58488]
Not Found: /django_plotly_dash/app/LiveInput/_dash-component-suites/dash/deps/react-dom@16.v2_3_1m1655718599.14.0.min.js
HTTP GET /django_plotly_dash/app/LiveInput/_dash-component-suites/dash/deps/react-dom@16.v2_3_1m1655718599.14.0.min.js 404 [0.06, 127.0.0.1:58488]
Not Found: /django_plotly_dash/app/LiveInput/_dash-component-suites/dash/deps/prop-types@15.v2_3_1m1655718599.7.2.min.js
HTTP GET /django_plotly_dash/app/LiveInput/_dash-component-suites/dash/deps/prop-types@15.v2_3_1m1655718599.7.2.min.js 404 [0.11, 127.0.0.1:58495]
HTTP GET /django_plotly_dash/instance/liveoutput-2/_dash-layout 200 [0.21, 127.0.0.1:58493]
HTTP GET /django_plotly_dash/instance/liveoutput-2/_dash-dependencies 200 [0.26, 127.0.0.1:58489]
HTTP GET /django_plotly_dash/app/LiveInput/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.v0_13_1m1655633801.min.js 302 [0.22, 127.0.0.1:58488]
HTTP POST /django_plotly_dash/app/LiveOutput/_dash-update-component 200 [0.33, 127.0.0.1:58495]
HTTP GET /django_plotly_dash/app/LiveInput/_dash-component-suites/dpd_components/bundle.v0_1_0m1644850442.js 302 [0.33, 127.0.0.1:58498]
HTTP GET /static/dash/component/dash_bootstrap_components/_components/dash_bootstrap_components.min.js 404 [0.02, 127.0.0.1:58498]
HTTP GET /static/dash/component/dpd_components/bundle.js 404 [0.04, 127.0.0.1:58495]
Not Found: /django_plotly_dash/app/LiveInput/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_3_1m1655718598.min.js
HTTP GET /django_plotly_dash/app/LiveInput/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_3_1m1655718598.min.js 404 [0.05, 127.0.0.1:58495]
Not Found: /django_plotly_dash/app/LiveInput/_dash-component-suites/dash/dcc/dash_core_components.v2_3_0m1655718599.js
HTTP GET /django_plotly_dash/app/LiveInput/_dash-component-suites/dash/dcc/dash_core_components.v2_3_0m1655718599.js 404 [0.11, 127.0.0.1:58498]
HTTP POST /django_plotly_dash/app/LiveOutput/_dash-update-component 200 [0.17, 127.0.0.1:58488]
HTTP POST /django_plotly_dash/instance/liveoutput-2/_dash-update-component 200 [0.18, 127.0.0.1:58489]
Not Found: /django_plotly_dash/app/LiveInput/_dash-component-suites/dash/dcc/dash_core_components-shared.v2_3_0m1655718599.js
HTTP GET /django_plotly_dash/app/LiveInput/_dash-component-suites/dash/dcc/dash_core_components-shared.v2_3_0m1655718599.js 404 [0.26, 127.0.0.1:58495]
Not Found: /django_plotly_dash/app/LiveInput/_dash-component-suites/dash/html/dash_html_components.v2_0_2m1655718599.min.js
HTTP GET /django_plotly_dash/app/LiveInput/_dash-component-suites/dash/html/dash_html_components.v2_0_2m1655718599.min.js 404 [0.26, 127.0.0.1:58498]
Not Found: /django_plotly_dash/app/LiveInput/_dash-component-suites/dash/dash_table/bundle.v5_1_1m1655718599.js
HTTP GET /django_plotly_dash/app/LiveInput/_dash-component-suites/dash/dash_table/bundle.v5_1_1m1655718599.js 404 [0.03, 127.0.0.1:58498]
HTTP POST /django_plotly_dash/instance/liveoutput-2/_dash-update-component 200 [0.08, 127.0.0.1:58498]

Therefore, when I later try to perform the curl suggested on the documentation, I get the error:
curl http://127.0.0.1:8000/dpd/views/poke/ -d'{"channel_name":"live_button_counter","label":"named_counts","value":{"click_colour":"red"}}'
Unable to understand and forward on message of

As I see in the console traces, the error I guess that is related with some dependencies that cannot be found, but I cannot figure out how to solve it. Any guesses of how can I solve this in order to run this demo?

In case it is related, this is my pip freeze:

aioredis==1.3.1
alabaster==0.7.12
ansi2html==1.7.0
anyio==3.6.1
aplus==0.11.0
arabic-reshaper==2.1.3
argon2-cffi==21.3.0
argon2-cffi-bindings==21.2.0
asgiref==3.5.0
asn1crypto==1.5.1
astroid==2.9.3
astropy==4.3.1
async-timeout==4.0.2
asyncio==3.4.3
atomicwrites==1.4.0
attrs==19.3.0
autobahn==22.2.2
Automat==20.2.0
Babel==2.10.3
backcall==0.2.0
backports.zoneinfo==0.2.1
bcrypt==3.2.0
beautifulsoup4==4.11.1
bidict==0.22.0
biopython==1.79
blake3==0.3.1
bleach==4.1.0
bootstrap4==0.1.0
bqplot==0.12.33
Brotli==1.0.9
cachetools==5.2.0
certifi==2021.10.8
cffi==1.15.0
channels==2.4.0
channels-redis==3.4.0
charset-normalizer==2.0.12
click==8.0.3
cloudpickle==2.1.0
colorama==0.4.4
colour==0.1.5
commonmark==0.9.1
constantly==15.1.0
coverage==6.4.1
coveralls==3.3.1
cryptography==36.0.2
cssselect2==0.6.0
cycler==0.11.0
daphne==2.5.0
dash==2.3.1
dash-bootstrap-components==0.13.1
dash-core-components==2.0.0
dash-html-components==2.0.0
dash-renderer==1.9.1
dash-table==5.0.0
dask==2022.2.0
debugpy==1.5.1
decorator==5.1.1
defusedxml==0.7.1
Django==3.2.9
django-bootstrap4==22.1
django-cors-headers==3.11.0
django-extensions==3.1.5
django-plotly-dash==1.6.5
django-redis==5.2.0
django-redis-cache==3.0.1
django-socketio==0.2
djangorestframework==3.13.1
djangorestframework-simplejwt==5.0.0
docopt==0.6.2
docutils==0.17.1
docx==0.2.4
dpd-components==0.1.0
dpd-static-support==0.0.5
drf-registration==0.1.3
EditorConfig==0.12.3
entrypoints==0.4
fastapi==0.78.0
fdb==2.0.2
filelock==3.7.1
Flask==2.0.2
Flask-Caching==1.10.1
Flask-Compress==1.10.1
Flask-SocketIO==5.1.2
Flask-Sockets==0.2.1
fonttools==4.30.0
frozendict==2.3.2
fsspec==2022.5.0
future==0.18.2
GEOparse==2.0.3
gevent==21.12.0
gevent-socketio==0.3.6
gevent-websocket==0.10.1
greenlet==1.1.2
grip==4.6.1
h11==0.13.0
h5py==3.7.0
hiredis==2.0.0
html5lib==1.1
httptools==0.4.0
hyperlink==21.0.0
idna==3.3
imagesize==1.3.0
importlib-metadata==2.1.3
incremental==21.3.0
iniconfig==1.1.1
ipydatawidgets==4.3.1.post1
ipykernel==6.9.1
ipyleaflet==0.16.0
ipympl==0.9.1
ipython==7.32.0
ipython-genutils==0.2.0
ipyvolume==0.5.2
ipyvue==1.7.0
ipyvuetify==1.8.2
ipywebrtc==0.6.0
ipywidgets==7.6.5
isort==5.10.1
itsdangerous==2.0.1
Janitor==0.1.1
jedi==0.18.1
Jinja2==3.0.3
joblib==1.1.0
jsbeautifier==1.14.3
jsonschema==4.0.1
jupyter-client==7.1.2
jupyter-core==4.9.2
jupyter-dash==0.4.2
jupyterlab-pygments==0.1.2
jupyterlab-widgets==1.0.2
kaleido==0.2.1
keyring==22.3.0
kiwisolver==1.4.0
lazy-object-proxy==1.7.1
livereload==2.6.3
llvmlite==0.38.1
locket==1.0.0
lttbc==0.2.0
lxml==4.8.0
Markdown==3.3.4
MarkupSafe==2.0.1
matplotlib==3.5.1
matplotlib-inline==0.1.3
mccabe==0.6.1
mistune==0.8.4
more-itertools==8.12.0
msgpack==1.0.4
mysql-connector-python==8.0.28
mysqlclient==2.1.0
nbclient==0.5.12
nbconvert==6.4.2
nbformat==5.1.3
nest-asyncio==1.5.4
notebook==6.4.8
numba==0.55.2
numpy==1.21.5
orjson==3.6.8
oscrypto==1.3.0
packaging==21.3
pandas==1.1.5
pandas-ta==0.3.14b0
pandasql==0.7.3
pandocfilters==1.5.0
ParmEd==3.4.3
parso==0.8.3
partd==1.2.0
passlib==1.7.4
path-and-address==2.0.1
periodictable==1.6.0
pickleshare==0.7.5
pikepdf==5.1.2
Pillow==9.0.1
pkginfo==1.8.3
platformdirs==2.4.1
plotly==5.4.0
pluggy==1.0.0
progressbar2==4.0.0
prometheus-client==0.13.1
prompt-toolkit==3.0.28
protobuf==3.19.4
psutil==5.9.0
py==1.11.0
pyarrow==8.0.0
pyasn1==0.4.8
pyasn1-modules==0.2.8
pycairo==1.21.0
pycparser==2.21
pydantic==1.9.1
pydyf==0.1.2
pyerfa==2.0.0.1
Pygments==2.11.2
pyHanko==0.13.0
pyhanko-certvalidator==0.19.5
PyJWT==2.3.0
pylint==2.12.2
PyMySQL==1.0.2
pyOpenSSL==22.0.0
pyparsing==3.0.7
PyPDF3==1.0.6
pyphen==0.12.0
pyrsistent==0.18.1
pytest==7.1.2
pytest-cov==3.0.0
pytest-django==4.5.2
python-bidi==0.4.2
python-coveralls==2.9.3
python-dateutil==2.8.2
python-docx==0.8.11
python-dotenv==0.19.2
python-engineio==4.3.2
python-socketio==5.6.0
python-utils==3.3.3
pythreejs==2.3.0
pytz==2021.3
pytz-deprecation-shim==0.1.0.post0
pywin32==303
pywin32-ctypes==0.2.0
pywinpty==2.0.5
PyYAML==6.0
pyzmq==22.3.0
qrcode==7.3.1
readme-renderer==35.0
redis==3.5.3
reportlab==3.6.9
requests==2.27.1
requests-toolbelt==0.9.1
retrying==1.3.3
rfc3986==2.0.0
rich==12.4.4
scikit-learn==1.0.2
scipy==1.7.3
Send2Trash==1.8.0
service-identity==21.1.0
six==1.16.0
sniffio==1.2.0
snowballstemmer==2.2.0
soupsieve==2.3.2.post1
Sphinx==4.3.2
sphinx-autobuild==2021.3.14
sphinx-me==0.3
sphinx-rtd-theme==1.0.0
sphinxcontrib-applehelp==1.0.2
sphinxcontrib-devhelp==1.0.2
sphinxcontrib-htmlhelp==2.0.0
sphinxcontrib-jsmath==1.0.1
sphinxcontrib-qthelp==1.0.3
sphinxcontrib-serializinghtml==1.1.5
SQLAlchemy==1.4.36
sqldf==0.4.2
sqlparse==0.4.2
starlette==0.19.1
svglib==1.2.1
tabulate==0.8.9
tenacity==8.0.1
terminado==0.13.3
testpath==0.6.0
threadpoolctl==3.1.0
tinycss2==1.1.1
toml==0.10.2
tomli==2.0.1
toolz==0.11.2
tornado==6.1
tqdm==4.63.0
trace-updater==0.0.8
traitlets==5.1.1
traittypes==0.2.1
twine==3.3.0
Twisted==22.2.0
twisted-iocpsupport==1.0.2
txaio==22.2.1
typed-ast==1.5.2
typing_extensions==4.0.1
tzdata==2022.1
tzlocal==4.2
uritools==4.0.0
urllib3==1.26.8
uvicorn==0.17.6
vaex==4.9.2
vaex-astro==0.9.1
vaex-core==4.9.2
vaex-hdf5==0.12.2
vaex-jupyter==0.8.0
vaex-ml==0.17.0
vaex-server==0.8.1
vaex-viz==0.5.2
watchgod==0.8.2
wcwidth==0.2.5
weasyprint==54.3
webencodings==0.5.1
websockets==10.3
Werkzeug==2.0.3
whitenoise==6.2.0
widgetsnbextension==3.5.2
wrapt==1.13.3
wsgi-oauth2==0.2.2
xarray==0.20.2
xhtml2pdf==0.2.7
xyzservices==2022.4.0
zipp==3.7.0
zope.event==4.5.0
zope.interface==5.4.0
zopfli==0.2.1

Also, my doubt is regarding comunicating from Django to the frontend, and not the other way around. Is this also possible with this library? Because in the example I cannot see clearly if I could listen to the given port with the frontend in order to read the data sent from Django-Dash.

If you update django-plotly-dash to the current version you should be able to get all of the examples working.

As to communication with the front end - look at example four and the associated chapter on live updating in the documentation.

Essentially, communication from Django works through Django sending a message over a websocket to the front end, and then this message can be used to invoke a callback like any other.

I would however note that the first rule of websockets is that you dont want a websocket. If you can, use an Interval component for polling. And if you’ve already got user input as your starting point, then consider putting more of your UI into a single dash app, so that you can just use callbacks.