https://github.com/tachibana-shin/message-port-api
A simple package that allows you to simplify the use of MessagePort API more easily (Worker, IFrame...)
https://github.com/tachibana-shin/message-port-api
iframe message message-event message-port-api messageapi messageport postmessage webworker
Last synced: about 2 months ago
JSON representation
A simple package that allows you to simplify the use of MessagePort API more easily (Worker, IFrame...)
- Host: GitHub
- URL: https://github.com/tachibana-shin/message-port-api
- Owner: tachibana-shin
- License: mit
- Created: 2022-09-03T07:27:57.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-10-07T06:16:29.000Z (over 1 year ago)
- Last Synced: 2025-02-24T22:52:48.807Z (2 months ago)
- Topics: iframe, message, message-event, message-port-api, messageapi, messageport, postmessage, webworker
- Language: TypeScript
- Homepage:
- Size: 297 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# message-port-api
A simple package that allows you to simplify the use of [MessagePort API](https://developer.mozilla.org/en-US/docs/Web/API/MessagePort) more easily (Worker, IFrame...)
> This is a very simple package. it cannot transfer complex data such as `function` or `class`. if you want to use `API` containing complex data use [workercom](https://npmjs.org/package/workercom)
[](https://github.com/tachibana-shin/message-port-api/actions/workflows/test.yml)
[](http://badge.fury.io/js/message-port-api)
[](https://npmjs.org/package/message-port-api)
[](https://npmjs.org/package/message-port-api)
[](https://npmjs.org/package/message-port-api)
[](https://github.com/tachibana-shin/message-port-api/stargazers)
[](https://npmjs.org/package/message-port-api)
## Installation
NPM / Yarn / Pnpm
```bash
pnpm add message-port-api
```
## Usage
### Worker
worker.ts
```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 controller
```
index.ts
```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("sum", [1, 2])) // 3
```
### IFrame
iframe
```ts
import { useReceive } from "message-port-api"
const receive = useReceive(window, parent)
receive(
{
changeBg(color: string) {
document.body.style.backgroundColor = color
}
},
{
targetOrigin: "*"
}
)
```
main.ts
```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
```ts
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, // processing functions
targetOptions?: string | WindowPostMessageOptions // option 2 propagates to `postMessage`
): Controller
```
> If you want to cancel the call `receive.cancel()'. This is useful when you use `receive` in components
```ts
import { useReceive } from "message-port-api"
const receive = useReceive(self)
receive({ sum })
receive.cancel() // cancel receive call
```
### useSend
This function will be on the `client` side to send processing requests and return a Promise containing processed results from `receive` function
```ts
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(
name: keyof Controllers, // function name for handling
arguments: Arguments, // processing function call parameter
targetOptions?: string | WindowPostMessageOptions // option 2 propagates to `postMessage`
): Promise> // prompt containing processed results
```