From 43a2d7ed5c83b30eedeee7c221d0011afe870408 Mon Sep 17 00:00:00 2001 From: Florian Scherf Date: Mon, 21 Aug 2023 22:41:02 +0200 Subject: [PATCH] templates: frontend: add auto reconnect Signed-off-by: Florian Scherf --- doc/content/api-reference/frontends.rst | 31 +--------- doc/content/api-reference/settings.rst | 15 ++++- doc/content/cookbook/auto-reconnect.rst | 58 ------------------- doc/settings.py | 1 - lona/default_settings.py | 2 + lona/templates/lona/disconnect-message.html | 4 ++ lona/templates/lona/frontend.html | 58 ++++++++++++++++++- lona/templates/lona/frontend.js | 3 - .../lona/waiting-for-server-message.html | 1 + 9 files changed, 78 insertions(+), 95 deletions(-) delete mode 100644 doc/content/cookbook/auto-reconnect.rst create mode 100644 lona/templates/lona/disconnect-message.html create mode 100644 lona/templates/lona/waiting-for-server-message.html diff --git a/doc/content/api-reference/frontends.rst b/doc/content/api-reference/frontends.rst index 93496c50..d78cc12b 100644 --- a/doc/content/api-reference/frontends.rst +++ b/doc/content/api-reference/frontends.rst @@ -34,36 +34,7 @@ The default frontend template includes ``lona/style.css`` which can be overridden. .. code-block:: html - - - - - - {{ Lona.load_stylesheets() }} - - - - {% include "lona/header.html" %} -
- {% include "lona/footer.html" %} - {{ Lona.load_scripts() }} - - - - + :include: ../../../lona/templates/lona/frontend.html Loading static files diff --git a/doc/content/api-reference/settings.rst b/doc/content/api-reference/settings.rst index 4cc89e23..d0d4480f 100644 --- a/doc/content/api-reference/settings.rst +++ b/doc/content/api-reference/settings.rst @@ -134,6 +134,19 @@ Client :name: CLIENT_DEBUG :path: lona.default_settings.CLIENT_DEBUG +.. setting:: + :name: CLIENT_AUTO_RECONNECT + :path: lona.default_settings.CLIENT_AUTO_RECONNECT + + When set to ``True`` the client will try to reconnect to the server + periodically when the websocket connection closes + +.. setting:: + :name: CLIENT_AUTO_RECONNECT_TIMEOUT + :path: lona.default_settings.CLIENT_AUTO_RECONNECT_TIMEOUT + + Auto reconnect timeout in ms + .. setting:: :name: CLIENT_VIEW_START_TIMEOUT :path: lona.default_settings.CLIENT_VIEW_START_TIMEOUT @@ -344,4 +357,4 @@ Feature Flags When ``settings.USE_FUTURE_NODE_CLASSES`` is set to ``True``: - 1. ``lona.html.Select2`` gets used instead of ``lona.html.Select`` \ No newline at end of file + 1. ``lona.html.Select2`` gets used instead of ``lona.html.Select`` diff --git a/doc/content/cookbook/auto-reconnect.rst b/doc/content/cookbook/auto-reconnect.rst deleted file mode 100644 index 6ad87a74..00000000 --- a/doc/content/cookbook/auto-reconnect.rst +++ /dev/null @@ -1,58 +0,0 @@ - - -Auto-Reconnect -============== - -For development or kiosk applications it can be useful to have a frontend that -reconnects automatically when the server restarts. - -This example implements a simple clock that updates the current time once per -second. The script adds a simple snipped to the frontend, which uses the -`server disconnect hook `_ -to try to reconnect the Lona client once per second, when the server restarts. - - -.. code-block:: python - - from datetime import datetime - - from lona import LonaApp, LonaView - from lona.html import HTML, H1, P - - app = LonaApp(__file__) - - - @app.route('/') - class MyLonaView(LonaView): - def handle_request(self, request): - timestamp = P() - - html = HTML( - H1('Clock'), - timestamp, - ) - - while True: - timestamp.set_text(str(datetime.now())) - - self.show(html) - - self.sleep(1) - - - app.add_template('lona/frontend.js', """ - lona_context.add_disconnect_hook(function(lona_context, event) { - document.querySelector('#lona').innerHTML = ` - Server disconnected
Trying to reconnect... - `; - - setTimeout(function() { - lona_context.reconnect(); - - }, 1000); - }); - """) - - - if __name__ == '__main__': - app.run(port=8080) diff --git a/doc/settings.py b/doc/settings.py index aa194c7d..1450aba2 100644 --- a/doc/settings.py +++ b/doc/settings.py @@ -103,7 +103,6 @@ ['Writing A Traditional Form', 'cookbook/writing-a-traditional-form.rst'], - ['Auto-Reconnect', 'cookbook/auto-reconnect.rst'], ['URL Reverse Resolving', 'cookbook/url-reverse-resolving.rst'], ['Using Server State', 'cookbook/using-server-state.rst'], diff --git a/lona/default_settings.py b/lona/default_settings.py index dee98f8e..4dfc8237 100644 --- a/lona/default_settings.py +++ b/lona/default_settings.py @@ -48,6 +48,8 @@ CLIENT_VIEW_START_TIMEOUT = 2 CLIENT_INPUT_EVENT_TIMEOUT = 2 CLIENT_PING_INTERVAL = 60 +CLIENT_AUTO_RECONNECT = True +CLIENT_AUTO_RECONNECT_TIMEOUT = 1000 # sessions diff --git a/lona/templates/lona/disconnect-message.html b/lona/templates/lona/disconnect-message.html new file mode 100644 index 00000000..5b9084eb --- /dev/null +++ b/lona/templates/lona/disconnect-message.html @@ -0,0 +1,4 @@ +

Server Disconnected

+{% if Lona.settings.CLIENT_AUTO_RECONNECT %} + Trying to reconnect... +{% endif %} diff --git a/lona/templates/lona/frontend.html b/lona/templates/lona/frontend.html index 2d1ac26a..266b57a9 100644 --- a/lona/templates/lona/frontend.html +++ b/lona/templates/lona/frontend.html @@ -1,3 +1,4 @@ + @@ -12,8 +13,8 @@ {% include "lona/footer.html" %} {{ Lona.load_scripts() }} diff --git a/lona/templates/lona/frontend.js b/lona/templates/lona/frontend.js index d2dc82d5..e69de29b 100644 --- a/lona/templates/lona/frontend.js +++ b/lona/templates/lona/frontend.js @@ -1,3 +0,0 @@ -lona_context.add_disconnect_hook(function(lona_context, event) { - document.querySelector('#lona').innerHTML = 'Server disconnected'; -}); diff --git a/lona/templates/lona/waiting-for-server-message.html b/lona/templates/lona/waiting-for-server-message.html new file mode 100644 index 00000000..822b970d --- /dev/null +++ b/lona/templates/lona/waiting-for-server-message.html @@ -0,0 +1 @@ +Waiting for Server...