边缘函数

使用 Wasm 模块

如何在边缘函数中使用 WebAssembly。

边缘函数支持运行 WebAssembly (Wasm) 模块。当您需要优化JavaScript运行较慢的代码或进行底层操作时，WebAssembly非常有用。

它还允许您将其他语言编写的现有库移植到JavaScript环境中使用。例如，magick-wasm 就是一个将C语言库移植到WebAssembly的图像处理和转换工具。

编写Wasm模块

您可以使用不同的语言和SDK来编写Wasm模块。本教程中，我们将用Rust编写一个简单的Wasm模块来实现两数相加。

按照这个使用Rust编写Wasm模块的指南来设置您的开发环境。

创建一个名为wasm-add的新边缘函数：

1
supabase functions new wasm-add

在函数目录内为Wasm模块创建一个新的Cargo项目：

1
2
cd supabase/functions/wasm-addcargo new --lib add-wasm

将以下代码添加到add-wasm/src/lib.rs中：

1
2
3
4
5
6
use wasm_bindgen::prelude::*;#[wasm_bindgen]pub fn add(a: u32, b: u32) -> u32 {    a + b}
View source

更新add-wasm/Cargo.toml文件，添加wasm-bindgen依赖项：

1
2
3
4
5
6
7
8
9
10
11
12
[package]name = "add-wasm"version = "0.1.0"description = "A simple wasm module that adds two numbers"license = "MIT/Apache-2.0"edition = "2021"[lib]crate-type = ["cdylib"][dependencies]wasm-bindgen = "0.2"
View source

然后我们可以通过运行以下命令构建包：

1
wasm-pack build --target deno

这将在add-wasm/pkg目录下生成一个Wasm二进制文件。

从边缘函数调用 Wasm 模块

现在让我们更新边缘函数，从 Wasm 模块调用 add 方法。

1
2
3
4
5
6
7
8
9
import { add } from "./add-wasm/pkg/add_wasm.js";Deno.serve(async (req) => {  const { a, b } = await req.json();  return new Response(    JSON.stringify({ result: add(a, b) }),    { headers: { "Content-Type": "application/json" } },  );});
View source

打包并部署边缘函数

在部署边缘函数之前，我们需要确保它打包了 Wasm 模块。我们可以通过在 superbase/config.toml 中为函数定义 static_files 来实现这一点。

1
2
[functions.wasm-add]static_files = [ "./functions/wasm-add/add-wasm/pkg/*"]

通过运行以下命令部署函数：

1
supabase functions deploy wasm-add