postMessage transport
Transport using postMessage
Installation
npm install @ceramicnetwork/transport-postmessage
Usage
Same origin with a Web Worker
import { createPostMessageTransport } from '@ceramicnetwork/transport-postmessage'
const worker = new Worker('worker.js')
const transport = createPostMessageTransport<string>(worker)
transport.subscribe((msg) => {
console.log(msg)
})
transport.next('test')
Cross-origin between Window and frame
import { createPostMessageTransport } from '@ceramicnetwork/transport-postmessage'
const iframe = document.getElementById('iframe')
const transport = createPostMessageTransport<string>(window, iframe, {
filter: 'http://iframe.localhost', // Origin of the iframe messages are received from
postMessageArguments: ['http://window.localhost'], // Origin of the window sending messages
})
transport.subscribe((msg) => {
console.log(msg)
})
transport.next('test')
Types and interfaces
PostMessageEventMap
interface PostMessageEventMap {
message: MessageEvent
messageerror: MessageEvent
}
PostMessageTarget
interface PostMessageTarget extends EventTarget {
onmessage: ((this: any, ev: MessageEvent) => any) | null
onmessageerror: ((this: any, ev: MessageEvent) => any) | null
postMessage(...args: Array<any>): void
addEventListener<K extends keyof PostMessageEventMap>(
type: K,
listener: (this: any, ev: PostMessageEventMap[K]) => any,
options?: boolean | AddEventListenerOptions
): void
addEventListener(
type: string,
listener: EventListenerOrEventListenerObject,
options?: boolean | AddEventListenerOptions
): void
removeEventListener<K extends keyof PostMessageEventMap>(
type: K,
listener: (this: any, ev: PostMessageEventMap[K]) => any,
options?: boolean | EventListenerOptions
): void
removeEventListener(
type: string,
listener: EventListenerOrEventListenerObject,
options?: boolean | EventListenerOptions
): void
}
MessageFilter
type MessageFilter = (event: MessageEvent) => boolean
IncomingMessage
interface IncomingMessage<Data = any> extends MessageEvent {
readonly data: Data
}
PostMessageTransportOptions
type PostMessageTransportOptions = {
filter?: string | Array<string> | MessageFilter
postMessageArguments?: Array<any>
}
API
createOriginFilter()
Type parameters
Event extends MessageEvent
Arguments
allowedOrigin: string | Array<string>
Returns (event: Event) => boolean
createMessageObservable()
Type parameters
MessageData = any
Arguments
target: PostMessageTarget
originOrFilter?: string | Array<string> | MessageFilter
Returns Observable<IncomingMessage<Data>>
createPostMessageObserver()
Type parameters
MessageData = any
Arguments
target: PostMessageTarget
...args: Array<any>
Returns Observer<MessageData>
createPostMessageTransport
Combines createMessageObservable()
and createPostMessageObserver()
in a TransportSubject
Type parameters
-
MsgIn
: the type of the messages coming in from thefrom
target -
MsgOut = MsgIn
: the type of the messages going out to theto
target
Arguments
Returns TransportSubject<IncomingMessage<MsgIn>, MsgOut>
License
Apache-2.0 OR MIT