>source

일부 기능을 사용하기 위해 일부 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 파일?


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

관련 자료

  • 이전 dart - 사용자 정의 TextField 디자인 Flutter
  • 다음 reactjs - 페이지를 떠나지 않고 내 htlm 페이지 내에서 하나의 html 구성 요소로 링크로 페이지를 여는 방법은 무엇입니까?