홈>2020-12-25 20:34source

javascript - WASM을 Angular 서비스에 올바르게 통합하는 방법

일부 기능을 사용하기 위해 일부 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 물건을 넣을까요? index.html "전역 적으로 사용 가능한"함수를 호출하는 서비스를 만드시겠습니까? 앵귤러가이를 인식 할 수있게하려면 .d.ts 파일?

javascriptangulargo

답변 # 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);
}

Python2.net

javascript - WASM을 Angular 서비스에 올바르게 통합하는 방법

관련 자료