1.0.0 • Published 1 year ago
@jctrans-plugin/post-message v1.0.0
@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:
[可选]
自定义错误执行函数
- self:
服务端 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; // 返回请求接口类型
}
1.0.0
1 year ago