/FrameMessage

基于postmessage 的iframe 之间的通信的封装

Primary LanguageTypeScriptMIT LicenseMIT

FrameMessage

基于postmessageiframe应用之间的通信方式的封装,类似于http接口访问会数据返回形式。

在以iframe为基础的微服务框架中,应用之间天然隔离,在需要通信的时候都会用到post�Message技术来解决隔离和跨域带来的通信阻碍。但是postMessage过于简洁,应用之间的通信内容和响应不规范,所以需要对postMessage的通信进行封装来去提高使用效率。

使用

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

script 标签引入 在项目 dist 目录拿到 frameMessage.js 脚本文件

<script src="./frameMessage.js"></script>
<script>
  const { Client, Server } = window.frameMessage;
</script>

esm 方式引入

# 安装
npm i @chrissong/frame-message --save
// 服务端
import { Server } from "@chrissong/frame-message";
const server = new Server();
server.listen("GET_THEME_COLOR", (req, res) => {
  const { data, type } = req;
  res.success({ color: "#ffffff" });
});
// 客户端
import { Client } from "@chrissong/frame-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错误

Api

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; // 返回请求接口类型
}