Setting delay before "connection lost: trying to reconnect" ?

[Derf000]

Hi, I'd like to know if there's a way of adjusting the timeout before I get the "connection lost: trying to reconnect" message.
Since version 1.2.21: when I have operations that are a bit long (loading and processing "large" files), this message appears before the end of the file processing (this was not the case with version 1.2.14).

[rodja]

The timeout of the websocket communication is currently not configurable.

I have operations that are a bit long (loading and processing "large" files)

You should offload all heavy work with async/await. NiceGUI (and the underlying FastAPI) are async frameworks. That means, no io-bound or cpu-bound tasks should be directly executed on the main thread but rather be "awaited". See https://fastapi.tiangolo.com/async/ for a good in-depth explanation. Some good examples are

• ffmpeg exctract images
• opencv webcam
• script executor

[DarakDuVal]

@rodja any updates on the websocket timeouts? we have observed similar situation not with the long running query (that is async and awaited for), but the rendering of data

[rodja]

Are you sure everything is properly using async/await? Read https://github.com/zauberzeug/nicegui/wiki/FAQs#why-is-my-long-running-function-blocking-ui-updates. If you really must, you can now change the reconnect delay.

[DarakDuVal]

The observation we have linked to this thread #3845 is:
The rendering of objects takes so long, that the websocket connection turns half-closed and terminates. Upon reconnect, the UI remains in its previous state unresponsive until a page refresh.
We have many objects which are instantiated as customized ui.card in customized ui.list components.
For smaller datasets, everything works as expected, but for larger datasets, we see this lost connection behavior.

Moving the instantiation into background tasks is what we thus try right now, however, also struggling with some odd behavior...

[rodja]

The rendering of objects takes so long, that the websocket connection turns half-closed and terminates.

Are you sure it's the rendering (eg. the browser)? Or is it on the backend side (eg. Python)? If it's python you could implmenent some kind of lazy-loading of elements: start with a skeleton and then load the content only if the element comes into view. Similar to what our infinite scroll example does.

Moving the instantiation into background tasks is what we thus try right now, however, also struggling with some odd behavior...

UI elements can not be instantiated in background tasks. I suggest you try to create a model (eg. data structure) in the background and then build the elements from the result on the main thread.

[Derf000]

Hello, thank you for your reply.

Unfortunately, the "problem" doesn't come from me directly. In fact, I'm visualising gpx files by creating a folium map. Sometimes this .gpx file can be quite large and the html rendering of the folium map can take a long time.
Here is a code for demonstration (with zipped .gpx file, attached).
For the moment I've managed to optimise at the gpx level so I no longer have the timeout problem, but it could potentially happen again.

You will find attached a very, very dense gpx file with many "dirty" redundant waypoints/routes, not realistic, but just to show you the purpose of my initial question.

Following code was inspired from #487

# fast raw example code
from nicegui import app, ui, Client, __version__

import folium
from folium.features import DivIcon
import gpxpy
from timeit import default_timer as timer

#------------------------------------------------------------------
def debug(comment, s=0, e=0, n=3) :
  t=timer()
  if s==e :
    s=t
    print(comment)
  else :
    e=t
    secs = round(e-s,n)
    print(f"{comment} ({secs}s)")
  return s

#------------------------------------------------------------------
# Create folium map with gpx file 
def make_folium_map (gpx_file) :
  # very big gpx  file with lot of waypoints and routes
  with open(gpx_file, 'r', encoding='utf-8') as file:
    gpx = gpxpy.parse(file)
  # Get 'map' corners
  (min_lat, max_lat, min_lon, max_lon) = (None, None, None, None)
  my_waypoints = []
  for w in gpx.waypoints:
      my_waypoints.append([w.latitude, w.longitude, w.name])
      if min_lat is None or w.latitude < min_lat:
          min_lat = w.latitude
      if max_lat is None or w.latitude > max_lat:
          max_lat = w.latitude
      if min_lon is None or w.longitude < min_lon:
          min_lon = w.longitude
      if max_lon is None or w.longitude > max_lon:
          max_lon = w.longitude

  i=0
  my_routes = []
  for r in gpx.routes:
    my_routes.append([])
    for p in r.points:
        my_routes[i].append([p.latitude, p.longitude, p.name])
    i += 1

  # Creation Folium_map
  sw = [min_lat, min_lon]
  ne = [max_lat, max_lon]
  center_x = (max_lon-min_lon)/2
  center_y =(max_lat-min_lat)/2
  html_div_style = '<div style="font-size: 8pt; color: black">%s</div>'
  my_map = folium.Map([center_x, center_y])
  my_map.fit_bounds([sw, ne])

  # Adding waypoints
  for pt in my_waypoints :
    folium.CircleMarker((pt[0], pt[1]), radius=5, fill_color=None, color='red').add_to(my_map)
    folium.map.Marker([pt[0], pt[1]], icon=DivIcon(icon_size=(35,35), icon_anchor=(0, 0), html=html_div_style % pt[2])).add_to(my_map)
    
  # adding routes lines with colors
  colors = ["black", "orange", "purple", "green", "blue", "yellow", "cyan", "indigo"]
  nb_rte=1
  for rte in my_routes :
    nb_pt=0
    rte_color=colors[nb_rte % len(colors)]
    for pt in rte:
      current_pt_coords=[pt[0], pt[1]]
      if nb_pt > 0 :
          folium.PolyLine([prev_pt_coords, current_pt_coords], color=rte_color, dash_array="2").add_to(my_map)
      prev_pt_coords=current_pt_coords
      nb_pt += 1
    nb_rte += 1
  return my_map


@ui.page('/')
async def main():
  col_folium_map = ui.column()
  col_folium_map.clear()
  # Make map
  start = debug(f"01a - Make map")
  f_map = make_folium_map("big_gpx_file.gpx")
  debug(f"01b - Done in ",s=start)
  # Make html
  start = debug("02a - Start rendering to html")
  # THIS COULD BE 'VERY' LONG : COULD GET LOST CONNECTION HERE !!!
  html_map_code=f_map.get_root()._repr_html_()
  debug(f"02b - Done",s=start)
  # display sur 'main_page'
  start = debug("03a - Start display in ui")
  with col_folium_map :
    folium_map= ui.html(html_map_code).style('width: 100%')
  debug("03b - Done",s=start)
  # start = debug("04a - Now will export html")
  # with open("gpx_map.html", 'w') as f:
  #   f.write(html_map_code)
  # debug("04b - Done",s=start)

ui.run(title="titre", port=8282, show=True, reload = True)

big_gpx_file.zip

[rodja]

There are a lot of non-async things going on which can be made async. For example with open(... should be replaced with counterparts from aiofiles. And if gpxpy.parse(file) takes cpu time, you should use loop.run_in_executor with a process executor to run it in a separate process. Or, for simplicity execute the whole make_folium_map function with loop.run_in_executor.

[husain-akridata]

A hack that worked for me,was to just increase the default timeout duration when that pop-up shows on the UI using reconnect_timeout parameter.
ui.run(reload=False, port=8080, host='0.0.0.0', reconnect_timeout=60)