EventEmmitter with microfrontends

[GeoffSeloana]

Hi,

Please assist, trying to use event emitter2 with the micro-frontend architecture (spa). Currently have 5 angular applications which run on the same page. On the parent application we create

parent application (in a different iframe)

// listener for keycloak object
        this.server.on('keycloak', function(value) {
            console.log('keycloak instance request by ' + value);
            return new Promise<KeycloakService>((resolve) => {
                resolve(keycloak);
            });
        });

on child applications (in a different iframe)

 // trigger keycloak Async event
    this.server.emitAsync('keycloak', ['leads-frontend']).then((keycloakService) => {
      console.log('data', keycloakService);
    });

does not seem to work. Is there something i am doing wrong?

[RangerMauve]

Hi, I'll need more details on how this.server is being created in the application. If it's in different iframes, I'm assuming you have two different event emitters being created.

When dealing with iframes, you should consider making use of window.postMessage for sending events between them.

[GeoffSeloana]

Hi. yes i've declared this.server on every iframe as follows i guess that is why the events are not picked-up by other iframes. With window.postMessage would it be possible to use emitAsync events?

 // declare server
    private server = new EventEmitter2({

        //
        // set this to `true` to use wildcards. It defaults to `false`.
        //
        wildcard: true,

        //
        // the delimiter used to segment namespaces, defaults to `.`.
        //
        delimiter: '::',

        //
        // set this to `true` if you want to emit the newListener event. The default value is `true`.
        //
        newListener: false,

        //
        // the maximum amount of listeners that can be assigned to an event, default 10.
        //
        maxListeners: 20,

        //
        // show event name in memory leak message when more than maximum amount of listeners is assigned, default false
        //
        verboseMemoryLeak: false
    });

[RangerMauve]

So the problem here is that each EventEmitter is separate and they don't send each other events.

What you'll need to do is add an onAny listener for each of your EventEmtters, then inside that listener you'll need to use postMessage to send the event to every other frame, and you'll also need to have onmessage handlers on each frame so that you can receive the messages and emit them to the event emitter.

I'd suggest looking around to see if there's maybe a library out there already that sends events between iframes in the way you'd want. There's a lot of stuff that can go wrong when implementing something like this, and EventEmitter2 isn't exactly geared towards this use case.