Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

lunz-ui-microfrontend-hub

zhongruigroup14MIT1.0.1-rc.1TypeScript support: included

LUNZ-UI-Microfrontend Hub Package

readme

说明

LUNZ+微前端子应用通讯类库

import { hub } from 'lunz-ui-microfrontend-hub';

即可使用 在不需要初始化 hub 的子应用中

只需要使用其强类型即可 let hub: Hub;

调试

可以使用 npm link 去调试

在 hub 中使用 npm link

在引用中使用npm link lunz-ui-microfrontend-hub

如果修改文件名之后,需要重新 build 一下,否则 index.js 和 map 都是之前的,找到的不正确

使用npm run build:watch 来监听文件变化

serviceBus 通讯说明

服务端

在子应用被 mount 之后, 使用主应用传过来的 hub

this._serviceBussServerhub.serviceBus.addServer('应用名称')

设置 server 的处理程序

this._serviceBussServer.requestHandler = this.handle.bind(this);

客户端

获取客户端

this._serviceBusClient = this._hub.serviceBus.getClient('xxx');

获取后,init 一下

const initSubscription = this._serviceBusClient.init().subscribe((s) => {
  console.log(`init _serviceBusClient ok`);
  // 获取成功后,取消监听即可
  initSubscription.unsubscribe();
  // init之后,可以监听服务广播事件
  this._serverEventsSubscription = this._serviceBusClient.serverEvents.subscribe((event) => {
    if (event.type === 'receivedMessage') {
      this.receivedMessage.emit(event.data);
    }
  });
});

发送请求 例如设置消息可读

setReadMessage(msgId: any): Observable<any> {
    return this._serviceBusClient.request({ type: 'setReadMessage', data: msgId }).pipe(
      map((event) => {
        return event.data;
      })
    );
  }