Reloading loop due to failed handshakes for slow Plotly plots

[pplno]

Question

In my nicegui application I need to plot rather large / slow Plotly surface plots.
Unfortunately, when the Plotly surface plot becomes to slow on the client side, the application gets stuck in a reloading / refreshing loop. When this happens you get the console log: "reloading because handshake failed for client_id xxxxxx".

Here is the code to reproduce the issue. On my machine (Intel Core i9-11900K, 32GB RAM) the application works as intended for small grid sizes grid_x, grid_y = 200, 200, becomes very choppy with grid_x, grid_y = 1000, 1000, and fully breaks down in the reloading loop with grid_x, grid_y = 2000, 2000

from nicegui import ui
import numpy as np
import plotly.graph_objects as go


@ui.page("/")
def main_page():
    grid_x, grid_y = 200, 200
    # grid_x, grid_y = 1000, 1000
    # grid_x, grid_y = 2000, 2000

    x, y = np.arange(0, grid_x), np.arange(0, grid_y)
    xx, yy = np.meshgrid(x, y)

    fig = go.Figure(
        data=[],
        layout=go.Layout(
            height=800,
            width=800,
        ),
    )

    def refresh_plot():
        zz = (np.sin(xx / 20 * np.random.rand()) * 10) * (
            np.sin(yy / 20 * np.random.rand()) * 10
        )

        new_surface = go.Surface(x=xx, y=yy, z=zz, colorscale="Blues", opacity=1)

        fig.data = []

        fig.add_traces([new_surface])

        plotly_plot.update()
        ui.notify("refresh successful", type="positive")

    plotly_plot = ui.plotly(fig).classes("w-500 h-100")
    ui.button("refresh", on_click=refresh_plot)


ui.run()

I have tried to mitigate the issue by implementing my own plot class that makes the update of the ui.plotly asynchronous (timeout=60). This somewhat solves the issue for grid_x, grid_y = 1000, 1000, but the application still breaks down at grid_x, grid_y = 2000, 2000.
See the code of my asynchronous implementation below.

from nicegui import ui
import numpy as np
import json
import plotly.graph_objects as go
from typing import Dict
from plotly.graph_objs import Figure


class NumpyEncoder(json.JSONEncoder):
    """Special json encoder for numpy types"""

    def default(self, obj):
        if isinstance(obj, np.integer):
            return int(obj)
        elif isinstance(obj, np.floating):
            return float(obj)
        elif isinstance(obj, np.ndarray):
            return obj.tolist()
        return json.JSONEncoder.default(self, obj)


class AsyncPlot(ui.plotly):
    def __init__(self, figure: Dict | Figure) -> None:
        super().__init__(figure)
        self.figure: Figure

    async def async_update(self):
        options = self._get_figure_json()

        update_status = await ui.run_javascript(
            f"""
                var plotly_element = document.getElementById("c{self.id}");

                Plotly.react(plotly_element, {json.dumps(options['data'], cls=NumpyEncoder)}, {json.dumps(options['layout'], cls=NumpyEncoder)});
                return true
            """,
            timeout=60,
            check_interval=1,
        )
        return update_status


@ui.page("/")
def main_page():
    # grid_x, grid_y = 200, 200
    grid_x, grid_y = 1000, 1000
    # grid_x, grid_y = 2000, 2000

    x, y = np.arange(0, grid_x), np.arange(0, grid_y)
    xx, yy = np.meshgrid(x, y)

    fig = go.Figure(
        data=[],
        layout=go.Layout(
            height=800,
            width=800,
        ),
    )

    async def refresh_plot():
        zz = (np.sin(xx / 20 * np.random.rand()) * 10) * (
            np.sin(yy / 20 * np.random.rand()) * 10
        )

        new_surface = go.Surface(x=xx, y=yy, z=zz, colorscale="Blues", opacity=1)

        fig.data = []
        fig.add_traces([new_surface])
        
        refresh_result = await plotly_plot.async_update()
        
        ui.notify(f"refresh successful ({refresh_result})", type="positive")

    plotly_plot = AsyncPlot(fig).classes("w-500 h-100")
    ui.button("refresh", on_click=refresh_plot)


ui.run()

