@jctrans-plugin/post-message

基于postmessage的iframe 通信封装 使用 Server Client 模式 可自由定义父---子 子--父通信

使用

基本使用 post-message把应用之间的通信像http一样分成服务端和客户端，服务端可以像写接口一样注册事件，客户端可以用 promise 的方式处理响应数据

esm 方式引入

# 安装
npm i @jctrans-plugin/post-message --save

父子通信实例

// 父窗口
<iframe id="iframeTarget" style="width: 100%; height: 500px" src="http://localhost:8087/#/" frameborder="0"></iframe>
import { Client } from "@jctrans-plugin/post-message";
export default {
   mounted() {
    const target = document.getElementById('iframeTarget');
    const client = new Client(target.contentWindow); // 获取实例 指向子窗口
    client.request("GET_TOKEN", { token: '发送token' }) // 注意发送接收key需要保持一致
  },
}

// 子窗口
import { Server } from "@jctrans-plugin/post-message";
export default {
   mounted() {
    const server = new Server()
    server.listen('GET_TOKEN', (req, res) => {
      const { data, type } = req
      alert(JSON.stringify(data, type))
      res.success({ token: data })
    })
  },
}

子父通信实例

// 父窗口
import { Server } from "@jctrans-plugin/post-message";
const server = new Server();
server.listen("GET_THEME_COLOR", (req, res) => {
  const { data, type } = req;
  res.success({ color: "#ffffff" });
});

// 子窗口
import { Client } from "@jctrans-plugin/post-message";
const client = new Client(window.parent); // window.parent 指向父窗口
client
  .request("GET_THEME_COLOR", { theme: true })
  .then((res) => {
    console.log(res);
  })
  .catch((data) => {
    console.log(data);
  });

错误处理

• 1.客户端在发送请求后可以在catch内捕获错误信息,返回信息将符合接口格式规范。

// GET_USER_INFO 事件类型在服务端未监听
client
  .request("GET_USER_INFO", { appid: "123" })
  .then((res) => {
    console.log(res);
  })
  .catch((data) => {
    const { data, type, error } = data;
    console.log(data, type, error);
  });

• 2.服务端在响应请求时可在回调函数内调用res.error(errData)方式返回错误信息。

server.listen("GET_USER_INFO", (req, res) => {
  const { data, type } = req;
  res.error("sorry, you have not the authority to get userInfo!");
});

错误信息

• 1.客户端请求连接失败：客户端在第一次请求时会尝试连接服务端，假如服务端没有开启或者没有实例化服务端，客户端将会默认尝试三次请求连接后抛出timeout错误

Server 类

• option:
  • self: [可选]指定服务端窗口
  • errorHandler: [可选]自定义错误执行函数

服务端 Server 实例

方法：

• listen()：注册监听事件类型

  • type:[string] 监听事件类型
  • callback():监听事件触发回调函数
    • req:请求对象
    • res:请求返回对象
      • sucess():请求成功调用
      • error():请求失败调用

• cancel():取消注册事件类型

  • type:[string] 监听事件类型

• open():服务端监听开启

• close():服务端监听关闭

客户端 Client 类

• target: 服务端窗口
• origin: [可选]对应窗口资源地址
• option: [可选]
  • self: 客户端窗口，默认 window

客户端 Client 实例

方法：

• request()：发起事件请求，将返回一个 Promise 对象

  • type:[string] 事件类型
  • data:[object] [可选] 请求参数

接口规范

// 客户端接口调用返回数据格式
{
  error: boolean; // 返回状态 true：返回错误  false：返回成功
  data: any; // 返回内容
  type: string; // 返回请求接口类型
}