@ceramicnetwork/transport-postmessage
TypeScript icon, indicating that this package has built-in type declarations

0.6.1 • Public • Published

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

  1. Event extends MessageEvent

Arguments

  1. allowedOrigin: string | Array<string>

Returns (event: Event) => boolean

createMessageObservable()

Type parameters

  1. MessageData = any

Arguments

  1. target: PostMessageTarget
  2. originOrFilter?: string | Array<string> | MessageFilter

Returns Observable<IncomingMessage<Data>>

createPostMessageObserver()

Type parameters

  1. MessageData = any

Arguments

  1. target: PostMessageTarget
  2. ...args: Array<any>

Returns Observer<MessageData>

createPostMessageTransport

Combines createMessageObservable() and createPostMessageObserver() in a TransportSubject

Type parameters

  1. MsgIn: the type of the messages coming in from the from target
  2. MsgOut = MsgIn: the type of the messages going out to the to target

Arguments

  1. from: PostMessageTarget
  2. to: PostMessageTarget = from
  3. options?: PostMessageTransportOptions = {}

Returns TransportSubject<IncomingMessage<MsgIn>, MsgOut>

License

Apache-2.0 OR MIT

Dependents (7)

Package Sidebar

Install

npm i @ceramicnetwork/transport-postmessage

Weekly Downloads

891

Version

0.6.1

License

(Apache-2.0 OR MIT)

Unpacked Size

9.07 kB

Total Files

4

Last publish

Collaborators

  • dav1do
  • ceramic-velvetshark
  • cb3box
  • jpham2023
  • npm.3box
  • smrz2001
  • oed
  • paul_lecam
  • stbrody
  • ukstv