@suplink/message NPM

概述

WEB端跨域通信库，支持订阅模式和请求响应模式。

使用指南

示例

订阅模式

import { Message } from '@suplink/message'

const message = new Message({ origin: '*' });

// 发送
message.dispatch({ id: 'test01', data: 'test' });

// 订阅
message.subscribe((e) => {
    console.log(e.data)
});

请求响应模式

// == 客户端请求
import { Client } from '@suplink/message'

const client = new Client({ origin: '*' });

client.request('/path/test', 'request').then((response) => {
    // 显示 request:response
    console.log(response.data);
});

// == 服务端响应
import { Server } from '@suplink/message'

const server = new Server();

server.router('/path/test', (request) => {
    return `${request.data}:response`;
})

API说明

客户端Client

用于跟服务端通信

constructor

参数

参数	类型	说明	默认	必须
origin	string	通信origin	window.location.origin	否
target	object	目标窗口对象		否

案例

import { Client } from '@suplink/message';

const client = new Client({ origin: '*' });

request

向服务端发送请求

参数

参数	类型	说明	必须
path	string	请求路径	是
data	any	请求参数	否
config	object	请求配置，同构造函数参数	否

案例

import { Client } from '@suplink/message';

const client = new Client({ origin: '*' });
client.request('/path', { id: 1 }).then(res => {
    console.log(res, 'res');
});

cancel

取消与服务端通信

案例

import { Client } from '@suplink/message';

const client = new Client({ origin: '*' });
client.request('/path', { id: 1 }).then(res => {
    console.log(res, 'res');
});
client.cancel();

resume

恢复与服务端通信

案例

import { Client } from '@suplink/message';

const client = new Client({ origin: '*' });
client.request('/path', { id: 1 }).then(res => {
    console.log(res, 'res');
});
client.cancel();
client.resume();

服务端Server

用于接收并处理客户端发送过来的请求

constructor

参数

同客户端

案例

import { Server } from '@suplink/message';

const server = new Server();

router

服务端路由，用于接收客户端特定路径请求并返回响应内容

参数

参数	类型	说明	默认	必须
path	string	路由匹配路径，当前为精准匹配		是
handler	function	路由匹配后的处理函数，入参为请求体，返回响应体		是

案例

import { Server } from '@suplink/message';

const server = new Server();

server.router('/path', (req) => {
    console.log(req, 'req');
    const { id } = req.data;
    return { result: `id: ${id}` }
});

cancel

取消与客户端通信

resume

恢复与客户端通信

消息通信Message

基于postMessage的基础通信类，为Client和Server的基类

constructor

参数

参数	类型	说明	默认	必须
origin	string	通信origin	window.location.origin	否
target	object	目标窗口对象		否

dispatch

发送消息

参数

参数	类型	说明	默认	必须
messageData	MessageData	要发送的消息体		是
config	object	发送配置，同构造函数参数		否

MessageData

属性	类型	说明	必须
type	string	消息体类型	否
id	string	消息体ID	是
data	any	消息体数据	是

案例

import { Message } from '@suplink/message';

const message = new Message();

message.dispatch({ type: 'request', id: 'test', data: 'test' });

订阅消息

参数

参数	类型	说明	默认	必须
listener	function	监听器		是

参数	类型	说明	默认	必须
listenerId	string	监听器ID，传给unsubscribe用于取消订阅		是

案例

import { Message } from '@suplink/message';

const message = new Message();

const subscribeId = message.subscribe((e) => {
    console.log(e)
});

unsubscribe

取消订阅

参数

参数	类型	说明	默认	必须
listenerId	string/string[]	监听器ID或ID列表		是

案例

import { Message } from '@suplink/message';

const message = new Message();

const subscribeId = message.subscribe((e) => {
    console.log(e)
});

message.unsubscribe(subscribeId);