面试题：Kotlin/JS 中如何实现与 WebAssembly 的基本交互

Question

请描述在 Kotlin/JS 项目中引入 WebAssembly 模块的基本步骤，并举例说明如何调用 WebAssembly 函数，假设 WebAssembly 模块提供了一个简单的加法函数。

Answer 1

1. 引入 WebAssembly 模块的基本步骤：
   • 编译 WebAssembly 模块： 首先需要有一个 WebAssembly 模块。一般可以使用 C、C++ 等语言编写源文件，然后通过 Emscripten 等工具链将其编译为 WebAssembly 格式（.wasm文件）。例如，用 C 语言编写一个简单的加法函数：

#include <emscripten.h>
EMSCRIPTEN_KEEPALIVE
int add(int a, int b) {
    return a + b;
}

然后使用 Emscripten 编译命令（假设文件名为add.c）：

emcc -o add.wasm add.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]'

• 在 Kotlin/JS 项目中加载模块： 在 Kotlin/JS 项目中，可以使用fetch来获取.wasm文件，然后使用WebAssembly.instantiateStreaming方法实例化 WebAssembly 模块。首先在build.gradle.kts文件中确保kotlin - js - dce插件已应用（如果使用 Gradle 构建）。

import kotlinx.browser.window
import kotlinx.coroutines.await
import kotlinx.coroutines.coroutineScope

suspend fun loadWasmModule(): WebAssembly.Instance {
    val response = window.fetch("add.wasm").await()
    val buffer = response.arrayBuffer().await()
    return WebAssembly.instantiate(buffer, js("{}")).instance
}

2. 调用 WebAssembly 函数：
   • 获取函数引用： 实例化 WebAssembly 模块后，可以通过模块实例获取导出的函数。假设 WebAssembly 模块导出了_add函数。

coroutineScope {
    val wasmInstance = loadWasmModule()
    val addFunction = wasmInstance.exports.get("add") as dynamic
    val result = addFunction(2, 3)
    println("Result of addition: $result")
}

上述代码中，首先加载 WebAssembly 模块，然后从模块实例的导出中获取add函数（注意在 Kotlin/JS 中，由于 WebAssembly 导出的函数名可能带有下划线，这里假设通过某种方式去掉了下划线或者 WebAssembly 导出时已经处理好了名字），最后调用该函数并输出结果。