messageport-observable
Version:
This provides some magic wrappers for [MessagePort][1] objects and things that resemble them (windows/iframes, workers, etc.). The wrapped objects still have the same API as MessagePorts, but also have some additional features.
87 lines (73 loc) • 2.54 kB
HTML
<html>
<head>
<script src="messageport-observable.js"></script>
</head>
<body>
<h1>Lets go!</h1>
<iframe src="iframe.html"></iframe>
<script>
const iframe = document.querySelector('iframe');
const wrapWindow = MessagePortObservable.wrapWindow;
const wrapPort = MessagePortObservable.wrapPort;
let windowPort = wrapWindow(window);
let iframePort = wrapWindow(iframe.contentWindow);
let subscription = windowPort
.filter(event => event.source === iframe.contentWindow)
.subscribeAndPostReplies(event => {
console.log('got from iframe:', event);
subscription.unsubscribe();
// Should yield each number in sequence to the iframe via a MessagePort
return (function*() {
yield 1;
yield 2;
yield 3;
})();
});
const myArray = new Int32Array(10);
for (let i = 0; i < 10; i ++) {
myArray[i] = i;
}
iframe.contentWindow.addEventListener('load', () => {
iframePort.postMessage(myArray);
});
let worker = new Worker('worker.js');
let workerPort = wrapPort(worker);
let pingReplyPort = workerPort.postMessageWithReply('ping');
let pingReplySub = pingReplyPort
.filter(event => event.data === 'pong')
.subscribe({
next(x) {
console.log('pong from worker', x);
pingReplySub.unsubscribe();
}
});
pingReplyPort.start();
let pongReplyPort = workerPort.postMessageWithReply('pong');
let pongReplySub = pongReplyPort
.filter(event => event.data === 'ping')
.subscribe({
next(x) {
console.log('ping from worker', x);
pongReplySub.unsubscribe();
}
});
pongReplyPort.start();
let sharedWorker = new SharedWorker('increment.js');
sharedWorker.onerror = console.log;
let swPort = wrapPort(sharedWorker.port);
for (let i = 0; i < 10; i ++) {
const incReplySub = swPort.postMessageWithReply('inc')
.subscribe(x => {
console.log('increment ' + i + ' via main window:', x.data);
incReplySub.unsubscribe();
});
const decReplySub = swPort.postMessageWithReply('dec')
.subscribe(x => {
console.log('decrement ' + i + ' via main window:', x.data);
decReplySub.unsubscribe();
});
}
</script>
</body>
</html>