分析 `WebAssembly` `Interface Types` (WIT) 提案如何实现 `Wasm` 模块与 `JavaScript` 的复杂结构化数据交换。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

大家好，我是今天的主讲人，咱们今天聊聊 WebAssembly Interface Types (WIT)。这玩意儿听着玄乎，但其实就是为了解决 WebAssembly 和 JavaScript 之间“语言不通”的问题。咱们来好好扒一扒，看看 WIT 是怎么让 Wasm 模块和 JavaScript 愉快地“谈恋爱”的。

开场：Wasm 和 JavaScript 的“恋爱”烦恼

WebAssembly (Wasm) 就像一位身怀绝技的“武林高手”，性能彪悍，但它用的“内功心法” (二进制指令) 和 JavaScript 这位“魔法师”的“咒语” (JavaScript 对象) 完全不一样。

以前，Wasm 和 JavaScript 的数据交换，就像两个人在鸡同鸭讲：

数字、字符串这些简单的数据： 还能勉强用 Number、String 来“翻译”一下。
复杂的数据结构，比如对象、数组： 那就抓瞎了，只能手动序列化/反序列化，效率低不说，还容易出错。

这就好比，你想给老外点一道“宫保鸡丁”，只能指着菜单上的图片，然后用蹩脚的英语说“Chicken… peanuts… spicy…” 老外听得云里雾里，最后端上来的可能不是你想要的。

WIT 横空出世：WebAssembly 的“翻译官”

WebAssembly Interface Types (WIT) 就是来解决这个问题的。它定义了一种通用的接口描述语言，就像一个标准的“翻译官”，让 Wasm 和 JavaScript 能够理解对方的“语言”。

WIT 的核心思想是：定义一套双方都认可的数据类型和接口，然后 Wasm 和 JavaScript 都按照这个标准来生成和使用数据。

WIT 语法：咱们来学几句“外语”

WIT 的语法很简单，有点像 TypeScript 或者 Rust 的感觉。咱们先来学几个常用的“单词”：

WIT 类型	解释	对应 JavaScript 类型	对应 WebAssembly 类型
`bool`	布尔值，`true` 或者 `false`	`boolean`	`i32` (约定 0 为 false, 1 为 true)
`s8`, `s16`, `s32`, `s64`	有符号整数	`number`	`i32`, `i64`
`u8`, `u16`, `u32`, `u64`	无符号整数	`number`	`i32`, `i64`
`float32`	32 位浮点数	`number`	`f32`
`float64`	64 位浮点数	`number`	`f64`
`string`	字符串	`string`	线性内存中的一段连续空间
`list<T>`	列表，其中 `T` 是列表元素的类型	`Array<T>`	线性内存中的一段连续空间，需要特殊的处理
`record { ... }`	记录，类似于 JavaScript 的对象。可以定义多个字段，每个字段都有自己的类型。	`object` (包含定义的字段)	线性内存中的一段连续空间，字段按照定义的顺序排列
`variant { ... }`	变体，类似于 TypeScript 的联合类型。可以定义多个 case，每个 case 都有自己的类型。可以理解为"可能是这个类型，也可能是那个类型"。	对应于不同的 JavaScript 类型，需要根据 variant 的 case 来判断具体类型。	使用一个 tag 来表示当前是哪个 case，然后后面跟着对应 case 的数据
`option<T>`	可选类型，表示可能存在类型 `T` 的值，也可能不存在 (null/undefined)。	`T \| null \| undefined`	使用一个 byte 来表示是否存在值，然后后面跟着对应的值
`result<T, E>`	结果类型，表示操作可能成功，也可能失败。如果成功，则返回类型 `T` 的值；如果失败，则返回类型 `E` 的错误信息。	通常表示为 `Promise<T>`，如果操作失败，则 reject Promise。	使用一个 byte 来表示成功还是失败，然后后面跟着对应的值或错误信息

WIT 实战：咱们写个“翻译”小例子

咱们来写一个简单的 WIT 例子，定义一个 greeter 接口，包含一个 greet 函数，接收一个 string 类型的名字，返回一个 string 类型的问候语。

定义 WIT 接口 (greeter.wit):

