js-ipc

js-ipc

介绍

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

博客

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

描述

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

调试说明

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

参与贡献

• Fork 本仓库
• Star 仓库

使用说明

安装

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

引入依赖

ESM

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

CJS

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

浏览器中

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

基础用法

1. 父<--->子页面

详情见：example/super&child 目录

父页面

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

子页面

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

2.子<--->子页面

详情见：example/child&child 目录

子页面 1

// 初始化
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

// 初始化
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" } });
});

父页面

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

其他用法

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

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

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

2.卸载页面

client.unMount();

3.重置

client.reset();

4.调用函数

父页面

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

子页面

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

5.索引 id 标识

// 相同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

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

子页面 2

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

父页面

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

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