message-lite是一个RPC通信库
# install
yarn add message-lite # or:npm install message-lite --save
message-lite
支持双向通信,支持两个模式:
- 服务器+客户端模式
- 客户端+客户端模式
当前模式,提供了一个一对多的通信模式。
以下示例中,均以
iframe
和postMessage
来完成:
// 创建一个服务
export const master = new Master({
createSender(event: MessageEvent) {
return (message: any) => {
(event.source as WindowProxy)!.postMessage(message, '*', []);
};
},
listenMessage(fn) {
window.addEventListener(
'message',
fn,
false
);
},
unListenMessage(fn) {
window.removeEventListener('message', fn, false);
},
transformMessage(event: MessageEvent) {
// 针对event对象,创建消息转换函数
return event.data;
},
});
export const slave = new Slave({
createSender() {
return (message: any) => window.parent!.postMessage(message, '*', []);
},
listenMessage(fn) {
window.addEventListener(
'message',
fn,
false
);
},
unListenMessage(fn: (message: any) => void): void {
window.removeEventListener('message', fn, false);
},
transformMessage(message: MessageEvent) {
return message.data;
},
})
声明一个服务,以例在客户端上调用
import { ApiDecl, ApiDeclApi, ApiUnSupport, MBaseService } from 'message-lite';
@ApiDecl({
name: 'com.example.child.alert.service',
})
export class AlertService extends MBaseService {
@ApiDeclApi()
alert(content: { message: string; description: string }): Promise<void> {
return ApiUnSupport();
}
}
实现AlterService
服务:
import { ApiImpl } from 'message-lite';
@ApiImpl()
export class AlertServiceImpl extends AlertService {
async alert(content: { message: string; description: string }) {
alert(`${content.message}: ${content.description}`);
}
}
将服务注册至master
中:
import { master } from './index';
master.addService([
{
decl: AlterService,
impl: AlertServiceImpl,
}
]);
启动服务器(master)等待连接:
master.start();
在服务连接成功后,调用服务
import { slave } from './index';
slave.connect().then(async () => {
const service = slave.getService(AlterService);
await service.alert({message: '测试', description: '服务测试'});
});
客户端+客户端模式,是一种1对1通信的方式。使用上,与服务器+客户端非常的相似。可以理解为把服务器启动换成了等待连接。
下面是两个客户端:
// 客户端1
const client1 = new SimpleMix({
name: 'app-miniapp-test-connect',
listenMessage(fn: (message: any) => void): void {
window.parent.addEventListener(listenEventName, fn);
},
unListenMessage(fn: (message: any) => void): void {
window.parent.removeEventListener(listenEventName, fn);
},
createSender(origin?: any): (message: any) => void {
return function (p1: any) {
window.parent.dispatchEvent(new CustomEvent(emitEventName, p1));
};
},
transformMessage(data: CustomEvent) {
return data.data;
},
});
// 客户端2
const client2 = new SimpleMix({
name: 'app-miniapp-test-connect',
listenMessage(fn: (message: any) => void): void {
window.parent.addEventListener(listenEventName, fn);
},
unListenMessage(fn: (message: any) => void): void {
window.parent.removeEventListener(listenEventName, fn);
},
createSender(origin?: any): (message: any) => void {
return function (p1: any) {
window.parent.dispatchEvent(new CustomEvent(emitEventName, p1));
};
},
transformMessage(data: CustomEvent) {
return data.data;
},
})
客户间互相连接:
client1.waitConnect().then(() => {
//
console.log('连接成功!')
});
client2.connect().then(() => {
// 连接成功
});
与服务器+客户端模式一样,以上两个客户端均支持addService
以及getService
方法。可以很容易添加服务及调用服务。