package example

interface greeter {
  greet: func(name: string) -> string
}

这个 WIT 文件定义了一个名为 greeter 的接口，它包含一个 greet 函数。

Wasm 模块实现 greet 函数 (greeter.wat):

(module
  (import "example:greeter" "greet" (func $greet (param i32 i32) (result i32 i32)))

  (memory (export "memory") 1)

  (func (export "greet_wasm") (param i32 i32) (result i32 i32)
    local.get 0  ;; name 的指针
    local.get 1  ;; name 的长度
    call $greet
  )
)

这个 Wasm 模块导入了 example:greeter 接口的 greet 函数，然后定义了一个 greet_wasm 函数，它调用了导入的 greet 函数。注意，这里字符串是通过线性内存传递的，需要传递指针和长度。

JavaScript 代码调用 greet 函数:

async function run() {
  const imports = {
    "example:greeter": {
      greet(ptr, len) {
        const memory = instance.exports.memory.buffer;
        const name = new TextDecoder().decode(new Uint8Array(memory, ptr, len));
        const greeting = `Hello, ${name}! from JavaScript`;

        // 将 greeting 写入 Wasm 线性内存
        const greetingBytes = new TextEncoder().encode(greeting);
        const greetingPtr = instance.exports.alloc(greetingBytes.length); // 假设 Wasm 模块导出了一个 alloc 函数
        const greetingBuffer = new Uint8Array(memory, greetingPtr, greetingBytes.length);
        greetingBuffer.set(greetingBytes);

        return [greetingPtr, greetingBytes.length]; // 返回指针和长度
      },
    },
  };

  const { instance } = await WebAssembly.instantiateStreaming(fetch('greeter.wasm'), imports);

  // 在 Wasm 线性内存中分配空间来存储 name
  const name = "Wasm User";
  const nameBytes = new TextEncoder().encode(name);
  const namePtr = instance.exports.alloc(nameBytes.length);
  const nameBuffer = new Uint8Array(instance.exports.memory.buffer, namePtr, nameBytes.length);
  nameBuffer.set(nameBytes);

  // 调用 Wasm 的 greet_wasm 函数
  const [resultPtr, resultLen] = instance.exports.greet_wasm(namePtr, nameBytes.length);

  // 从 Wasm 线性内存中读取结果
  const memory = instance.exports.memory.buffer;
  const result = new TextDecoder().decode(new Uint8Array(memory, resultPtr, resultLen));

  console.log(result); // 输出: Hello, Wasm User! from JavaScript
}

run();

这个 JavaScript 代码首先定义了一个 imports 对象，其中包含了 example:greeter 接口的实现。然后，它加载 Wasm 模块，调用 Wasm 模块的 greet_wasm 函数，并从 Wasm 线性内存中读取结果。

WIT 工具链：让“翻译”更简单

手动编写 Wasm 模块和 JavaScript 代码来实现 WIT 接口是很麻烦的。幸好，有一些工具可以帮助我们自动生成代码：

wit-bindgen: 一个命令行工具，可以根据 WIT 文件自动生成 Wasm 和 JavaScript 的绑定代码。它可以处理各种复杂的 WIT 类型，比如 list、record 和 variant。

使用 wit-bindgen 的流程：

安装 wit-bindgen:
```
cargo install wit-bindgen-cli
```
生成 Wasm 绑定代码:
```
wit-bindgen greeter.wit --world greeter --out-dir ./generated
```
这个命令会根据 greeter.wit 文件生成 Wasm 绑定代码，并将其输出到 ./generated 目录。
生成 JavaScript 绑定代码:
```
wit-bindgen greeter.wit --world greeter --target javascript --out-dir ./generated
```
这个命令会根据 greeter.wit 文件生成 JavaScript 绑定代码，并将其输出到 ./generated 目录。

在 Wasm 模块中使用生成的绑定代码:

// 假设你使用 Rust 编写 Wasm 模块
mod greeter; // 引入生成的模块

use greeter::Greeter;

struct MyGreeter;

impl Greeter for MyGreeter {
    fn greet(name: String) -> String {
        format!("Hello, {}! from Wasm", name)
    }
}

