templates: frontend: add auto reconnect

Signed-off-by: Florian Scherf <mail@florianscherf.de>
lona-web-org · Aug 31, 2023 · 43a2d7e · 43a2d7e
1 parent 1129959
commit 43a2d7e
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 95 deletions.
diff --git 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
-
- <!-- templates/lona/frontend.html -->
- <html>
- <head>
- <meta charset="utf-8" />
- {{ Lona.load_stylesheets() }}
- <link href="{{ Lona.load_static_file('lona/style.css') }}" rel="stylesheet">
- </head>
- <body>
- {% include "lona/header.html" %}
- <div id="lona"></div>
- {% include "lona/footer.html" %}
- {{ Lona.load_scripts() }}
- <script>
- var lona_context = new Lona.LonaContext({
- target: '#lona',
- title: 'Lona',
- update_address_bar: true,
- update_title: true,
- follow_redirects: true,
- follow_http_redirects: true,
- });
-
- {% include "lona/frontend.js" %}
-
- lona_context.setup();
- </script>
- </body>
- </html>
-
+ :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
@@ -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``
+ 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
diff --git 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
@@ -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
@@ -0,0 +1,4 @@
+<h1>Server Disconnected</h1>
+{% if Lona.settings.CLIENT_AUTO_RECONNECT %}
+ Trying to reconnect...
+{% endif %}
diff --git a/lona/templates/lona/frontend.html b/lona/templates/lona/frontend.html
@@ -1,3 +1,4 @@
+<!-- templates/lona/frontend.html -->
 <html>
  <head>
  <meta charset="utf-8" />
@@ -12,8 +13,8 @@
  {% include "lona/footer.html" %}
  {{ Lona.load_scripts() }}
  <script>
- window.addEventListener('load', function() {
- var lona_context = new Lona.LonaContext({
+ window.addEventListener('load', () => {
+ const lona_context = new Lona.LonaContext({
  target: '#lona',
  title: 'Lona',
  update_address_bar: true,
@@ -22,9 +23,62 @@
  follow_http_redirects: true,
  });
 
+ {% if Lona.settings.CLIENT_AUTO_RECONNECT %}
+ const auto_reconnect = true;
+ {% else %}
+ const auto_reconnect = false;
+ {% endif %}
+
+ let first_connect = true;
+
+ lona_context.add_connect_hook((lona_context) => {
+
+ // reconnect
+ // reload whole page in case static files changed
+ if(!first_connect) {
+ window.location = window.location;
+
+ return;
+ }
+
+ // first connect
+ first_connect = false;
+ });
+
+ // disconnect
+ lona_context.add_disconnect_hook((lona_context) => {
+ document.querySelector('#lona').innerHTML = '{% include "lona/disconnect-message.html" %}';
+
+ if(!auto_reconnect) {
+ return;
+ }
+
+ setTimeout(() => {
+ lona_context.reconnect({
+
+ // we don't create a window and start a view on the server
+ // since we reload the page once the client reconnects anyway
+ create_window: false,
+ });
+ }, {{ Lona.settings.CLIENT_AUTO_RECONNECT_TIMEOUT }});
+ });
+
+ // waiting for server messages
+ lona_context.add_view_timeout_hook((lona_context, lona_window) => {
+ lona_window.set_html('{% include "lona/waiting-for-server-message.html" %}');
+ });
+
+ lona_context.add_input_event_timeout_hook((lona_context, lona_window) => {
+ alert('{% include "lona/waiting-for-server-message.html" %}');
+ });
+
+ // custom hooks
  {% include "lona/frontend.js" %}
 
+ // setup
  lona_context.setup();
+
+ window['lona_context'] = lona_context;
  });
  </script>
  </body>

diff --git 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
@@ -0,0 +1 @@
+Waiting for Server...