Cross origin event bus (COEB)
Good foundation library for building Microfrontend architecture.
Just load it in your html or import in your module.
// index.html
const eb = new CrossOriginEventBus()
eb.subscribe('added', (e) => {
console.log('added received')
})
eb.registerService('test', () => {
return new Promise(res => {
setTimeout(() => res('this is test service'))
})
})
// page1.html
const eb = new CrossOriginEventBus({name: 'page3'})
// print done, this is test service
eb.request('test').then((resp) => console.log('done', resp))
eb.send({type: 'added'})
interface IEventBus {
send: (any) => void
request: (key: string, args: any) => Promise<any>
registerService: (key: string, IResponder) => void
unregisterService: (key: string) => void
subscribe: (evName: string, ICallback) => void
unsubscribe: (evName: string, ICallback) => void
}
Security is achieved by enforcing host selecting frames to be added.
BroadcastChannel is restricted to the same origin while COEB is unrestricted.