Merge pull request #2081 from Squidly271/nchan-fix

Refactor: Prevent nchan updates on browsers not in focus

emhttp/plugins/dynamix.docker.manager/DockerContainers.page

@@ -192,10 +192,7 @@ $(function() {
   });
   $.removeCookie('lockbutton');
   loadlist(true);
-  dockerload.start();
+  dockerload.start().monitor();
 });
 
-window.onunload = function(){
-  dockerload.stop();
-}
 </script>

emhttp/plugins/dynamix.vm.manager/VMUsageStats.page

@@ -4,8 +4,8 @@ Nchan="vm_usage:stop"
 Cond="exec(\"grep -o '^USAGE=.Y' /boot/config/domain.cfg 2>/dev/null\") && is_file('/var/run/libvirt/libvirtd.pid')"
 ---
 <?PHP
-/* Copyright 2005-2024, Lime Technology
- * Copyright 2012-2024, Simon Fairweather.
+/* Copyright 2005-2025, Lime Technology
+ * Copyright 2012-2025, Simon Fairweather.
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License version 2,
@@ -32,10 +32,7 @@ vmusage.on('message', function(msg){
   });
 
 $(function(){
-  vmusage.start();
+  vmusage.start().monitor();
 });
 
-window.onunload = function(){
-  vmusage.stop();
-}
 </script>

emhttp/plugins/dynamix/ArrayOperation.page

@@ -114,7 +114,7 @@ function toggle_state(device,name,action) {
     button = '[id^=button-]';
   }
   devices.stop();
-  $.post('/webGui/include/ToggleState.php',{device:device,name:name,action:action},function(){setTimeout(function(){devices.start();},1000);if (button) $(button).prop('disabled',false);});
+  $.post('/webGui/include/ToggleState.php',{device:device,name:name,action:action},function(){setTimeout(function(){devices.start().monitor();},1000);if (button) $(button).prop('disabled',false);});
 }
 
 function display_diskio() {
@@ -364,7 +364,7 @@ mymonitor.on('message', function(state) {
     break;
   }
 });
-mymonitor.start();
+mymonitor.start().monitor();
 <?endif;?>
 
 var arraymonitor = new NchanSubscriber('/sub/arraymonitor',{subscriber:'websocket'});
@@ -420,7 +420,7 @@ devices.on('message', function(msg,meta) {
     break;
   }
 });
-devices.start();
+devices.start().monitor();
 
 <?if (substr(_var($var,'fsState'),-3)=='ing'):?>
 var fsState = new NchanSubscriber('/sub/fsState',{subscriber:'websocket'});
@@ -434,7 +434,7 @@ fsState.on('message', function(msg) {
     break;
   }
 });
-fsState.start();
+fsState.start().monitor();
 <?elseif ($spot):?>
 setTimeout(function(){$('#pauseButton').prop('disabled',false);$('#cancelButton').prop('disabled',false);},250);
 <?else:?>

emhttp/plugins/dynamix/DashStats.page

@@ -1791,12 +1791,12 @@ $(function() {
 <?endif;?>
   dropdown('enter_view');
   startup = false;
-  dashboard.start();
+  dashboard.start().monitor();
 <?if ($vmusage == "Y"):?>
-  vmdashusage.start();
+  vmdashusage.start().monitor();
 <?endif;?>
 <?if ($apcupsd):?>
-  apcups.start();
+  apcups.start().monitor();
 <?endif;?>
   update900();
   toggleChart(true);
@@ -1809,22 +1809,15 @@ $(function() {
   $('#netline').val(netline);
   $.removeCookie('lockbutton');
   // remember latest graph values
-  $(window).on('beforeunload',function(e){
-    var data = {};
-    data.cpu = cpu.tail(cpuline);
-    data.rxd = rxd.tail(netline);
-    data.txd = txd.tail(netline);
-    $.post('/webGui/include/InitCharts.php',{cmd:'set',data:JSON.stringify(data)});
-  });
 });
 
-window.onunload = function(){
-  dashboard.stop();
-<?if ($vmusage == "Y"):?>
-    vmdashusage.stop();
+// Start graphs over again when window back in focus
+<? if ( $display['liveUpdate'] == "no" ):?>
+$(window).blur(function() {
+  cpu = [];
+  rxd = [];
+  txd = [];
+});
 <?endif;?>
-<?if ($apcupsd):?>
-  apcups.stop();
-<?endif;?>
-}
+
 </script>

emhttp/plugins/dynamix/DisplaySettings.page

@@ -4,8 +4,8 @@ Icon="icon-display"
 Tag="desktop"
 ---
 <?PHP
-/* Copyright 2005-2023, Lime Technology
- * Copyright 2012-2023, Bergware International.
+/* Copyright 2005-2025, Lime Technology
+ * Copyright 2012-2025, Bergware International.
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License version 2,
@@ -323,6 +323,12 @@ _(Favorites enabled)_:
 
 :display_favorites_enabled_help:
 
+_(Allow realtime updates on inactive browsers)_:
+: <select name='liveUpdate'>
+  <?=mk_option($display['liveUpdate'],"no",_('No'))?>
+  <?=mk_option($display['liveUpdate'],"yes",_('Yes'))?>
+  </select>
+
 <input type="submit" name="#default" value="_(Default)_" onclick="filename='reset'">
 : <input type="submit" name="#apply" value="_(Apply)_" disabled><input type="button" value="_(Done)_" onclick="done()">
 </form>

emhttp/plugins/dynamix/default.cfg

@@ -35,6 +35,7 @@ headermetacolor=""
 headerdescription="yes"
 showBannerGradient="yes"
 favorites="yes"
+liveUpdate="no"
 [parity]
 mode="0"
 hour="0 0"

emhttp/plugins/dynamix/include/DefaultPageLayout.php

@@ -105,10 +105,14 @@ if (!file_exists($notes)) file_put_contents($notes,shell_exec("$docroot/plugins/
 <script>
 String.prototype.actionName = function(){return this.split(/[\\/]/g).pop();}
 String.prototype.channel = function(){return this.split(':')[1].split(',').findIndex((e)=>/\[\d\]/.test(e));}
-
+NchanSubscriber.prototype.monitor = function(){subscribers.push(this);}
+  
 Shadowbox.init({skipSetup:true});
 context.init();
 
+// list of nchan subscribers to start/stop at focus change
+var subscribers = [];
+ 
 // server uptime
 var uptime = <?=strtok(exec("cat /proc/uptime"),' ')?>;
 var expiretime = <?=_var($var,'regTy')=='Trial'||strstr(_var($var,'regTy'),'expired')?_var($var,'regTm2'):0?>;
@@ -719,8 +723,7 @@ unset($buttons,$button);
 
 // Build page content
 // Reload page every X minutes during extended viewing?
-if (isset($myPage['Load']) && $myPage['Load']>0) echo "\n<script>timers.reload = setTimeout(function(){location.reload();},".($myPage['Load']*60000).");</script>\n";
-echo "<div class='tabs'>";
+if (isset($myPage['Load']) && $myPage['Load']>0 && $display['liveUpdate'] !== "no") echo "\n<script>timers.reload = setInterval(function(){if (nchanPaused === false)location.reload();},".($myPage['Load']*60000).");</script>\n";echo "<div class='tabs'>";
 $tab = 1;
 $pages = [];
 if (!empty($myPage['text'])) $pages[$myPage['name']] = $myPage;
@@ -1232,6 +1235,52 @@ $('body').on('click','a,.ca_href', function(e) {
     }
   }
 });
+  
+// Start & stop live updates when window loses focus
+var nchanPaused = false;
+<? if ( $display['liveUpdate'] == "no" ):?>
+$(window).focus(function() {
+  if (nchanPaused !== false ) {
+    removeBannerWarning(nchanPaused);
+    nchanPaused = false;
+    subscribers.forEach(function(e) {
+      e.start();
+    });
+  }   
+});
+ 
+// Stop nchan on loss of focus
+$(window).blur(function() {
+  nchanFocusStop();
+});
+<?endif;?>
+// Include both beforeunload and unload as this may be unreliable in certain circumstances on mobile devices
+window.onbeforeunload = function() {
+  nchanFocusStop(false);
+}
+
+window.onunload = function()  {
+  nchanFocusStop(false);
+}
+
+function nchanFocusStop(banner=true) {
+  if ( subscribers.length ) {
+    if ( nchanPaused === false ) {
+      var newsub = subscribers;
+      subscribers.forEach(function(e) {
+        try {
+          e.stop();
+        } catch(err) {
+          newsub.splice(newsub.indexOf(e,1));
+        }
+      });
+      subscribers = newsub;
+      if ( banner && subscribers.length ) {
+        nchanPaused = addBannerWarning("<?=_('Live Updates Paused');?>",false,true );
+      }
+    }
+  }
+}
 </script>
 </body>
 </html>