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
NPM / Yarn / Pnpm
pnpm add message-port-apiworker.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
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"])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 callThis 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