add remote fancy screen through backend

frontend/package-lock.json

@@ -15,6 +15,7 @@
         "cors": "^2.8.5",
         "csv-parser": "^3.0.0",
         "electron-squirrel-startup": "^1.0.0",
+        "eventsource": "^2.0.2",
         "express-session": "^1.17.3",
         "ip": "^1.1.8",
         "jquery": "^3.7.1",
@@ -6869,6 +6870,14 @@
         "node": ">=0.8.x"
       }
     },
+    "node_modules/eventsource": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
+      "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/execa": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/execa/-/execa-1.0.0.tgz",
@@ -20172,6 +20181,11 @@
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
       "dev": true
     },
+    "eventsource": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
+      "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA=="
+    },
     "execa": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/execa/-/execa-1.0.0.tgz",

frontend/package.json

@@ -31,6 +31,7 @@
     "cors": "^2.8.5",
     "csv-parser": "^3.0.0",
     "electron-squirrel-startup": "^1.0.0",
+    "eventsource": "^2.0.2",
     "express-session": "^1.17.3",
     "ip": "^1.1.8",
     "jquery": "^3.7.1",

frontend/src/app.js

@@ -12,6 +12,7 @@ const ip = require( 'ip' );
 const jwt = require( 'jsonwebtoken' );
 const shell = require( 'electron' ).shell;
 const beautify = require( 'json-beautify' );
+const EventSource = require( 'eventsource' );
 
 
 app.use( bodyParser.urlencoded( { extended: false } ) );
@@ -41,12 +42,72 @@ const connect = () => {
         } ).catch( err => {
             console.error( err );
         } );
+        connectToSSESource();
         return 'connecting';
     } else {
         return 'noAuthKey';
     }
 };
 
+let isSSEAuth = false;
+let sessionToken = '';
+let errorCount = 0;
+let isReconnecting = false;
+
+const connectToSSESource = () => {
+    if ( isSSEAuth ) {
+        let source = new EventSource( remoteURL + '/mainNotifier', { 
+            https: true, 
+            withCredentials: true,
+            headers: {
+                'Cookie': sessionToken
+            }
+        } );
+        source.onmessage = ( e ) => {
+            let data;
+            try {
+                data = JSON.parse( e.data );
+            } catch ( err ) {
+                data = { 'type': e.data };
+            }
+            if ( data.type === 'blur' ) {
+                sendClientUpdate( data.type, data.ip );
+            } else if ( data.type === 'visibility' ) {
+                sendClientUpdate( data.type, data.ip );
+            }
+        };
+
+        source.onopen = () => {
+            console.log( '[ BACKEND INTEGRATION ] Connection to notifier successful' );
+        };
+            
+        source.addEventListener( 'error', function( e ) {
+            if ( e.eventPhase == EventSource.CLOSED ) source.close();
+
+            setTimeout( () => {
+                if ( !isReconnecting ) {
+                    if ( errorCount > 5 ) {
+                        isSSEAuth = false;
+                    }
+                    isReconnecting = true;
+                    console.log( '[ BACKEND INTEGRATION ] Disconnected from notifier, reconnecting...' );
+                    connectToSSESource();
+                }
+            }, 1000 );
+        }, false );
+    } else {
+        axios.post( remoteURL + '/authSSE', { 'authKey': authKey } ).then( res => {
+            if ( res.status == 200 ) {
+                sessionToken = res.headers[ 'set-cookie' ][ 0 ].slice( 0, res.headers[ 'set-cookie' ][ 0 ].indexOf( ';' ) );
+                isSSEAuth = true;
+                connectToSSESource();
+            } else {
+                connectToSSESource();
+            }
+        } );
+    }
+}
+
 let authKey = conf.authKey ?? '';
 
 connect();

frontend/src/client/showcase.js

@@ -152,7 +152,10 @@ createApp( {
 
                 // TODO: Notify about disconnect
                 setTimeout( () => {
-                    self.connect();
+                    if ( !self.isReconnecting ) {
+                        self.isReconnecting = true;
+                        self.connect();
+                    }
                 }, 1000 );
             }, false );
         },