如何将 WASM 正确集成到 Angular 服务中

Question

我将一些WASM代码（从Go代码编译）集成到Angular中以使用一些函数。目前，这仅在一个地方完成，因此不会在整个应用程序中共享。我刚刚对WASM和Go使用了“标准”程序：let go = new Go();WebAssembly.instantiateStreaming(fetch('mywasm.wasm'), go.importObject).then((res) => {  go.run(res.instance);  myCoolWasmFunction();});但是，我想在应用程序的多个部分中执行WASM，因此尝试将其移动到服务中。我能够使用RxJS主题并在该函数之后监听“执行请求”，但我无法将任何内容返回到应用程序的其他部分。go.run(...)基本上，我正在寻找一种干净且可用的方法来执行 Angular 应用程序中由 wasm 公开的不同函数。我是否应该将 wasm 的东西放入 其中，并创建一个只调用这些“全局可用”函数的服务？如何启用 angular 来识别它们，只需使用文件即可？index.html.d.ts

Answer 1

我在这个Github Repo的帮助下解决了这个问题。这就像在服务内部创建一个公共变量一样简单，并且在加载 WASM 时，将导出的 WASM 函数设置为该变量，以便可以从服务外部调用它们。对于下面的示例，我添加了一个小的typescript接口，以使其与类型安全一起使用：

因此，在 WASM 服务中可能如下所示：

private Suite: WasmSuite; // Here the exported functions are stored after wasm was initiated

/*

 WasmSuite is defined like this:

 type MyFunctionInterface = (input: string) => string;

 interface WasmSuite {

     myFunction: MyFunctionInterface;

 }

*/

// This is just to let components know when WASM is ready

public ready: BehaviorSubject<boolean> = new BehaviorSubject(false);

constructor() {

  // Init wasm, then update the ready state

  this.init().then(_ => {      

    this.ready.next(true);

  });

}

private async init() {

  let go = new Go();

  return WebAssembly.instantiateStreaming(

    fetch('assets/main.wasm'),

    go.importObject

  ).then((res) => {

    go.run(res.instance);

    // Set the Suite to an object containing the functions. The casting of the function is somewhat optional, but I think it's good practice.

    this.Suite = {

      myFunction: my_exported_func as MyFunctionInterface,

      // "my_exported_func" is what I exported in Go via js.Global().Set("my_exported_func", js.FuncOf(myGoFunc))

    };

  });

}

public callMyFunction(input: string) {

  // I like to publish methods to components instead of the suite object, so this is just an "interface" between callers and WASM.

  return this.Suite.myFunction(input);

}