message-port-api
A simple package that allows you to simplify the use of MessagePort API more easily (Worker, IFrame...)
This is a very simple package. it cannot transfer complex data such as
functionorclass. if you want to useAPIcontaining complex data use workercom
Installation
NPM / Yarn / Pnpm
pnpm add message-port-apiUsage
Worker
worker.ts
import { useReceive } from "message-port-api"
const receive = useReceive(self)
const controllers = receive({
sum(a: number, b: number) {
return a + b
}
})
export type Controller = typeof controllerindex.ts
import Worker from "./worker?worker"
import type { Controller } from "./worker"
import { useSend } from "message-port-api"
const worker = new Worker()
const send = useSend(worker)
console.log(await send<Controller>("sum", [1, 2])) // 3IFrame
iframe
import { useReceive } from "message-port-api"
const receive = useReceive(window, parent)
receive(
{
changeBg(color: string) {
document.body.style.backgroundColor = color
}
},
{
targetOrigin: "*"
}
)main.ts
import { useSend } from "message-port-api"
const send = useSend(window, () => iframe.contentWindow)
await send("changeBg", ["red"])API
useReceive
This function will be located on the host side to handle the requested tasks
function useReceive(
sender: Sender, // contains `postMessage` function to send return results
receiver: Receiver // contains 2 functions `addEventListener` and `removeEventListener` to listen to and cancel the `message` event
): receive
function receive(
controllers: Record<string, Function>, // processing functions
targetOptions?: string | WindowPostMessageOptions // option 2 propagates to `postMessage`
): ControllerIf you want to cancel the call
receive.cancel()'. This is useful when you usereceive` in components
import { useReceive } from "message-port-api"
const receive = useReceive(self)
receive({ sum })
receive.cancel() // cancel receive calluseSend
This function will be on the client side to send processing requests and return a Promise containing processed results from receive function
function useSend(
sender: Sender, // contains `postMessage` function to send processing request
receiver: Receiver // contains 2 functions `addEventLister` and `removeEventListener` to listen to and cancel the event `message` containing the results processed through the `receive` function,
timeout: boolean | number = 30000 // the interval that waits for data to return if the timeout throws a `TIMEOUT` error. Default is 30_0000
): send
function send<Controllers>(
name: keyof Controllers, // function name for handling
arguments: Arguments<Controllers[name]>, // processing function call parameter
targetOptions?: string | WindowPostMessageOptions // option 2 propagates to `postMessage`
): Promise<ReturnType<Controllers[name]>> // prompt containing processed results