templates: frontend: add auto reconnect

Signed-off-by: Florian Scherf <mail@florianscherf.de>

doc/content/api-reference/settings.rst

@@ -134,6 +134,25 @@ 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_TITLE
+ :path: lona.default_settings.CLIENT_TITLE
+
+ Default tab title
+
 .. setting::
  :name: CLIENT_VIEW_START_TIMEOUT
  :path: lona.default_settings.CLIENT_VIEW_START_TIMEOUT
@@ -344,4 +363,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``

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'],
 

lona/default_settings.py

@@ -48,6 +48,9 @@
 CLIENT_VIEW_START_TIMEOUT = 2
 CLIENT_INPUT_EVENT_TIMEOUT = 2
 CLIENT_PING_INTERVAL = 60
+CLIENT_AUTO_RECONNECT = True
+CLIENT_AUTO_RECONNECT_TIMEOUT = 1000
+CLIENT_TITLE = 'Lona'
 
 
 # sessions

lona/templates/lona/disconnect-message.html

@@ -0,0 +1,4 @@
+<h1>Server Disconnected</h1>
+{% if Lona.settings.CLIENT_AUTO_RECONNECT %}
+ Trying to reconnect...
+{% endif %}

lona/templates/lona/frontend.html

@@ -12,19 +12,73 @@
  {% 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',
+ title: '{{ Lona.settings.CLIENT_TITLE }}',
  update_address_bar: true,
  update_title: true,
  follow_redirects: true,
  follow_http_redirects: true,
  });
 
- {% include "lona/frontend.js" %}
+ {% 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" %}');
+ });
+
+ // setup
  lona_context.setup();
+
+ window['lona_context'] = lona_context;
  });
  </script>
  </body>

lona/templates/lona/waiting-for-server-message.html

@@ -0,0 +1 @@
+Waiting for Server...