shorter init, avoid duplicate revivers part II, turn off keepalive lo…

…gs when disconnected
GenieFramework · Nov 12, 2024 · e9e2c7e · e9e2c7e
1 parent 3ab7cb5
commit e9e2c7e
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 33 deletions.
diff --git a/assets/js/keepalive.js b/assets/js/keepalive.js
@@ -14,13 +14,14 @@ function keepalive(WebChannel) {
     }
   }
 
-  if (Genie.Settings.env == 'dev') {
-    console.info('Keeping connection alive');
+  if (!WebChannel.wsconnectionalert_triggered) {
+    if (Genie.Settings.env == 'dev') {
+      console.info('Keeping connection alive');
+    }
+    WebChannel.sendMessageTo(WebChannel.channel, 'keepalive', {
+      'payload': {}
+    });
   }
-
-  WebChannel.sendMessageTo(WebChannel.channel, 'keepalive', {
-    'payload': {}
-  });
 }
 
 function keepaliveTimer(WebChannel, startDelay = Genie.Settings.webchannels_keepalive_frequency) {

diff --git a/src/Elements.jl b/src/Elements.jl
@@ -159,7 +159,7 @@ function vue_integration(::Type{M};
   string(
     "
 
-  function initStipple$vue_app_name(appName, rootSelector){
+  function initStipple$vue_app_name(appName, rootSelector, channel){
     // components = Stipple.init($( core_theme ? "{theme: '$theme'}" : "" ));
     const app = Vue.createApp($( replace(vue_app, "'$(Stipple.UNDEFINED_PLACEHOLDER)'"=>Stipple.UNDEFINED_VALUE) ))
     /* Object.entries(components).forEach(([key, value]) => {
@@ -177,9 +177,9 @@ function vue_integration(::Type{M};
     });
     $app = window.GENIEMODEL = app.mount(rootSelector);
     window.channelIndex = window.channelIndex || 0;
-    $app.WebChannel = Genie.WebChannels;
+    $app.WebChannel = Genie.initWebChannel(channel);
     $app.WebChannel.parent = $app;
-    $app.channel_ = $app.WebChannel.channel;
+    $app.channel_ = channel;
 
     channelIndex++;
   } // end of initStipple
@@ -216,34 +216,34 @@ function vue_integration(::Type{M};
   }
 
   function app_ready(app) {
-      app.isready = true;
-      Genie.Revivers.addReviver(app.revive_jsfunction);
-      $(transport == Genie.WebChannels &&
-      "
-      try {
-        if (Genie.Settings.webchannels_keepalive_frequency > 0) {
-          keepaliveTimer(app.WebChannel, 0);
-        }
-      } catch (e) {
-        if (Genie.Settings.env === 'dev') {
-          console.error('Error setting WebSocket keepalive interval: ' + e);
-        }
+    if (app.WebChannel == Genie.AllWebChannels[0]) Genie.Revivers.addReviver(app.revive_jsfunction);
+    app.isready = true;
+    $(transport == Genie.WebChannels &&
+    "
+    try {
+      if (Genie.Settings.webchannels_keepalive_frequency > 0) {
+        keepaliveTimer(app.WebChannel, 0);
       }
-      ")
-
+    } catch (e) {
       if (Genie.Settings.env === 'dev') {
-        console.info('App starting');
+        console.error('Error setting WebSocket keepalive interval: ' + e);
       }
+    }
+    ")
+
+    if (Genie.Settings.env === 'dev') {
+      console.info('App starting');
+    }
   };
 
-  function create$vue_app_name() {
+  function create$vue_app_name(channel) {
     window.counter$vue_app_name = window.counter$vue_app_name || 1
     const appName = '$vue_app_name' + ((counter$vue_app_name == 1) ? '' : '_' + window.counter$vue_app_name)
     rootSelector = '#$vue_app_name' + ((counter$vue_app_name == 1) ? '' : '-' + window.counter$vue_app_name)
     counter$vue_app_name++
 
     if ( window.autorun === undefined || window.autorun === true ) {
-      initStipple$vue_app_name(appName, rootSelector);
+      initStipple$vue_app_name(appName, rootSelector, channel);
       initWatchers$vue_app_name($app);
 
       $app.WebChannel.subscriptionHandlers.push(function(event) {

diff --git a/src/Stipple.jl b/src/Stipple.jl
@@ -848,13 +848,13 @@ end
 
 function channelscript(channel::String) :: String
   Genie.Renderer.Html.script(["""
-  document.addEventListener("DOMContentLoaded", () => window.Genie.initWebChannel('$(channel)') );
+  document.addEventListener('DOMContentLoaded', () => window.Genie.initWebChannel('$dchannel') );
   """])
 end
 
-function initscript(vue_app_name) :: String
+function initscript(vue_app_name, channel) :: String
   Genie.Renderer.Html.script(["""
-  document.addEventListener("DOMContentLoaded", () => window.create$vue_app_name() );
+  document.addEventListener('DOMContentLoaded', () => window.create$vue_app_name('$channel') );
   """])
 end
 
@@ -866,8 +866,8 @@ Outputs the HTML code necessary for injecting the dependencies in the page (the
 function deps(m::M) :: Vector{String} where {M<:ReactiveModel}
   channel = getchannel(m)
   output = [
-    channelscript(channel),
-    initscript(vm(m)),
+    # channelscript(channel),
+    initscript(vm(m), channel),
     (is_channels_webtransport() ? Genie.Assets.channels_script_tag(channel) : Genie.Assets.webthreads_script_tag(channel)),
     Genie.Renderer.Html.script(src = Genie.Assets.asset_path(assets_config, :js, file="underscore-min")),
     Genie.Renderer.Html.script(src = Genie.Assets.asset_path(assets_config, :js, file=(Genie.Configuration.isprod() ? "vue.global.prod" : "vue.global"))),

diff --git a/src/stipple/jsmethods.jl b/src/stipple/jsmethods.jl
@@ -204,7 +204,7 @@ myreviver: function(key, value) { return (key.endsWith('_onebased') ? value - 1
 """  
 function js_add_reviver(revivername::String)
   """
-  document.addEventListener("DOMContentLoaded", () => Genie.WebChannels.subscriptionHandlers.push(function(event) {
+  document.addEventListener('DOMContentLoaded', () => Genie.WebChannels.subscriptionHandlers.push(function(event) {
       Genie.Revivers.addReviver($revivername);
   }));
   """
@@ -222,7 +222,7 @@ It needs to be added to the dependencies of an app in order to be executed, e.g.
 """
 function js_initscript(initscript::String)
   """
-  document.addEventListener("DOMContentLoaded", () => Genie.WebChannels.subscriptionHandlers.push(function(event) {
+  document.addEventListener('DOMContentLoaded', () => Genie.WebChannels.subscriptionHandlers.push(function(event) {
       $(initscript)
   }));
   """