Is there any general advice on running CPU-bound tasks on the client side to avoid the failing handshake?
I assume the failing handshake is connected to a timeout setting somewhere? Can it be changed to avoid the issue?
I'm aware of run.cpu_bound for the server-side, is there a client side equivalent?

[falkoschindler]

Hi @pplno, that's an interesting question!

You can try to increase the reconnect_timeout to something like 30 seconds via ui.run or ui.page. This affects the websocket ping interval and timeout like this:

nicegui/nicegui/nicegui.py

Lines 117 to 119 in 45fdda8

	# NOTE ping interval and timeout need to be lower than the reconnect timeout, but can't be too low
	sio.eio.ping_interval = max(app.config.reconnect_timeout * 0.8, 4)
	sio.eio.ping_timeout = max(app.config.reconnect_timeout * 0.4, 2)

If you need to fine-tune these configuration parameters individually, you can set them within a startup handler:

def startup():
    core.sio.eio.ping_interval = ...
    core.sio.eio.ping_timeout = ...

app.on_startup(startup)

I hope this helps!

[phnmn]

Hi @falkoschindler.
I encountered the same problem. the WS connection is experiencing a cyclic reboot. Setting timeouts does not help, as the issue occurs within one second. From the debug log, it is clear that a response > TEXT '430[false]' [10 bytes] is received, after which the connection is closed and an attempt is made to establish a new one.
ps. I noticed a pattern that this starts to occur locally when Uvicorn is run with more than one worker. However, deploying on the server with one worker did not significantly change the situation.

INFO: ('10.109.4.170', 36650) - "WebSocket /socket.io/?client_id=3141f508-fa59-441a-93b4-2e2ed44e7909&EIO=4&transport=websocket" [accepted]
DEBUG: > HTTP/1.1 101 Switching Protocols
DEBUG: > Upgrade: websocket
DEBUG: > Connection: Upgrade
DEBUG: > Sec-WebSocket-Accept: kabWO4GgCD+Q0L54mnrLbiWxPvY=
DEBUG: > Sec-WebSocket-Extensions: permessage-deflate
DEBUG: > date: Thu, 19 Dec 2024 15:33:24 GMT
DEBUG: > server: uvicorn
INFO: connection open
DEBUG: = connection is OPEN
DEBUG: > TEXT '0{"sid":"JcMYE5TOzW7GBYorAAAK","upgrades":[],"p...0,"pingInterval":24000}' [86 bytes]
DEBUG: < TEXT '40' [2 bytes]
DEBUG: > TEXT '40{"sid":"WosNYPvgG_w_sbmqAAAL"}' [32 bytes]
DEBUG: < TEXT '420["handshake",{"client_id":"3141f508-fa59-441...a8-909e-8976bf6b8e00"}]' [117 bytes]
DEBUG: > TEXT '430[false]' [10 bytes]
2024-12-19 18:33:25,113 INFO: 10.109.3.235:49612 - "GET / HTTP/1.1" 200 OK
DEBUG: < CLOSE 1001 (going away) [2 bytes]
DEBUG: = connection is CLOSING
DEBUG: > CLOSE 1001 (going away) [2 bytes]
DEBUG: x half-closing TCP connection
DEBUG: = connection is CLOSED
INFO: connection closed
2024-12-19 18:33:25,477 INFO: 10.109.3.235:49612 - "GET / HTTP/1.1" 200 OK
DEBUG: = connection is CONNECTING
DEBUG: < GET /_nicegui_ws/socket.io/?client_id=1ca7e850-159d-4df5-a75e-b6910b31ed37&EIO=4&transport=websocket HTTP/1.1
...

[falkoschindler]

Hi @phnmn,
Are you sure this is related to the original post? Does the problem occur with every NiceGUI app, even a minimal Hello World or Plotly demo? Can you share a minimal reproducible example?
And what NiceGUI version are you using?

[phnmn]

@falkoschindler, thank you for your response.
No, I'm not sure. I don't have Plotly in the project, but I'm getting the same result as 'Reloading loop due to failed handshakes.' Maybe later I can investigate this further. I've just noticed that playing with this setting did not help. Sorry for the inconvenience.
I am using version nicegui==2.2.0.