Merge pull request #1695 from finos/1693-web-reference-impl-to-use-messageport

1693 web reference impl to use messageport

Author: kriswest

CHANGELOG.md

@@ -8,8 +8,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 * Enhanced method binding for FDC3 API objects to support destructuring. All public methods of `Channel`, `PrivateChannel`, and `IntentResolution` objects are now properly bound to their instances using `.bind(this)` in their constructors. ([#1645](https://github.com/finos/FDC3/issues/1645))
 
 ### Added
-* Add a notes field to Trade type ([#1563](https://github.com/finos/FDC3/pull/1563))
-* Add a notes field to Order and Product types ([#1597](https://github.com/finos/FDC3/pull/1597))
+
+* Added a notes field to Trade type ([#1563](https://github.com/finos/FDC3/pull/1563))
+* Added a notes field to Order and Product types ([#1597](https://github.com/finos/FDC3/pull/1597))
 * Added Go language binding. ([#1483](https://github.com/finos/FDC3/pull/1483))
 * Added dynamic intent listener support to the reference Desktop Agent implementation ([#1613](https://github.com/finos/FDC3/pull/1613))
 * Added details of and procedures for resolving fully-qualified appIds and unqualified appIds in the API and Bridging Parts of the Standard. ([#1523](https://github.com/finos/FDC3/pull/1523))
@@ -24,14 +25,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ### Fixed
 
-* Updated .NET API documentation for IListener.Unsubscribe to be async for 2.2 and current. ([#1690](https://github.com/finos/FDC3/pull/1690))
+* Corrected /toolbox/fdc3-for-web/demo to only use MessagePort communication when 'Parent Post-Message' selected in the demo. ([#1695](https://github.com/finos/FDC3/pull/1695))
 * Corrected the property set in WCP1Hello by getAgent that indicates whether an intent resolver is needed. ([#1684](https://github.com/finos/FDC3/issues/1684))
-* Add unit tests to the fdc3-context package for validating context examples are valid schema.
-* Revert schema of `fdc3.timeRange` context type back to use anyOf in place of oneOf for the `startTime` and `endTime` property combinations.  This will allow existence of one of either, or both, and pass schema validation.  When defined with oneOf, validation would fail due to multiple entries being valid and it could not identify which to apply. ([#1592](https://github.com/finos/FDC3/issues/1592))
-* Revert schema of `fdc3.interaction` context type back to use anyOf in place of oneOf for the `interactionType` property.  Since it could be a string enum or a string, validation could not differentiate. ([#1598](https://github.com/finos/FDC3/issues/1598))
-* Fix `fdc3.timeRange` context example to use correctly formatted dateTime. ([#1599](https://github.com/finos/FDC3/issues/1599))
-* Removes broken sourcemaps from npm package output ([#1589](https://github.com/finos/FDC3/issues/1589))
+* Added unit tests to the fdc3-context package for validating context examples are valid schema.
+* Reverted schema of `fdc3.timeRange` context type back to use anyOf in place of oneOf for the `startTime` and `endTime` property combinations.  This will allow existence of one of either, or both, and pass schema validation.  When defined with oneOf, validation would fail due to multiple entries being valid and it could not identify which to apply. ([#1592](https://github.com/finos/FDC3/issues/1592))
+* Reverted schema of `fdc3.interaction` context type back to use anyOf in place of oneOf for the `interactionType` property.  Since it could be a string enum or a string, validation could not differentiate. ([#1598](https://github.com/finos/FDC3/issues/1598))
+* Fixed `fdc3.timeRange` context example to use correctly formatted dateTime. ([#1599](https://github.com/finos/FDC3/issues/1599))
+* Removed broken sourcemaps from npm package output ([#1589](https://github.com/finos/FDC3/issues/1589))
 * Fixed the `fdc3-commonjs` build to include `d.ts` files and corrects the config for easier consumption in different environments. ([#1694](https://github.com/finos/FDC3/issues/1694))
+* Updated .NET API documentation for IListener.Unsubscribe to be async for 2.2 and current. ([#1690](https://github.com/finos/FDC3/pull/1690))
 
 ## [FDC3 Standard 2.2](https://github.com/finos/FDC3/compare/v2.1..v2.2) - 2025-03-12
 

toolbox/fdc3-for-web/demo/eslint.config.mjs

@@ -5,6 +5,13 @@ import eslintConfigPrettier from 'eslint-config-prettier';
 
 /** @type {import('eslint').Linter.Config[]} */
 export default [
+  {
+    languageOptions: {
+      parserOptions: {
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
   { files: ['**/*.{js,mjs,cjs,ts}'] },
   { languageOptions: { globals: globals.browser } },
   pluginJs.configs.recommended,

toolbox/fdc3-for-web/demo/src/client/da/DemoServerContext.ts

@@ -20,6 +20,7 @@ enum Opener {
 type RunningAppRegistration = AppRegistration & {
   window: Window;
   url: string;
+  messagePort?: MessagePort;
 };
 
 type LaunchingAppRegistration = AppRegistration & {
@@ -165,7 +166,19 @@ export class DemoServerContext implements ServerContext<DemoAppRegistration> {
    * Post an outgoing message to a particular app
    */
   async post(message: object, to: InstanceID): Promise<void> {
-    this.socket.emit(FDC3_DA_EVENT, message, to);
+    //figure out if we're using a MessagePort or the socket to communicate with the app
+    const registration = this.getInstanceDetails(to);
+    if (registration && isRunningAppRegistration(registration)) {
+      if (registration.messagePort) {
+        registration.messagePort.postMessage(message);
+      } else {
+        this.socket.emit(FDC3_DA_EVENT, message, to);
+      }
+    } else if (!registration) {
+      console.error("Can't message unknown app instance: ", to);
+    } else {
+      console.error("Can't message app that is not yet connected: ", to);
+    }
   }
 
   openFrame(url: string): Promise<Window | null> {

toolbox/fdc3-for-web/demo/src/client/da/dummy-desktop-agent.ts

@@ -1,11 +1,11 @@
 import { io } from 'socket.io-client';
 import { v4 as uuid } from 'uuid';
-import { APP_GOODBYE, APP_HELLO, DA_HELLO, FDC3_APP_EVENT } from '../../message-types';
+import { APP_GOODBYE, DA_HELLO, FDC3_APP_EVENT } from '../../message-types';
 import { DemoServerContext } from './DemoServerContext';
 import { FDC3_2_1_JSONDirectory } from './FDC3_2_1_JSONDirectory';
 import { AppRegistration, DefaultFDC3Server, DirectoryApp, ServerContext } from '@finos/fdc3-web-impl';
 import { ChannelState, ChannelType } from '@finos/fdc3-web-impl/src/handlers/BroadcastHandler';
-import { link, UI, UI_URLS } from './util';
+import { UI, UI_URLS } from './util';
 import { BrowserTypes } from '@finos/fdc3-schema';
 import { WebConnectionProtocol3Handshake } from '@finos/fdc3-schema/dist/generated/api/BrowserTypes';
 
@@ -171,11 +171,14 @@ window.addEventListener('load', () => {
       const source = event.source as Window;
       const origin = event.origin;
 
-      console.log('Received: ' + JSON.stringify(event.data));
+      console.log('Received window.postMessage: ' + JSON.stringify(event.data));
       if (data.type == 'WCP1Hello') {
         const instance = await sc.getInstanceForWindow(source);
         if (instance) {
+          console.log('Identified instance for source window: ' + JSON.stringify(instance.instanceId));
+
           if (getApproach() == Approach.IFRAME) {
+            // Let getAgent/the app know to load an adaptor into an iframe via WCP2LoadUrl
             const message: WebConnectionProtocol2LoadURL = {
               type: 'WCP2LoadUrl',
               meta: {
@@ -189,14 +192,31 @@ window.addEventListener('load', () => {
               },
             };
 
+            console.log('Responding with message: ', JSON.stringify(message));
+
+            // no message port is included as communication will be setup with the iframe
             source.postMessage(message, origin);
           } else {
+            //setup a MessageChannel and handling for incoming messages on it
             const channel = new MessageChannel();
-            link(socket, channel, instance.instanceId);
-            socket.emit(APP_HELLO, desktopAgentUUID, instance.instanceId);
+            channel.port2.onmessage = message => {
+              console.log(
+                `message received on message port for app ${instance.instanceId}, message: ${JSON.stringify(message.data)}`
+              );
+              const msg = message.data as
+                | BrowserTypes.AppRequestMessage
+                | BrowserTypes.WebConnectionProtocol4ValidateAppIdentity
+                | BrowserTypes.WebConnectionProtocol6Goodbye;
+              fdc3Server.receive(msg, instance.instanceId);
+            };
+
+            //update the server Context with the MessagePort
+            await sc.setInstanceDetails(instance.instanceId, { ...instance, messagePort: channel.port2 });
+
+            //get details of channel selector and intent resolver
             const ui = UI_URLS[getUIKey()];
 
-            // send the other end of the channel to the app
+            //prepare the handshake message
             const message: WebConnectionProtocol3Handshake = {
               type: 'WCP3Handshake',
               meta: {
@@ -208,9 +228,13 @@ window.addEventListener('load', () => {
                 ...ui,
               },
             };
+            console.log('Responding with message: ', JSON.stringify(message));
+
+            //send the handshake message and include the message port for further comms
             source.postMessage(message, origin, [channel.port1]);
           }
         } else {
+          // Log unknown windows but don't let them connect
           let sourceName;
           try {
             sourceName = source.name;

toolbox/fdc3-for-web/fdc3-web-impl/eslint.config.mjs

@@ -5,6 +5,13 @@ import eslintConfigPrettier from 'eslint-config-prettier';
 
 /** @type {import('eslint').Linter.Config[]} */
 export default [
+  {
+    languageOptions: {
+      parserOptions: {
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
   { files: ['**/*.{js,mjs,cjs,ts}'] },
   { languageOptions: { globals: globals.browser } },
   pluginJs.configs.recommended,