diff --git a/packages/aragon-rpc-messenger/src/providers/MessagePortMessage.js b/packages/aragon-rpc-messenger/src/providers/MessagePortMessage.js index a7041e0c..3189377c 100644 --- a/packages/aragon-rpc-messenger/src/providers/MessagePortMessage.js +++ b/packages/aragon-rpc-messenger/src/providers/MessagePortMessage.js @@ -1,6 +1,6 @@ import Provider from './Provider' import { fromEvent } from 'rxjs' -import { filter, pluck } from 'rxjs/operators' +import { filter, pluck, publish } from 'rxjs/operators' /** * A provider that communicates through the [MessageChannel PostMessage API](https://developer.mozilla.org/en-US/docs/Web/API/MessagePort/postMessage). @@ -20,6 +20,14 @@ export default class MessagePortMessage extends Provider { constructor (target = self) { super() this.target = target + this.messages$ = fromEvent(this.target, 'message', false).pipe( + // We can't use event.source in WebWorker messages as it seems to be null + // However, the fallback to check the target should always be true + filter((event) => (event.source || event.target) === this.target), + pluck('data'), + publish() + ) + this.messages$.connect() } /** @@ -28,12 +36,7 @@ export default class MessagePortMessage extends Provider { * @returns {Observable} An [RxJS observable](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html) */ messages () { - return fromEvent(this.target, 'message', false).pipe( - // We can't use event.source in WebWorker messages as it seems to be null - // However, the fallback to check the target should always be true - filter((event) => (event.source || event.target) === this.target), - pluck('data') - ) + return this.messages$ } /** diff --git a/packages/aragon-rpc-messenger/src/providers/WindowMessage.js b/packages/aragon-rpc-messenger/src/providers/WindowMessage.js index 72a347d3..d353ba69 100644 --- a/packages/aragon-rpc-messenger/src/providers/WindowMessage.js +++ b/packages/aragon-rpc-messenger/src/providers/WindowMessage.js @@ -1,6 +1,6 @@ import Provider from './Provider' import { fromEvent } from 'rxjs' -import { filter, pluck } from 'rxjs/operators' +import { filter, pluck, publish } from 'rxjs/operators' /** * A provider that uses the Window postMessage API to pass messages between windows (e.g. iframes). @@ -17,6 +17,12 @@ export default class WindowMessage extends Provider { constructor (target = window.parent) { super() this.target = target + this.messages$ = fromEvent(window, 'message', false).pipe( + filter((event) => event.source === this.target), + pluck('data'), + publish() + ) + this.messages$.connect() } /** @@ -25,10 +31,7 @@ export default class WindowMessage extends Provider { * @returns {Observable} An [RxJS observable](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html) */ messages () { - return fromEvent(window, 'message', false).pipe( - filter((event) => event.source === this.target), - pluck('data') - ) + return this.messages$ } /**