greeter::export!(MyGreeter);

在 JavaScript 代码中使用生成的绑定代码:

import { Greeter } from './generated/greeter.js';

async function run() {
    const wasm = await fetch('greeter.wasm');
    const greeter = await Greeter.instantiate(wasm);

    const greeting = greeter.greet("Wasm User");
    console.log(greeting); // 输出: Hello, Wasm User! from Wasm
}

run();

WIT 的优势：不仅仅是“翻译”

WIT 不仅仅是一个“翻译官”，它还带来了以下优势：

类型安全： WIT 强制 Wasm 和 JavaScript 使用相同的数据类型，避免了类型错误。
性能优化： wit-bindgen 可以生成高效的绑定代码，减少数据拷贝和转换的开销。
代码复用： WIT 允许你定义通用的接口，并在不同的 Wasm 模块和 JavaScript 代码中复用。
组件模型： WIT 是 WebAssembly 组件模型的基础。组件模型允许你将多个 Wasm 模块组合成一个更大的组件，并定义组件之间的依赖关系。

更复杂的数据类型例子：Record 和 Variant

咱们来个更复杂一点的例子，展示 WIT 如何处理 record 和 variant 类型。假设我们要定义一个 user 类型，包含姓名、年龄和地址信息。地址信息可能包含邮政地址或电子邮件地址。

定义 WIT 接口 (user.wit):

package example

record address {
  street: string,
  city: string,
  zip: string
}

variant contact {
  email(string),
  postal(address)
}

record user {
  name: string,
  age: u32,
  contact_info: contact
}

interface user_service {
  get_user: func(id: u32) -> option<user>
}

这个 WIT 文件定义了 address、contact 和 user 三种类型。contact 是一个 variant 类型，表示联系方式可以是电子邮件地址或邮政地址。

Wasm 模块实现 get_user 函数 (Rust 示例):

mod user_service; // 引入生成的模块

use user_service::{UserService, User, Address, Contact};

struct MyUserService;

impl UserService for MyUserService {
    fn get_user(id: u32) -> Option<User> {
        if id == 1 {
            Some(User {
                name: "Wasm User".to_string(),
                age: 30,
                contact_info: Contact::Email("[email protected]".to_string()),
            })
        } else if id == 2 {
            Some(User {
                name: "Another User".to_string(),
                age: 25,
                contact_info: Contact::Postal(Address {
                    street: "123 Main St".to_string(),
                    city: "Anytown".to_string(),
                    zip: "12345".to_string(),
                }),
            })
        } else {
            None
        }
    }
}

user_service::export!(MyUserService);

这个 Rust 代码实现了 get_user 函数，根据 id 返回不同的 user 对象。注意，这里使用了 Contact::Email 和 Contact::Postal 来表示不同的联系方式。

JavaScript 代码调用 get_user 函数:

import { UserService } from './generated/user_service.js';

async function run() {
    const wasm = await fetch('user_service.wasm');
    const userService = await UserService.instantiate(wasm);

    const user1 = userService.get_user(1);
    console.log("User 1:", user1);

    const user2 = userService.get_user(2);
    console.log("User 2:", user2);

    const user3 = userService.get_user(3);
    console.log("User 3:", user3);
}

run();

这个 JavaScript 代码调用 get_user 函数，并打印返回的 user 对象。wit-bindgen 会自动处理 record 和 variant 类型的转换，使得 JavaScript 代码可以方便地访问 user 对象的各个字段。

总结：WIT 的未来

WebAssembly Interface Types (WIT) 是 WebAssembly 发展的重要一步。它解决了 Wasm 和 JavaScript 之间数据交换的难题，使得 Wasm 模块可以更方便地集成到 Web 应用中。随着 WebAssembly 组件模型的不断完善，WIT 将在未来的 Web 开发中扮演越来越重要的角色。

总而言之，WIT 让 Wasm 和 JavaScript 的“恋爱”变得更甜蜜，减少了“吵架”的几率，也让开发者们可以更省心省力地开发高性能的 Web 应用。

希望今天的讲座能让大家对 WIT 有更深入的了解。谢谢大家！

发表回复 取消回复

发表回复取消回复