在 JS 里集成 Mojo 通信

packages/core/

mojo/src/resources/

bot_api/

bot_api.mojom-webui.ts
index.ts

botApi.ts

Copy typescript
import {
  AppControllerServiceCallbackRouter as BotApiCallbackRouter,
  AppControllerService as BotApiService,
  AppControllerServiceRemote as BotApiRemote,
} from "./resources/bot_api";

export class BotApiProxy {
  // 用于向后端发送消息的远程调用接口
  botApiHandler: BotApiRemote;

  // 用于接收后端回调消息的路由器
  botApiCallbackRouter: BotApiCallbackRouter;

  constructor() {
    this.botApiHandler = BotApiService.getRemote(); 
    this.botApiCallbackRouter = new BotApiCallbackRouter();

    // 绑定新的pipeline并在浏览器中设置接收器
    this.botApiHandler.$.bindNewPipeAndPassReceiver().bindInBrowser();
  }

  openFactoryTestApp() {
    this.botApiHandler.openFactoryTestApp();
  }

  static getInstance(): BotApiProxy {
    return instance ?? (instance = new BotApiProxy());
  }

  static setInstance(obj: BotApiProxy) {
    instance = obj;
  }
}

let instance: BotApiProxy | null = null;

mock/src/mojo/

botApi.ts

Copy typescript
/* eslint-disable @typescript-eslint/no-empty-function */
import {
    AppControllerServiceCallbackRouter as BotApiCallbackRouter,
    AppControllerServiceRemote as BotApiRemote,
} from "@repo/mojo/resources/bot_api";

export class MockBotApiProxy {
    botApiHandler: BotApiRemote;
    botApiCallbackRouter: BotApiCallbackRouter;

    constructor() {
        // Mock handler methods
        this.botApiHandler = {
            openFactoryTestApp() {
                console.log("openFactoryTestApp");
            },
            $: {
                bindNewPipeAndPassReceiver: () => ({
                    bindInBrowser: () => { }
                })
            },
            proxy: {
                sendMessage: () => Promise.resolve(),
                getConnectionErrorEventRouter: () => ({
                    addListener: () => 0,
                    removeListener: () => true
                })
            },
            onConnectionError: {
                addListener: () => 0,
                removeListener: () => true
            }
        } as unknown as BotApiRemote; 

        this.botApiCallbackRouter = new BotApiCallbackRouter();

        // 注册回调处理器到全局作用域,方便测试
        // @ts-ignore
        window[`triggerBotApiOpenFactoryTestApp`] =
            this.botApiCallbackRouter.openFactoryTestApp.createReceiverHandler(false);
    }

    openFactoryTestApp() {
        this.botApiHandler.openFactoryTestApp();
    }

    static getInstance(): MockBotApiProxy {
        return instance ?? (instance = new MockBotApiProxy());
    }

    static setInstance(obj: MockBotApiProxy) {
        instance = obj;
    }
}

let instance: MockBotApiProxy | null = null;

apps/bot/controller/src/

lib/mojo/

botApiHandler.ts

Copy typescript
import { MockBotApiProxy } from "@repo/mock/mojo";
import { BotApiProxy } from "@repo/mojo/botApi";

(import.meta.env.STORYBOOK || import.meta.env.DEV) &&
  BotApiProxy.setInstance(new MockBotApiProxy());

export const { botApiHandler, botApiCallbackRouter } = BotApiProxy.getInstance();

pages/VcController/Startup/

MenuList.tsx

Copy typescript
import { botApiHandler } from "@/lib/mojo/botApiHandler";

//...

botApiHandler.openFactoryTestApp();

在 JS 里集成 Mojo 通信

Comments