使用 Quick WebAssembly JS 快速封装 WebAssembly 接口

站长

2023年05月22日 21:59 · 阅读数 14

大家好！今天我要向大家介绍一个封装 WebAssembly 的工具——Quick WebAssembly JS，希望能够帮助到更多的开发者。

介绍

Quick WebAssembly JS 是一个可以快速封装 WebAssembly 的代理工具类。通过使用它，我们可以更轻松地将 WebAssembly 与 JavaScript 进行集成。

快速开始

准备 WebAssembly 资源

首先，我们需要准备好 WebAssembly 资源。我们可以使用 Emscripten 工具来编译 C/C++ 代码并导出我们需要的 API。

Emscripten 工具安装指引：emscripten.org/docs/gettin…

举个例子，我们有一个名为 fib.cc 的 C++ 代码，用于计算斐波那契数列的第 n 位。

fib.cc

#include <emscripten.h>

extern "C" {

EMSCRIPTEN_KEEPALIVE
int fib(int n) {
   // 斐波那契数列的第 n 位
   int i, t, a = 0, b = 1;
   for (i = 0; i < n; i++) {
      t = a + b;
      a = b;
      b = t;
   }
   return b;
}


}

在使用 Emscripten 编译时，需要添加一些必要的编译选项。下面是一个示例编译指令：

emcc fib.cc -sWASM=1 -sMAIN_MODULE=2 -sEXPORTED_FUNCTIONS=['_malloc','_free'] -sEXPORTED_RUNTIME_METHODS=['UTF8ToString','stringToUTF8'] --no-entry -o fib.js

请注意，这里的编译选项 -sWASM=1 -sMAIN_MODULE=2 -sEXPORTED_FUNCTIONS=['_malloc','_free'] -sEXPORTED_RUNTIME_METHODS=['UTF8ToString','stringToUTF8'] --no-entry 是必须的，以确保正确导出所需的函数和运行时方法。

安装 npm 包

接下来，我们需要安装 Quick WebAssembly JS 的 npm 包。在命令行中运行以下命令进行安装：

npm install quick-wasm-js

创建 QuickWebAssemblyFactory 工厂类

安装完成后，我们可以开始使用 Quick WebAssembly JS。首先，我们需要创建一个 QuickWebAssemblyFactory 工厂类，并指定我们使用 Emscripten 编译的 WebAssembly 资源的路径。

import { QuickWebAssemblyFactory } from "quick-wasm-js";

// 这里 JS 和 Wasm 资源都是相对于当前 Web 页面的路径去请求的。
const manager = await new QuickWebAssemblyFactory().createManager("./fib.js", "./fib.wasm");

开始使用代理对象

现在，我们已经准备好了 Quick WebAssembly JS，并创建了代理对象的管理器。我们可以开始使用代理对象了。

console.log(await fibManager.fib(12)); // 输出 233

在这个示例中，我们调用了代理对象的 fib 方法来计算斐波那契数列的第 12 位，并将结果输出到控制台。

从上述代码，我们可以看到，原本子 C++ 的 fib 函数被集成到了 JS 中，并且以异步接口的形式提供给外部调用。

值得注意的是，WebAssembly 实例其实已经被运行在了一个单独的 Worker 线程中。但是，我们却能在主线程以 Promise 的形式，异步访问对应的接口。