Skip to content

Commit

Permalink
fix: typos in readme
Browse files Browse the repository at this point in the history
  • Loading branch information
Saiya committed Jan 21, 2021
1 parent 1ccd8f0 commit 4e3ddba
Show file tree
Hide file tree
Showing 5 changed files with 32 additions and 29 deletions.
53 changes: 28 additions & 25 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<h1 align="center">MessageHub</h1>

<h5 align="center">A tinny(~2kb) utility than can simplify cross window(iframes, even workers) communications over `postMessage` and `addEventListener('message', xxx)`</h5>
<h5 align="center">A tinny(~2kb) utility that can simplify cross window(iframes, even workers) communications over `postMessage` and `addEventListener('message', xxx)`</h5>
<div align="center">
<a href="https://travis-ci.com/oe/messagehub">
<img src="https://travis-ci.com/oe/messagehub.svg?branch=master" alt="Travis CI">
Expand All @@ -17,14 +17,14 @@
</div>

## Features
* **Tinny**: less than ~2kb gzipped, no external dependences required
* **Tinny**: less than 2kb gzipped, no external dependencies required
* **Compatibility**: use `postMessage` under the hood, support all modern browser(even IE8)
* **Consistency**: use same api every where(parent window, iframe window, worker, etc)
* **Simple API**: use api `on` `emit` `off` to handle all messages in current context from any window(parent window, child window, workers)
* **Dedicated API**: use api `createDedicatedMessageHub` to create a dedicated message-hub to communicate with specified window(parent window, child window, workers)
* **Responsible**: `emit` will return a promise that you can get response from the other side, you can return that response by return it in `on`'s callback
* **Proxy Message**: with api `createProxyFor`, you can proxy all message from child window(iframe, webworker, etc) to parent window, or parent's parent window
* **Typescript support**: this utility is written in typescript, has type definitions inborn
* **Dedicated API**: use api `createDedicatedMessageHub` to create a dedicated message-hub to communicate with specified window(parent window, child window or worker)
* **Responsible**: `emit` will return a promise that you can get response from the other side. You can respond `emit` on other side by return result in `on`'s callback
* **Proxy Message**: with api `createProxy`, you can proxy all messages from a window(iframe, webworker, etc) to another window(worker)
* **Typescript support**: this utility is written in typescript, has type definition inborn

## Install

Expand All @@ -42,7 +42,7 @@ yarn add @evecalm/message-hub

## Usage

The following demo show you how to use it with iframe
The following demo shows you how to use it to make normal window and its iframe communicate easily

in main window
```js
Expand All @@ -51,18 +51,18 @@ import MessageHub from "@evecalm/messagehub"
const iframeWin1 = document.getElementById('child-iframe-1').contentWindow
const iframeWin2 = document.getElementById('child-iframe-2').contentWindow

// ----- listen message from peer ----
// ----- listen messages from peer ----

// listen the message pageTitle from iframeWin1, and response it
// listen the message pageTitle from iframeWin1, and respond it
MessageHub.on(iframeWin1, 'pageTitle', () => {
return document.title
})
// response to message getHead from iframeWin2
// respond to message getHead from iframeWin2
MessageHub.on(iframeWin2, 'getHead', () => {
return document.head.outHTML
})

// listen multi message by passing a handler map
// listen multi messages by passing a handler map
MessageHub.on(iframeWin1, {
// no return, then the response is undefined
notice: (name, msg) => {
Expand Down Expand Up @@ -94,28 +94,31 @@ import MessageHub from "@evecalm/messagehub"
const peerWin = window.parent


// send message to the parent and get its response
// send a message to the parent and get its response
MessageHub.emit(peerWin, "pageTitle").then(title => {
console.log("page title of main thread", title)
})

// create a dedicated message hub, so we won't need to pass `peerWin` every time
// create a dedicated message hub, so you won't need to pass `peerWin` every time
const messageHub = MessageHub.createDedicatedMessageHub(peerWin)

// send message to the parent, don't need the response
messageHub.emit("notice", 'Jim', 'hello!')

// calc fibonacci, return the result to parent
messageHub.on("fib", num => {
// calc fibonacci, respond by a return
messageHub.on("fib", async (num) => {
// emit a message and wait its response
const title = await messageHub.emit("pageTitle")
console.log(title)
return fib(num)
});
// listen multi message by passing a handler map
// listen multi messages by passing a handler map
messageHub.on({
method1 () {},
method2 () {},
})

// use a recursion algorithm which will take more than half a minute when n big than 50
// use a recursive algorithm which will take more than half a minute when n big than 50
function fib(n) {
if (n < 2) return n
return fib(n - 1) + fib(n - 2)
Expand All @@ -126,15 +129,15 @@ To see a real world example, you may:

1. clone [this repo](https://github.com/evecalm/messagehub)
2. check the code in folder `test`
3. run `yarn` to install the project dependences
3. run `yarn` to install the project dependencies
4. run `yarn run dev` to view the sample
5. navigate to <http://localhost:1234/worker/index.html> to see worker example
6. navigate to <http://localhost:1234/frame/index.html> to see iframe example

## API

### MessageHub.emit(peer: Window | Worker, methodName: string, ...args: any[])
Send message to peer, invoking `methodName` and all its arguments `args`.
Send a message to peer, invoking `methodName` registered on the peer via `on` with all its arguments `args`.

This api return a promise, you can get response or catch the exception via it.

Expand All @@ -148,7 +151,7 @@ method name you can want to call(emit) which registered(on) in peer
`args` vary with `methodName`'s handler registered via `on` in peer's context

### MessageHub.on
Listen message send from peer, it has following forms:
Listen messages sent from peer, it has following forms:
```ts
// register(listen)) one handler for methodName when message received from peer
MessageHub.on(peer: Window | Worker | '*', methodName: string, handler: Function)
Expand All @@ -164,14 +167,14 @@ MessageHub.on(peer: Window | Worker | '*', singleHandler: Function)
3. you can set `peer` to `*` to listen all messages from all peers(parent, children, workers) to current window. **Due to worker's restrictions, you need register worker so that `*` could works worker's message by `MessageHub.on(worker, {})`**

