# js-ipc

> JavaScript通信工具包，支持Iframe和Worker通信

Latest version **2.0.4** (published 2024-01-17) · ISC license · 0 weekly downloads

## Install

```sh
npm install js-ipc
pnpm add js-ipc
yarn add js-ipc
bun add js-ipc
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.4 |
| Published | 2024-01-17 |
| First published | 2023-04-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 12.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | hunter1024 |
| Maintainers | diehunter |
| Keywords | iframe-ipc, iframe, ipc, worker, js-ipc, worker-ipc |

## Links

- npm: https://www.npmjs.com/package/js-ipc
- Repository: https://gitee.com/DieHunter/js-ipc
- npm.io page: https://npm.io/package/js-ipc

## Dependencies (1)

- [utils-lib-js](https://npm.io/package/utils-lib-js.md) ^2.0.3

## Alternatives

- [cron](https://npm.io/package/cron.md) — 4.9M weekly downloads
- [@vercel/queue](https://npm.io/package/@vercel/queue.md) — 731.6K weekly downloads
- [create-sonicjs](https://npm.io/package/create-sonicjs.md) — 1.6K weekly downloads
- [@exellix/jobs-api](https://npm.io/package/@exellix/jobs-api.md) — 941 weekly downloads
- [@forwardimpact/libskill](https://npm.io/package/@forwardimpact/libskill.md) — 575 weekly downloads

## Recent versions

- 2.0.4 (latest) — 2024-01-17
- 2.0.3 — 2023-12-25
- 2.0.2 — 2023-04-21
- 2.0.1 — 2023-04-21
- 2.0.0 — 2023-04-21

## README

# js-ipc

## 介绍

基于 JS 实现的前端 Iframe 和 Worker 通信工具包

## 博客

https://blog.csdn.net/time_____/article/details/130246659

## 描述

应对多种场景下 Iframe 和 Worker 通信的诉求，主要应用于父对子，子对子之间一个或多个页面的通讯

## 调试说明

1. pnpm i 安装依赖
2. pnpm debug 调试
3. pnpm build 编译构建
4. pnpm server:hot 热运行 example
5. pnpm build:hot 热构建
6. 使用 live-server 打开 example 中的 html 进行操作

## 参与贡献

1.  Fork 本仓库
2.  Star 仓库

## 使用说明

### 安装

`npm install js-ipc`
或
`yarn add js-ipc`
或
`pnpm install js-ipc`

### 引入依赖

#### ESM

```javascript
import { Client, PeerToPeer, Server } from "js-ipc";
```

#### CJS

```javascript
const { Client, PeerToPeer, Server } = require("js-ipc");
```

#### 浏览器中

```html
<script src="./node_modules/js-ipc/dist/umd/index.js"></script>
<script>
  console.log(JsIPC);
</script>
```

### 基础用法

#### 1. 父<--->子页面

详情见：example/super&child 目录

父页面

```javascript
// 初始化
const server = new Server({ target: "#son" });
// 接收子页面消息
server.on("msg", console.log);
// 加载，加载完成
await server.mount().load();
// 发送消息给子页面
server.send({ type: "msg", data: { name: "parent" } });
```

子页面

```javascript
// 初始化
const client = new Client({ target: window.parent });
// 接收父页面消息
client.on("msg", console.log);
// 发送消息给父页面
client.send({ type: "msg", data: { name: "son" } });
```

#### 2.子<--->子页面

详情见：example/child&child 目录

子页面 1

```javascript
// 初始化
const client = new Client({ target: window.parent });
// 接收消息
client.on("msg", console.log);
// 加载当前页面
client.mount();
// 等待页面全部加载完成后发送消息
client.on("load:finish", () => {
  client.send({ type: "msg", data: { name: "son" } });
});
```

子页面 2

```javascript
// 初始化
const client = new Client({ target: window.parent });
// 接收消息
client.on("msg", console.log);
// 加载当前页面
client.mount();
// 等待页面全部加载完成后发送消息
client.on("load:finish", () => {
  client.send({ type: "msg", data: { name: "son2" } });
});
```

父页面

```javascript
// 初始化
const peer = new PeerToPeer(["#son2", "#son"]);
// 连接子页面，并等待加载
await peer.connect().load();
// 加载完成后触发广播
peer.broadcast({ type: "load:finish" });
```

### 其他用法

#### 1.子<--->子<--->子页面

详情见：example/child&child&child 目录

```javascript
// 与子<--->子页面一样，父页面需要传入多个 Iframe 元素
const peer = new PeerToPeer(["#son2", "#son3", "#son"]);
```

#### 2.卸载页面

```javascript
client.unMount();
```

#### 3.重置

```javascript
client.reset();
```

#### 4.调用函数

父页面

```javascript
const server = new Server({
  target: "#son",
  handlers: {
    log: console.log,
  },
});
```

子页面

```javascript
// 调用父页面或其他页面的log函数 ，参数是 "log"
client.invokeHandler({ type: "log", data: ["log"] });
```

#### 5.索引 id 标识

```javascript
// 相同id可以通信
const server = new Server({
  target: "#son",
  id: 100,
});

const client = new Client({
  target: window.parent,
  id: 100,
});

const client1 = new Client({
  target: window.parent,
});
// server 和 client 可以通信，client1 不行
```

#### 6.子<--->父<--->子页面

详情见：example/super&child&child 目录
当父页面中包含多个子页面时,可以使用 PeerToPeer 中的广播功能

子页面 1

```javascript
const client = new Client({
  target: window.parent,
});
client.mount();
```

子页面 2

```javascript
const client2 = new Client({
  target: window.parent,
});
client2.mount();
```

父页面

```javascript
const peer = new PeerToPeer(["#son", "#son2"]);
peer.connect();
// 发送广播
peer.broadcast({ type: "msg", data: { name: "parent" } });
// 发起函数调用
peer.invoke({ type: "son4info", data: ["parent"] });
```

#### 7.线程通信

和 iframe 相同，只需将 PeerToPeer 的参数改成 worker

```javascript
const worker1 = new Worker("./worker1.js", { type: "module" });
const worker2 = new Worker("./worker2.js", { type: "module" });
const peer = new PeerToPeer([worker1, worker2]);
```

---
_Source: https://npm.io/package/js-ipc · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._