Inter-application communication

Introduction

Communication between applications can be achieved through @giteeteam/plugin-sdk package

Register in proxima-app

Initialize ProximaSDKServer in the proxima-app, create ProximaSDK when the micro frontend sub-application is initialized, and after registering with ProximaSDKServer, pass the sdk to the sub-application as parameters.

ProximaSDKServer

Communication server. ProximaSDKServer is currently initialized in proxima-app, sub-apps can open the components of the parent application through communication (each new call component needs to be modified by the parent application), currently only supports opening item detail components.

• new ProximaSDKServer({registerTimeout}) After initialization, the global message will be monitored

ProximaSDK

Communication client. When using @giteeteam/plugin-loader in proxima-app to initialize the micro-frontend sub-application, create ProximaSDK, register with ProximaSDKServer, and pass the sdk to the sub-application as parameters.

• new ProximaSDK(server) Pass in ProximaSDKServer during initialization

register

register({type, module, instance, context, frame}): Promise<void>

Register sub-applications for inter-application communication, wait for sub-applications to instantiate ProximaSDK, and Promise will return

• type: micro
• module: module name
• instance: Client ProximaSDK instance
• context: the context data
• frame: current page information

• EXAMPLE:

// Register applications, use @giteeteam/plugin-loader to register micro-frontends in proxima-app
const { ProximaSDKServer, ProximaSDK } = require('@giteeteam/plugin-sdk');
const server = new ProximaSDKServer();
const client = new ProximaSDK({ sdkServer: server });
await server.register({
  type: 'micro',
  module: moduleKey,
  instance: client,
  frame: qiankunProps.frame,
  context: qiankunProps.context || {},
});

// Application initialization sdk
import { ProximaSDK } from '@giteeteam/plugin-sdk';

if (!window.__POWERED_BY_QIANKUN__) {
  const sdk = new ProximaSDK({ sdkServer: window.parent });
  render({ sdk });
}

Send message in app

sendAction

sendAction(actionType, param) Send action information, currently used to open the item detail component

• 示例

// Proxima-app listens to action events
sdkServer.onAction = (message, callbacks) => {
  const { action, param } = message.payload;
  switch (action) {
    case 'openIssuePanel':
      setSelectedItemId(param.issue);
      setVisibleViewModal(true);
      callbacks.resolve();
      break;
  }
};

// Application opens item detail component in proxima-app
sdk.sendAction('openIssuePanel', { issue: 11223 }).then(() => {
  console.log('open item success');
});