#### methodName
Method name to register, a `methodName` can only has one `handler`, the `handler` will be override if you set `methodName` multi times
Method name to register, a `methodName` can only has one `handler`, the `handler` will be overrode if you set same `methodName` multi times

#### handler
1. handler could be an async function
3. if handlers with same methodName registered both in specified peer and `*`, only handler for peer will be triggered when a message received by peer
3. if handlers with same methodName registered both in specified peer and `*`, only handler for peer will be triggered when a message sent to peer

#### handlerMap
A object of handlers, keys are methodName, values are handlers
A object of handlers, keys are methodNames, values are handlers

#### singleHandler
`singleHandler` will receive all parameters, i.e. `(methodName, ...args)`
Expand All @@ -198,13 +201,13 @@ It returns a new messageHub with following properties:
Forward all messages from `fromWin` to `toWin` then forward `toWin`'s response to the `fromWin`, instead of handle messages by self

There is a funny use case:
If you got two iframe in your page, you can make them communicate directly by following code
If you got two iframes in your page, you can make them communicate directly by following code
```ts
MessageHub.createProxy(frame1Win, frame2Win) // forward message from frame1Win to frame2Win
MessageHub.createProxy(frame2Win, frame1Win) // forward message from frame2Win to frame1Win
```

### ~~MessageHub.createProxyFor(peer: Window | Worker)~~ deprecated
### MessageHub.createProxyFor(peer: Window | Worker) * deprecated *
Deprecated, but still working, you should use `MessageHub.createProxy(peer, window.parent)` instead.

Forward all messages from peer to parent window then forward parent's response to the peer, instead of handle messages by self.
2 changes: 1 addition & 1 deletion dist/message-hub.browser.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/message-hub.es.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*!
* @evecalm/message-hub v1.0.18
* @evecalm/message-hub v1.0.19
* Copyright© 2021 Saiya https://github.com/oe/messagehub
*/
const WINDOW_ID = Math.random().toString(36).slice(2);
Expand Down
2 changes: 1 addition & 1 deletion dist/message-hub.umd.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*!
* @evecalm/message-hub v1.0.18
* @evecalm/message-hub v1.0.19
* Copyright© 2021 Saiya https://github.com/oe/messagehub
*/
(function (global, factory) {
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@evecalm/message-hub",
"version": "1.0.18",
"version": "1.0.19",
"description": "a middleware based RPC library over `postMessage` can work with both web worker and iframe",
"main": "dist/message-hub.umd.js",
"module": "dist/message-hub.es.js",
Expand Down

0 comments on commit 4e3ddba

Please sign in to comment.