# Websockets, devices, performance gains

**URL:** <https://community.plotly.com/t/websockets-devices-performance-gains/39669>\
**Category:** Dash Python\
**Tags:** show-and-tell\
**Created:** [May 18, 2020, 3:36pm UTC](https://community.plotly.com/t/websockets-devices-performance-gains/39669 "2020-05-18T15:36:53Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![narragansett](https://avatars.discourse-cdn.com/v4/letter/n/59ef9b/32.png) [@narragansett](https://community.plotly.com/u/narragansett)\
**Post date:** [May 18, 2020, 3:36pm UTC](https://community.plotly.com/t/websockets-devices-performance-gains/39669/1 "2020-05-18T15:36:53Z")

</div>

Hi all,  
I wanted to share [what we’ve been working on](https://github.com/richlegrand/dash).

Our original intention was to make Dash work better with devices/hardware. Along the way, we discovered that websockets can give Dash a significant [improvement in performance](https://github.com/richlegrand/dash#benchmarks). (We modified Dash to use websockets instead of HTTP requests.)

Among other changes, we’ve added shared callbacks:

![dash](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/d/d75e08a1241a8aaa67f1caec7dcee57ddd05769f.gif)

Let us know your thoughts. Hope all’s good out there. 🙂

---

<div class="post-metadata">

**Author:** ![sjtrny](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/sjtrny/32/12714_2.png) [@sjtrny](https://community.plotly.com/u/sjtrny)\
**Post date:** [May 19, 2020, 4:13am UTC](https://community.plotly.com/t/websockets-devices-performance-gains/39669/2 "2020-05-19T04:13:39Z")

</div>

This looks well thought out! Will keep it in mind if the need arises.

---

<div class="post-metadata">

**Author:** ![Emil](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/emil/32/31734_2.png) [@Emil](https://community.plotly.com/u/Emil)\
**Post date:** [May 19, 2020, 3:42pm UTC](https://community.plotly.com/t/websockets-devices-performance-gains/39669/3 "2020-05-19T15:42:02Z")

</div>

It looks so cool! I just installed it, and i am now trying it out. In my case, it took following steps,

- Install python 3.7 (i was on 3.6 before)
- Install new dependencies via pip (quart, quart\_compress, git+https://github.com/richlegrand/dash)
- Replace the `Flask` server object by a `Quart` object (from quart import Quart)

In addition i encountered some issue due to this project being base on Dash 1.11.0 rather than 1.12.0 (e.g. the `prevent_initial_callbacks` flags is missing). I guess the new version will be merged at some point? 🙂

EDIT: It does however write the following line, which confuses me as i was under the impression that websockets would be used by defaults,

[2020-05-19 18:15:12,932] Running on 127.0.0.1:8051 over http (CTRL + C to quit)

EDIT2: I have merged v1.12.0 into your code, and now everything just seems to work!

---

<div class="post-metadata">

**Author:** ![narragansett](https://avatars.discourse-cdn.com/v4/letter/n/59ef9b/32.png) [@narragansett](https://community.plotly.com/u/narragansett)\
**Post date:** [May 19, 2020, 6:49pm UTC](https://community.plotly.com/t/websockets-devices-performance-gains/39669/4 "2020-05-19T18:49:31Z")

</div>

Hi Emil,  
If you try running from the git repository, you’ll run into some issues unless you build and install the modified dash\_renderer.

The quicker/easier approach is to follow the instructions on the page, which is to download the tar file:  
[https://github.com/charmedlabs/vizy/files/4645040/dash-devices.tar.gz](https://github.com/charmedlabs/vizy/files/4645040/dash-devices.tar.gz)

then

1. Install quart and quart\_compress: `pip3 install quart`, `pip3 install quart_compress`
2. Uncompress and untar dash-devices.tar.gz.
3. Go into `dash-devices` directory and run one the examples (e.g. `python3 example1.py` ). It assumes that you have a recent version of Dash already installed. (Note, running the examples in this directory won’t modify your existing Dash installation.)
4. Point your browser to `localhost:5000` .
5. Repeat (4) with another browser tab.

dash\_renderer is precompiled and ready to use if you go this route, so you can just run the examples and play with things without having to compile and install the modified renderer.

Thanks for the pull request. 🙂

---

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [May 20, 2020, 8:53pm UTC](https://community.plotly.com/t/websockets-devices-performance-gains/39669/5 "2020-05-20T20:53:34Z")

</div>

Hi @narragansett  
The GitHub link above is not working

---

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [May 20, 2020, 9:08pm UTC](https://community.plotly.com/t/websockets-devices-performance-gains/39669/6 "2020-05-20T21:08:33Z")

</div>

> [@narragansett](#):
>
> Our original intention was to make Dash work better with devices/hardware

Hi @narragansett  
Can you please share in layman’s terms how this would help Dash work better with devices. I read all the documentation that you put on github, and I understand that it would make things faster.

But what do you mean by devices? Are we talking about phones or tablets? And what kind of challenges were Dash apps having when on devices?

I appreciate it,

---

<div class="post-metadata">

**Author:** ![narragansett](https://avatars.discourse-cdn.com/v4/letter/n/59ef9b/32.png) [@narragansett](https://community.plotly.com/u/narragansett)\
**Post date:** [May 21, 2020, 1:13am UTC](https://community.plotly.com/t/websockets-devices-performance-gains/39669/7 "2020-05-21T01:13:57Z")

</div>

Whoops, sorry about that – this link should work:

[https://drive.google.com/file/d/1zhLvoX99Ur7cKVFOVECKVDn\_Q\_JzkUJI/view?usp=sharing](https://drive.google.com/file/d/1zhLvoX99Ur7cKVFOVECKVDn_Q_JzkUJI/view?usp=sharing)

Regarding devices-- I’m talking about using Dash as a front-end for a device. [This is an example](http://vizycam.com/) of such a device.

Here are the issues we encountered:

> **[richlegrand/dash](https://github.com/richlegrand/dash#problems-we-encountered-with-dash-and-devices)**
>
> A fork of plotly/dash to help Dash deal with devices. - richlegrand/dash

In particular, the ordering of HTTP requests used for component updates can result in incorrect behavior if there’s a device on the server side.

---

<div class="post-metadata">

**Author:** ![Emil](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/emil/32/31734_2.png) [@Emil](https://community.plotly.com/u/Emil)\
**Post date:** [May 21, 2020, 4:59am UTC](https://community.plotly.com/t/websockets-devices-performance-gains/39669/8 "2020-05-21T04:59:32Z")

</div>

I guess that @narragansett means by _devices_ is a piece of hardware to be controlled/monitored, e.g. a sensor or a camera.

---

<div class="post-metadata">

**Author:** ![Matthijs](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@Matthijs](https://community.plotly.com/u/Matthijs)\
**Post date:** [May 22, 2020, 11:22am UTC](https://community.plotly.com/t/websockets-devices-performance-gains/39669/9 "2020-05-22T11:22:18Z")

</div>

Wo super nice! I have been looking for this quite some while. Would be nice if It could be integrated in to the main dash repo.

---

<div class="post-metadata">

**Author:** ![narragansett](https://avatars.discourse-cdn.com/v4/letter/n/59ef9b/32.png) [@narragansett](https://community.plotly.com/u/narragansett)\
**Post date:** [May 22, 2020, 3:47pm UTC](https://community.plotly.com/t/websockets-devices-performance-gains/39669/10 "2020-05-22T15:47:03Z")

</div>

thanks 🙂

I think using Python’s asyncio is the best approach for integrating WebSockets into Dash. Unfortunately you need to use Python 3.6 or higher. I suspect that’s a big hurdle for getting (any) of this code integrated.

---

<div class="post-metadata">

**Author:** ![Matthijs](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@Matthijs](https://community.plotly.com/u/Matthijs)\
**Post date:** [May 29, 2020, 2:12pm UTC](https://community.plotly.com/t/websockets-devices-performance-gains/39669/11 "2020-05-29T14:12:58Z")

</div>

The dash code works on python 3.8, so should work? Another nice thing would be to create an package from it. So you could import the decorators, would this be possible? (And replace the flask server with the one you are using)

---

<div class="post-metadata">

**Author:** ![Emil](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/emil/32/31734_2.png) [@Emil](https://community.plotly.com/u/Emil)\
**Post date:** [May 29, 2020, 3:46pm UTC](https://community.plotly.com/t/websockets-devices-performance-gains/39669/12 "2020-05-29T15:46:42Z")

</div>

As changes are made to core parts of the Dash code, I don’t think it is possible to create a package, though it would have been cool (:

---

<div class="post-metadata">

**Author:** ![narragansett](https://avatars.discourse-cdn.com/v4/letter/n/59ef9b/32.png) [@narragansett](https://community.plotly.com/u/narragansett)\
**Post date:** [May 30, 2020, 5:01am UTC](https://community.plotly.com/t/websockets-devices-performance-gains/39669/13 "2020-05-30T05:01:38Z")

</div>

> [@Matthijs](#):
>
> The dash code works on python 3.8, so should work?

I was guessing that Python version 3.6 or greater is a restriction not easily swallowed by the Dash code maintainers.

Making a package that works side-by-side with regular Dash should be doable.

---

<div class="post-metadata">

**Author:** ![Matthijs](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@Matthijs](https://community.plotly.com/u/Matthijs)\
**Post date:** [June 1, 2020, 10:09am UTC](https://community.plotly.com/t/websockets-devices-performance-gains/39669/14 "2020-06-01T10:09:21Z")

</div>

Ah ok I understand, probably you are right

---

<div class="post-metadata">

**Author:** ![narragansett](https://avatars.discourse-cdn.com/v4/letter/n/59ef9b/32.png) [@narragansett](https://community.plotly.com/u/narragansett)\
**Post date:** [June 12, 2020, 3:48am UTC](https://community.plotly.com/t/websockets-devices-performance-gains/39669/15 "2020-06-12T03:48:27Z")

</div>

Hope all’s well out there. We posted a pypi package for dash\_devices that runs side-by-side with Dash:

> **[dash-devices](https://pypi.org/project/dash-devices/0.1.2/)**
>
> Dash for devices.

To give it a try:

1. Make sure you have a recent version of Dash installed.
2. Install quart and quart\_compress: `pip3 install quart``pip3 install quart_compress`
3. Install dash\_devices: `pip3 install dash_devices`
4. Download one of the examples (e.g. [example1.py](https://github.com/richlegrand/dash_devices/blob/dev/example1.py)) and run it (e.g. `python3 example1.py` ).
5. Point your browser to `localhost:5000` .
6. Repeat (5) with another browser tab.

Enjoy 🙂

---

<div class="post-metadata">

**Author:** ![irr3](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/irr3/32/9265_2.png) [@irr3](https://community.plotly.com/u/irr3)\
**Post date:** [June 13, 2020, 11:14pm UTC](https://community.plotly.com/t/websockets-devices-performance-gains/39669/16 "2020-06-13T23:14:28Z")

</div>

Is there a particular reason for using quart over other ASGI frameworks? Would FastAPI also work? Does anybody know if the Dash developers consider moving from WSGI to ASGI with native async?

---

<div class="post-metadata">

**Author:** ![narragansett](https://avatars.discourse-cdn.com/v4/letter/n/59ef9b/32.png) [@narragansett](https://community.plotly.com/u/narragansett)\
**Post date:** [June 15, 2020, 4:42pm UTC](https://community.plotly.com/t/websockets-devices-performance-gains/39669/17 "2020-06-15T16:42:41Z")

</div>

We chose Quart because it’s API was most similar to Flask and had built-in WebSocket support (and it used asyncio). FastAPI looks interesting and it also has built-in WebSockets… porting looks straightforward.

The Dash code maintainers haven’t commented on using asyncio in the future. It would mean dropping Python2 and earlier versions of Python3. asyncio is growing in popularity. There are opportunities for significant performance gains with Dash and asyncio.
