wasm 學習筆記，寫個求和demo

imsomnus發表於2024-03-20
ASM筆記

最近由於工作內容需要，正好學習了一下wasm（WebAssembly 的縮寫）。下面透過一個例子說明如何使用：

c++ 寫的方法打包成wasm檔案後，js如何呼叫裡面方法：

要將C++ 寫好的方法打包成 wasm 檔案，並在 JavaScript 中呼叫其中的方法，可以按照以下步驟進行：

  1. 首先，使用 Emscripten 工具鏈將 C++ 程式碼編譯成 wasm 檔案。Emscripten 是一個常用的工具，可以將 C/C++ 程式碼編譯成 WebAssembly 格式。你可以訪問 Emscripten 的官方網站獲取更多資訊和文件：https://emscripten.org/

  2. 在 JavaScript 中，可以使用 WebAssembly JavaScript API 來載入和呼叫 wasm 檔案中的函式。你可以使用 WebAssembly.instantiateStreaming 或 WebAssembly.instantiate 方法來載入 wasm 檔案，並獲取其中匯出的函式。

  3. 在 JavaScript 中呼叫 wasm 檔案中的函式，可以透過獲取匯出的函式物件，並直接呼叫這些函式來實現。

下面是一個簡單的示例程式碼演示如何載入 wasm 檔案並呼叫其中的函式：

// example.cpp檔案
#include <emscripten/emscripten.h>

extern "C" {
    EMSCRIPTEN_KEEPALIVE
    int add(int a, int b) {
        return a + b;
    }
}

在這個示例中，定義了一個簡單的 add 函式，用於計算兩個整數的和。使用 EMSCRIPTEN_KEEPALIVE 宏來告訴 Emscripten 將該函式匯出到 wasm 模組中，以便 JavaScript 可以呼叫它。

接下來使用 Emscripten 工具鏈將這個 C++ 程式碼編譯成 wasm 檔案。使用類似以下命令來進行編譯：

emcc example.cpp  -o example.js -s EXPORTED_FUNCTIONS="['_add']"

在這個命令中，example.cpp C++ 原始檔，example.js是輸出的 JavaScript 檔案，_add 是要匯出的函式名稱。

完成編譯後，將得到一個包含 wasm 模組的 JavaScript 檔案，可以在你的 HTML 檔案中引入並呼叫其中的函式。

// index.html檔案
<!DOCTYPE html>
<html>
<head>
    <title>WebAssembly Demo</title>
</head>
<body>
    <script>
        fetch('./example.wasm')
            .then(response => response.arrayBuffer())
            .then(bytes => WebAssembly.instantiate(bytes, {}))
            .then(results => {
                const { add } = results.instance.exports;
                const sum = add(5, 6);
                console.log('Sum:', sum); //瀏覽器控制檯會列印出11
            });
    </script>
</body>
</html>

add是在 C++ 程式碼中匯出的函式名稱。

參考連結：https://juejin.cn/post/7259182371974266936?searchId=202403181758005AB9851DB9A8A52DF80C

相關文章