当前位置：首页 > article >正文

WebAssembly (Wasm) 与 JavaScript 字符串交互

article 2024/12/25 14:06:02

随着WebAssembly（简称Wasm）技术的发展，越来越多的Web应用开始利用Wasm来提高性能。Wasm是一种在现代Web浏览器中运行的二进制格式，可以提供接近原生代码的速度。然而，Wasm和JavaScript之间进行数据交换时需要特别注意，尤其是对于字符串这种复杂类型的数据。

基础知识

在Wasm中，内存是通过线性内存（Linear Memory）来管理的，它是一个连续的字节数组。由于Wasm本身没有字符串类型，因此字符串必须以某种方式编码为字节序列后才能存储在线性内存中。通常，我们使用UTF-8编码来表示字符串。

JavaScript与Wasm之间的字符串交互涉及以下几个关键步骤：

从JS向Wasm传递字符串：将字符串转换为UTF-8编码，并将其写入Wasm的线性内存中。
Wasm处理字符串：在Wasm中读取并处理这些字符串。
从Wasm向JS返回字符串：将处理后的字符串从线性内存中读出，并转换回JavaScript中的字符串。

示例代码

下面我们将通过一个简单的例子来演示如何实现上述过程。假设我们有一个Wasm模块，该模块包含一个函数to_uppercase，它可以接收一个字符串参数，对其进行某些处理（例如转换成大写），然后返回处理后的字符串。

Wasm 模块 (example.wasm)

首先，我们需要编写一个简单的Wasm模块。这里使用C语言作为示例：

#include <emscripten.h>
#include <string>
#include <cstring>

extern "C" {

EM_PORT_API const char* to_uppercase(const char* input) {
    std::string output = input;
    for (char &c : output) {
        c = toupper(c); // 转换为大写
    }

    // 为输出字符串分配内存
    char* result = (char*)malloc(output.size() + 1);
    strcpy(result, output.c_str());
    return result; // 返回大写字符串
}

EM_PORT_API void free_string(const char* str) {
    free((void*)str); // 释放分配的内存
}

}

编译上述C代码为Wasm模块（使用emcc命令）：

emcc string.cpp -o string.js -s MODULARIZE=1 -s EXPORT_NAME="createModule" -s "EXPORTED_FUNCTIONS=['_to_uppercase', '_free_string','UTF8ToString','allocateUTF8']" -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall', 'cwrap']"

EXPORTED_FUNCTIONS里面是Wasm对js开放的函数，写在c里面用_做前缀导出，非c的，js的就是原来的样子，这类非c的函数有哪些可以在生成的string.js里面看，根据需要导出
举例：‘allocateUTF8’,‘UTF8ToString’,‘getValue’,‘intArrayFromString’,‘intArrayToString’,‘UTF8ArrayToString’,‘stringToUTF8Array’,‘stringToUTF8’,‘allocate’,‘ALLOC_NORMAL’
这将生成两个文件：string.js 和 string.wasm。其中，string.js 是一个加载器，用于帮助加载和初始化Wasm模块。

JavaScript 调用

接下来，在JavaScript中调用这个Wasm函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebAssembly String Processing</title>
    <script src="string.js"></script>
</head>
<body>
    <h1>WebAssembly String Processing</h1>
    <input type="text" id="inputString" placeholder="Enter string">
    <button id="convertButton">Convert to Uppercase</button>
    <p id="result"></p>

    <script>
        let moduleInstance;

        createModule().then(instance => {
            moduleInstance = instance;

            document.getElementById('convertButton').onclick = () => {
                const inputString = document.getElementById('inputString').value;

                // 调用 C++ 函数
                const upperPtr = moduleInstance._to_uppercase(moduleInstance.allocateUTF8(inputString));
                const upperString = moduleInstance.UTF8ToString(upperPtr);

                document.getElementById('result').innerText = `Uppercase: ${upperString}`;

                // 释放分配的内存
                moduleInstance._free_string(upperPtr);
            };
        });
    </script>
</body>
</html>

在这个例子中，我们使用了allocateUTF8和UTF8ToString这两个辅助函数。allocateUTF8是将js字符串分配好空间，变成c的char指针，给到wasm访问，UTF8ToString则是将wasm的char指针变成js能用字符串。记住，wasm跟js的实际通讯只有数字，int，char这些。