Using shared web worker to maintain state

finos · Dec 12, 2023 · 8a81e5c · 8a81e5c
1 parent 79f1f39
commit 8a81e5c
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 49 deletions.
diff --git a/packages/demo/src/SimpleServer.ts b/packages/demo/src/SimpleServer.ts
@@ -0,0 +1,25 @@
+
+/**
+ * This is a very basic implementation of the server side of the desktop agent. 
+ * You can register message ports with it and plug in extra functionality to handle new message types. 
+ */
+
+class SimpleServer {
+
+    constructor() {
+    }
+
+    register(client: MessagePort) {
+        console.log("Added new listener")
+        client.addEventListener("message", e => {
+            console.log("Received: "+e.data)
+        })
+    }
+}
+
+const theServer = new SimpleServer();
+
+onconnect = function (event) {
+    const port = event.ports[0]
+    theServer.register(port)
+}
diff --git a/packages/demo/src/app1.ts b/packages/demo/src/app1.ts
@@ -14,7 +14,9 @@ function createContext(i: number) {
  * Can be called any number of times.
  */
 async function startBroadcasting() {
+    console.log("starting...")
     const fdc3 = await getClientAPI(); 
+    console.log("got api...")
     for (let index = 0; index < 50; index++) {
         setTimeout(() => fdc3.broadcast(createContext(index)), index*1000);
     }

diff --git a/packages/demo/src/dummy-desktop-agent.ts b/packages/demo/src/dummy-desktop-agent.ts
@@ -1,5 +1,5 @@
 import { AppIdentifier } from "@finos/fdc3";
-import { AppChecker, DesktopAgentDetailResolver, } from "fdc3-common";
+import { AppChecker, DesktopAgentDetailResolver, FDC3_PORT_TRANSFER_REQUEST_TYPE, } from "fdc3-common";
 import { supply } from "server";
 
 enum Approach { Tab, Frame, Nested }
@@ -68,25 +68,33 @@ window.addEventListener("load", () => {
     }
 
     // for a given window, allows us to determine which app it is (if any)
-    const appChecker : AppChecker = o => instances.find(i => i.window ==o) != undefined;
+    const appChecker : AppChecker = o => instances.find(i => i.window == o)
+
     const detailsResolver : DesktopAgentDetailResolver = (o) => { 
-        const appIdentifier = instances.find(i => i.window ==o)!!
         return { 
-            url: "/src/demo/implementation.ts",
-            apiId : currentApiInstance++, 
-            apikey: "Abc",
-            appId: appIdentifier.appId,
-            instanceId: appIdentifier.instanceId!!
+            apikey: "Abc"
         }
     }
 
     // set up desktop agent handler here using FDC3 Web Loader (or whatever we call it)
-    supply(appChecker, detailsResolver);
+    supply(appChecker, detailsResolver, {
+        uri: "http://localhost:8080/static/embed/index.html"
+    })
 
     // hook up the buttons
     document.getElementById("app1")?.addEventListener("click", () => launch("/static/app1/index.html", "1"));
     document.getElementById("app2")?.addEventListener("click", () => launch("http://robs-pro:8080/static/app2/index.html", "2"));
     document.getElementById("app3")?.addEventListener("click", () => launch("http://localhost:8080/static/app3/index.html", "3"));
 
+    // // listen for desktop agent ports being sent to connect
+    // bc.addEventListener(
+    //     "message",
+    //     (event) => {
+    //         console.log("Received "+event)
+    //         if (event.data.type == FDC3_PORT_TRANSFER_REQUEST_TYPE) {
+    //             const port = event.data.payload
+    //             server.register(port)
+    //         }
+    //     });
 })
 
diff --git a/packages/demo/src/embed.ts b/packages/demo/src/embed.ts
@@ -0,0 +1,16 @@
+import { FDC3_PORT_TRANSFER_REQUEST_TYPE, FDC3_PORT_TRANSFER_RESPONSE_TYPE, exchange, exchangePostMessage } from "fdc3-common";
+
+const appWindow = window.parent;  
+
+window.addEventListener("load", () => {
+
+    const sw = new SharedWorker('http://localhost:8080/src/SimpleServer.ts')
+    sw.port.start()
+
+    // the other end to the app
+    appWindow.postMessage({
+        type: FDC3_PORT_TRANSFER_RESPONSE_TYPE,
+    },"*", [sw.port])
+
+
+})
diff --git a/packages/demo/src/nested.ts b/packages/demo/src/nested.ts
diff --git a/packages/demo/static/app1/index.html b/packages/demo/static/app1/index.html
@@ -3,7 +3,7 @@
 <head>
   <title>App 1</title>
   <meta charset="UTF-8" />
-  <script type="module" src="/src/app1.ts"></script>
+  <script type="module" src="../../src/app1.ts"></script>
 </head>
 
 <body>

diff --git a/packages/demo/static/embed/index.html b/packages/demo/static/embed/index.html
@@ -3,24 +3,12 @@
 <head>
     <title>Desktop Agent - Embedded Communications Agent</title>
     <meta charset="UTF-8" />
-    <script type="module" src="/src/demo/nested.ts"></script>
+    <script type="module" src="../../src/embed.ts"></script>
 </head>
 
 <body>
-    <p>Dummy Desktop Agent</p>
-
-    <select name="opener" id="opener">
-        <option value="Tab" default>New Tab</option>
-        <option value="Frame">Frame</option>
-        <option value="Nested">Nested Frame</option>
-    </select>
-
-    <a type="button" href="#" id="app1" >Open App 1</a>
-
-    <a type="button" href="#"  id="app2" >Open App 2</a>
-
-    <a type="button" href="#"  id="app3" >Open App 3</a>
-
+    <p>
+        Nothing to see here
     </p>
 
 </body>