概述

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' });

subscribe

订阅消息

参数

| 参数 | 类型 | 说明 | 默认 | 必须 | |----------|----------|-----|------------------------|-----| | 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);

init

初始化。注意默认实例化时已初始化

setConfig

动态更改实例配置

connect

建立通信连接

disconnect

断开通信连接

close

关闭通信连接