### Wasm 编译目标与系统交互能力 | 编译目标 | 系统交互 | 适用场景 | |---------|---------|----------| | `wasm32-unknown-unknown` | 无法直接访问OS | 浏览器环境 | | `wasm32-wasi` | 可访问文件、网络、环境变量 | 服务器/本地环境 | ### 关键区别 - **`wasm32-unknown-unknown`**：纯黑盒，只能做计算，无法访问任何系统资源 - **`wasm32-wasi`**：通过沙盒授权访问系统资源，需要运行时显式授予权限（如 `preopens` 目录映射） ### WASI 权限示例 ```bash # 运行WASI模块时授权目录访问 wasmtime --dir=. myapp.wasm # 授权特定目录映射 wasmer run myapp.wasm --mapdir /app:. # 授权环境变量 wasmtime --env DATABASE_URL=sqlite://db --env PORT=8080 myapp.wasm ``` ### 架构示意 ``` ┌─────────────────────────────────────────────┐ │ Rust 源代码 │ │ (cargo 编译为目标) │ └───────────────┬─────────────────────────────┘ │ ┌───────┴───────┐ ▼ ▼ ┌──────────────┐ ┌──────────────┐ │ unknown-unknown│ │ wasi │ │ (浏览器) │ │ (服务器) │ │ 纯计算 │ │ 可访问系统 │ └──────────────┘ └──────────────┘ ```

### 浏览器中只能使用 wasm32-unknown-unknown 浏览器不提供 WASI 系统接口，只能使用纯计算模式。 ### 主要用途 | 用途 | 说明 | 示例 | |------|------|------| | 计算密集型任务 | 充分利用Wasm接近原生的性能 | 图像处理、加密解密、数据压缩、物理引擎 | | 复用Rust代码库 | 将服务端算法在浏览器中运行 | 算法验证、业务规则引擎、序列化解析 | | 游戏引擎 | 高性能图形计算 | 物理碰撞、粒子系统 | ### 不应该做的事 - DOM操作（交给JavaScript） - 网络请求（交给JavaScript的fetch/XMLHttpRequest） - 文件访问（浏览器沙箱限制） ### 架构模式 ``` 用户交互 → JavaScript → Wasm计算 → JavaScript → 更新UI ``` ### wasm-pack 构建浏览器模块 ```toml # Cargo.toml [lib] crate-type = ["cdylib"] [dependencies] wasm-bindgen = "0.2" js-sys = "0.3" ``` ```rust // src/lib.rs use wasm_bindgen::prelude::*; #[wasm_bindgen] pub fn process_image(data: &[u8], width: u32, height: u32) -> Vec { // 灰度化处理 let mut result = vec![0u8; (width * height * 4) as usize]; for i in (0..data.len()).step_by(4) { let gray = (data[i] as f32 * 0.299 + data[i+1] as f32 * 0.587 + data[i+2] as f32 * 0.114) as u8; result[i] = gray; result[i+1] = gray; result[i+2] = gray; result[i+3] = 255; } result } ``` ```bash # 编译为浏览器Wasm模块 wasm-pack build --target web ```

### 微信小程序中的 Wasm 微信小程序从基础库 v2.13.0 开始支持 WebAssembly。 ### 核心限制 | 限制项 | 说明 | |--------|------| | 编译目标 | 只能用 `wasm32-unknown-unknown`（不支持WASI） | | 文件大小 | 单包 < 2MB，总包 < 20MB | | API差异 | 使用 `WXWebAssembly` 而非标准 `WebAssembly` | ### 使用方式 ```javascript // 微信小程序中加载Wasm wx.requestFilesystemManager().readFile({ filePath: `${wx.env.USER_DATA_PATH}/lib.wasm.br`, encoding: 'binary', success(res) { // 使用WXWebAssembly而非WebAssembly const wasm = WXWebAssembly.instantiate(res.data, {}); // 调用导出的函数 const result = wasm.instance.exports.compute(); } }); ``` ### 胶水代码适配 需要手动将 `WebAssembly` 替换为 `WXWebAssembly`： ```javascript // 原始代码 (浏览器) const wasm = await WebAssembly.instantiate(bytes, importObject); // 适配后 (微信小程序) const wasm = await WXWebAssembly.instantiate(bytes, importObject); ``` ### 优化建议 | 优化手段 | 效果 | |---------|------| | Brotli压缩 (`.wasm.br`) | 文件体积减少60%~80% | | 分包加载 | 主包不超限，按需加载Wasm | | wasm-opt优化 | 编译时优化减小体积 |

### 三大运行时对比 | 特性 | Wasmtime | Wasmer | WasmEdge | |------|----------|--------|----------| | **定位** | 轻量、标准化 | 通用、跨平台 | 云原生、AI增强 | | **编译后端** | Cranelift | Singlepass/Cranelift/LLVM | LLVM (AOT) | | **跨平台** | 主流OS和架构 | 极强，支持移动端/RISC-V | Linux/Android/OpenHarmony | | **典型场景** | 微服务、无服务器函数 | 多平台部署 | 边缘AI、K8s集成 | | **归属** | Bytecode Alliance | Wasmer公司 | CNCF沙盒项目 | | **启动速度** | 极快 (~1ms) | 快 (~5ms) | 快 (~1ms AOT) | | **语言绑定** | Rust/C/Python/Go | Rust/C/Python/PHP/Ruby | Rust/C/Go/Java/Node.js | ### 选择建议 - **追求极致轻量和快速启动** → **Wasmtime** - **需要跨平台广泛兼容** → **Wasmer** - **云原生集成、AI推理场景** → **WasmEdge** ### 性能对比 (vs 容器) | 指标 | Wasm模块 | Docker容器 | 差异 | |------|----------|------------|------| | 启动速度 | ~1ms | ~8.4ms | 快 88.1% | | 镜像大小 | ~0.3MB | ~36MB | 小 99.17% | | 计算密集型性能 | 较慢 | 较快 | 慢约36.15% | | 功耗 | 较高 | 较低 | 高约9.26% | ### 快速决策表 | 部署环境 | 编译目标 | 运行时 | 系统访问 | |---------|----------|--------|----------| | 浏览器 | `wasm32-unknown-unknown` | 浏览器内置 | 通过JS桥接 | | 微信小程序 | `wasm32-unknown-unknown` | `WXWebAssembly` | 通过JS桥接 | | 服务器/边缘 | `wasm32-wasi` | Wasmtime/Wasmer/WasmEdge | 沙盒授权访问 | | 云原生K8s | `wasm32-wasi` | WasmEdge | 沙盒授权访问 |

### Wasmtime 微服务示例 Wasmtime 是 Bytecode Alliance 出品的轻量级Wasm运行时，启动速度极快（~1ms），非常适合微服务场景。 ### 1. 编译Rust微服务为WASI模块 ```toml # Cargo.toml [[bin]] name = "micro-service" path = "src/main.rs" [dependencies] tiny_http = "0.12" ``` ```rust // src/main.rs use tiny_http::{Server, Response, Header}; use std::env; fn main() { let port = env::var("PORT").unwrap_or_else(|_| "8080".to_string()); let addr = format!("0.0.0.0:{}", port); let server = Server::http(&addr).unwrap(); println!("Micro service running on {}", addr); for request in server.incoming_requests() { let response = Response::from_string( r#"{"status":"ok","service":"wasm-micro"}"# ) .with_header( Header::from_bytes(&b"Content-Type"[..], &b"application/json"[..]).unwrap() ); request.respond(response).unwrap(); } } ``` ```bash # 编译为WASI目标 cargo build --target wasm32-wasi --release # 使用Wasmtime运行微服务 wasmtime \ --env PORT=8080 \ --tcplisten 0.0.0.0:8080 \ target/wasm32-wasi/release/micro-service.wasm ``` ### 2. 使用 Wasmtime 的 Rust API 嵌入微服务 ```rust // 在主服务中嵌入Wasmtime执行用户代码 use wasmtime::*; fn main() -> anyhow::Result<()> { let engine = Engine::default(); let module = Module::from_file(&engine, "handler.wasm")?; // 创建带权限的Store let mut store = Store::new(&engine, 4u32); // WASI配置 let wasi_ctx = wasmtime_wasi::WasiCtxBuilder::new() .inherit_stdio() .preopened_dir("./data", "/data", DirPerms::READ, FilePerms::READ)? .build(); let instance = Instance::new(&mut store, &module, &[])?; let handler = instance.get_typed_func::<(&str,), (String,)>(&mut store, "handle")?; // 调用Wasm处理请求 let (result,) = handler.call(&mut store, ("GET /api/users",))?; println!("Response: {}", result); Ok(()) } ```

### Wasmtime 无服务器函数 (Serverless) Wasmtime 的毫秒级启动使其成为Serverless的理想运行时，无需冷启动等待。 ### 1. 编写处理函数 ```rust // src/main.rs use std::io::{self, Read, Write}; fn main() { // 读取事件输入 let mut input = String::new(); io::stdin().read_to_string(&mut input).unwrap(); // 处理逻辑 let result = process_event(&input); // 输出结果 print!("\\x7B\"statusCode\": 200, \"body\": \"{}\"\\x7D", result); } fn process_event(input: &str) -> String { // 示例：解析JSON并处理 format!("Processed: {}", input.len()) } ``` ```bash # 编译 cargo build --target wasm32-wasi --release # 执行无服务器函数 echo '{"event":"test"}' | wasmtime target/wasm32-wasi/release/serverless.wasm # 输出: {"statusCode": 200, "body": "Processed: 17"} ``` ### 2. HTTP触发器模式 ```rust // handler.rs - HTTP请求处理 use std::collections::HashMap; #[no_mangle] pub extern "C" fn handle_request( method_ptr: *const u8, method_len: usize, path_ptr: *const u8, path_len: usize, ) -> *mut u8 { let method = unsafe { std::slice::from_raw_parts(method_ptr, method_len) }; let path = unsafe { std::slice::from_raw_parts(path_ptr, path_len) }; let response = match (method, path) { (b"GET", p) if p.starts_with(b"/api/users") => { r#"{"users":[{"id":1,"name":"Alice"}]}"# } (b"POST", p) if p.starts_with(b"/api/users") => { r#"{"id":2,"status":"created"}"# } _ => r#"{"error":"not found"}"# }; // 返回结果指针 let result = response.to_string().into_bytes(); let len = result.len(); let mut boxed = result.into_boxed_slice(); let ptr = boxed.as_mut_ptr(); std::mem::forget(boxed); ptr } ``` ### 3. 对比传统容器 | 指标 | Wasmtime | Docker (Node.js) | 差异 | |------|----------|-------------------|------| | 冷启动 | ~1ms | ~2000ms | 快2000倍 | | 内存占用 | ~2MB | ~50MB | 小96% | | 镜像大小 | ~0.5MB | ~150MB | 小99.7% | | 并发能力 | 极高 | 中 | 显著提升 |

### Wasmtime 插件系统 Wasmtime 非常适合构建安全的插件系统：沙箱隔离 + 细粒度权限控制。 ### 1. 定义插件接口 ```rust // plugin_host.rs use wasmtime::*; use std::path::Path; pub struct Plugin { engine: Engine, module: Module, } impl Plugin { pub fn load(wasm_path: &str) -> Result { let engine = Engine::default(); let module = Module::from_file(&engine, wasm_path)?; Ok(Plugin { engine, module }) } /// 执行插件的处理函数 pub fn process(&self, input: &str) -> Result { let mut store = Store::new(&self.engine, ()); // 注入宿主函数 let log_func = Func::wrap(&mut store, |mut caller: Caller<'_, ()>, msg: &str| { println!("[Plugin Log] {}", msg); }); let instance = Instance::new( &mut store, &self.module, &[log_func.into()] )?; let process = instance.get_typed_func::<(&str,), (String,)>( &mut store, "process" )?; let (result,) = process.call(&mut store, (input,))?; Ok(result) } } fn main() -> Result<()> { // 加载插件 let plugins = ["plugins/text_filter.wasm", "plugins/word_count.wasm"]; let input = "Hello World, Wasm Plugin!"; for plugin_path in &plugins { if Path::new(plugin_path).exists() { let plugin = Plugin::load(plugin_path)?; let result = plugin.process(input)?; println!("{} → {}", plugin_path, result); } } Ok(()) } ``` ### 2. 编写插件 (Wasm模块) ```rust // plugins/text_filter/src/lib.rs use wasi::host_print; #[no_mangle] pub extern "C" fn process(input_ptr: *const u8, input_len: usize) -> usize { // 过滤敏感词的插件实现 let input = unsafe { std::slice::from_raw_parts(input_ptr, input_len) }; let input_str = std::str::from_utf8(input).unwrap(); // 过滤处理 let filtered = input_str.replace("bad", "***"); // 返回处理后的长度 filtered.len() } // 使用wit-bindgen定义标准接口 // wit/world.wit // package plug-in:plugin; // world plugin { // export process: func(input: string) -> string; // } ``` ### 3. 插件沙箱安全 | 安全特性 | 说明 | |---------|------| | 内存隔离 | 插件无法访问宿主内存 | | 权限控制 | 仅授权的WASI能力可用 | | 超时限制 | 可设置执行超时 | | 资源限制 | 可限制内存和CPU使用 | ```rust // 限制插件资源 let mut config = Config::new(); config.consume_fuel(true); // 启用燃料机制 let engine = Engine::new(&config)?; let mut store = Store::new(&engine, 0u64); // 给插件10000单位燃料 store.set_fuel(10000)?; // 超出燃料会自动终止 ```

### Wasmer 基本使用 Wasmer 是一个通用、跨平台的Wasm运行时，支持WebAssembly在多种环境中运行。 ### 安装 Wasmer ```bash # macOS curl https://get.wasmer.io -sSfL | sh # Linux curl https://get.wasmer.io -sSfL | sh # Windows (PowerShell) irm https://win.wasmer.io | iex # 验证 wasmer --version # wasmer 4.3.0 ``` ### 运行 Wasm 模块 ```bash # 运行 WAT (WebAssembly Text Format) 文件 cat > hello.wat << 'EOF' (module (func (export "add") (param i32 i32) (result i32) local.get 0 local.get 1 i32.add) ) EOF # 运行Wasm函数 wasmer run hello.wat --invoke add 3 5 # 输出: 8 ``` ### 使用 Rust API 嵌入 Wasmer ```rust // Cargo.toml: wasmer = "4.3" use wasmer::{Store, Module, Instance, Value, imports}; fn main() -> anyhow::Result<()> { let mut store = Store::default(); // 编译Wasm模块 let module = Module::from_file(&store, "hello.wasm")?; // 创建实例 let import_object = imports!{}; let instance = Instance::new(&mut store, &module, &import_object)?; // 调用函数 let add = instance.exports.get_function("add")?; let result = add.call(&mut store, &[Value::I32(10), Value::I32(20)])?; println!("10 + 20 = {:?}", result[0]); // 输出: 10 + 20 = I32(30) Ok(()) } ``` ### Wasmer 包管理器 (wapm) ```bash # 安装包 wapm install python/python # 运行安装的包 wasmer run python/python.wasm -- -c "print('Hello from Wasmer!')" # 发布包 wapm publish ```

### Wasmer 在浏览器中使用 Wasmer 确实支持浏览器！通过 `wasmer-js` (即 `@wasmer/wasmfs` / `@wasmer/wasi`) 可在浏览器中运行WASI模块。 ### 安装 wasmer-js ```bash npm install @wasmer/wasi @wasmer/wasmfs @wasmer/wasm-transformer ``` ### 浏览器中运行 WASI 模块 ```html

Wasmer 浏览器 Wasm 运行时

``` ### 浏览器运行的Rust代码 ```rust // hello.rs - 编译为 wasm32-wasi fn main() { println!("Hello from Wasmer in Browser!"); println!("Current time: {}", std::time::SystemTime::now() .duration_since(std::time::UNIX_EPOCH) .unwrap() .as_secs()); } ``` ```bash # 编译为WASI cargo build --target wasm32-wasi --release # 使用webpack-dev-server运行 npx webpack-dev-server --open ``` ### WasmerJS 适用场景 | 场景 | 说明 | |------|------| | 教育平台 | 在线运行代码（无需后端） | | CLI工具 | 将命令行工具搬到浏览器 | | 游戏引擎 | 运行编译为Wasm的游戏引擎 | | 数据处理 | 浏览器端运行数据分析 |

### Wasmer 跨平台部署 Wasmer 是跨平台能力最强的Wasm运行时之一，支持 Linux、macOS、Windows 以及移动端。 ### 支持的平台 | 平台 | 架构 | 支持状态 | |------|------|----------| | Linux | x86_64 | 完全支持 | | Linux | ARM64 | 完全支持 | | Linux | RISC-V | 实验性 | | macOS | x86_64/ARM64 | 完全支持 (Universal Binary) | | Windows | x86_64 | 完全支持 | | Android | ARM64 | 通过交叉编译 | | iOS | ARM64 | 实验性 | ### 单一二进制部署 ```bash # 编译一次，到处运行 # 在Linux上编译 cargo build --target wasm32-wasi --release # 同一个.wasm文件可以在任何有Wasmer的平台上运行 wasmer run app.wasm # Linux wasmer run app.wasm # macOS wasmer run app.wasm # Windows wasmer run app.wasm # 树莓派 ``` ### 容器化部署 ```dockerfile # Dockerfile - Wasmer容器 FROM wasmer/wasmer:latest COPY app.wasm /app/app.wasm CMD ["wasmer", "run", "/app/app.wasm", "--mapdir", "/data:/app/data"] ``` ```bash # 构建并运行 docker build -t wasm-app . docker run -p 8080:8080 wasm-app ``` ### 语言绑定 ```python # Python中使用Wasmer from wasmer import engine, Store, Module, Instance # 编译模块 store = Store() module = Module(store, open('app.wasm', 'rb').read()) # 实例化 instance = Instance(module, []) # 调用导出函数 result = instance.exports.add(10, 20) print(f"Result: {result}") ``` ```ruby # Ruby中使用Wasmer require 'wasmer' module_bytes = File.read('app.wasm') instance = Wasmer::Instance.new(module_bytes) result = instance.exports.add.(10, 20) puts "Result: #{result}" ``` ```php // PHP中使用Wasmer $instance = new \Wasmer\Instance('app.wasm'); $result = $instance->add(10, 20); echo "Result: {$result}\n"; ``` ### 部署对比 | 部署方式 | Wasmer Wasm | 传统容器 | 说明 | |---------|-------------|----------|------| | 跨平台 | 同一文件 | 需多架构镜像 | Wasm优势明显 | | 启动速度 | ~5ms | ~8s | 快1600倍 | | 镜像大小 | ~0.5MB | ~100MB+ | 小99% | | 生态工具 | wapm包管理器 | Docker Hub | 各有优势 |

### WasmEdge 运行 AI 推理模型 WasmEdge 是 CNCF 沙盒项目，专为云原生和 AI 场景设计，内置对 TensorFlow Lite、PyTorch 等推理框架的支持。 ### 安装 WasmEdge ```bash # 一键安装 curl -sSf https://raw.githubusercontent.com/WasmEdge/WasmEdge/master/utils/install.sh | bash # 验证 wasmedge --version # wasmedge version 0.14.0 ``` ### 1. Rust AI 推理服务 ```rust // Cargo.toml // 编译: cargo build --target wasm32-wasi --release use wasi_nn; use std::env; fn main() { // 加载模型 let model_path = env::var("MODEL_PATH") .unwrap_or_else(|_| "mobilenet_v2".to_string()); let graph = wasi_nn::GraphBuilder::new( wasi_nn::GraphEncoding::TensorflowLite, wasi_nn::ExecutionTarget::CPU, ) .build_from_files([&format!("models/{}/model.tflite", model_path)]) .unwrap(); // 创建执行上下文 let mut context = graph.init_execution_context().unwrap(); // 准备输入张量 (224x224 RGB) let input: Vec = vec![0.0; 224 * 224 * 3]; // 模拟输入 // 设置输入 context.set_input(0, wasi_nn::TensorType::F32, &[1, 224, 224, 3], &input).unwrap(); // 执行推理 context.compute().unwrap(); // 获取输出 let mut output_buffer = vec![0.0f32; 1001]; // ImageNet 1001类 context.get_output(0, &mut output_buffer).unwrap(); // 找到最大概率的类别 let (class_id, confidence) = output_buffer .iter() .enumerate() .max_by(|(_, a), (_, b)| a.partial_cmp(b).unwrap()) .unwrap(); println!("\\x7B\"class\": {}, \"confidence\": {:.4}\\x7D", class_id, confidence); } ``` ```bash # 编译并运行AI推理 cargo build --target wasm32-wasi --release # 使用WasmEdge运行 (需要wasi-nn插件) wasmedge --dir:. \ --env MODEL_PATH=mobilenet_v2 \ target/wasm32-wasi/release/ai_infer.wasm # 输出: {"class": 281, "confidence": 0.8532} ``` ### 2. Python模型 → WasmEdge ```bash # 使用wasmedge-tensorflow-lite直接运行Python模型 wasmedge-tensorflow-lite --dir models \ wasmedge_quickjs.wasm \ inference.js ``` ```javascript // inference.js - 在WasmEdge中运行的JS推理 globalThis.load_model = function(imageData) { const tflite = import_module('wasi_nn'); const graph = tflite.load('models/mobilenet.tflite'); const result = graph.infer(imageData); return JSON.stringify(result); }; ``` ### AI推理性能对比 | 模型 | WasmEdge | Python(TensorFlow) | 差异 | |------|----------|---------------------|------| | MobileNetV2 | 15ms | 22ms | 快32% | | 内存占用 | 45MB | 180MB | 小75% | | 冷启动 | 3ms | 3000ms | 快1000倍 |

### WasmEdge 高并发 Web 请求处理 WasmEdge 支持 async 和非阻塞 I/O，适合处理高并发 HTTP 请求。 ### 1. 异步HTTP服务 ```rust // src/main.rs - 高并发HTTP服务 // cargo build --target wasm32-wasi --release use std::io::{Read, Write}; use std::net::TcpListener; async fn handle_request(mut stream: impl Read + Write) { // 读取请求 let mut buffer = [0; 1024]; let _ = stream.read(&mut buffer); let request = String::from_utf8_lossy(&buffer[..]); let path = request.lines().next() .and_then(|line| line.split_whitespace().nth(1)) .unwrap_or("/"); // 路由处理 let (status, body) = match path { "/api/health" => ("200 OK", r#"{"status":"healthy"}"#), "/api/metrics" => ("200 OK", r#"{"cpu":45,"memory":1024}"#), "/api/data" => { // 数据处理逻辑 ("200 OK", r#"{"data":[1,2,3,4,5]}"#) } _ => ("404 Not Found", r#"{"error":"not found"}"#), }; // 发送响应 let response = format!( "HTTP/1.1 {}\r\nContent-Type: application/json\r\nContent-Length: {}\r\n\r\n{}", status, body.len(), body ); let _ = stream.write(response.as_bytes()); let _ = stream.flush(); } fn main() { let listener = TcpListener::bind("0.0.0.0:3000").unwrap(); println!("Server running on :3000"); for stream in listener.incoming() { let stream = stream.unwrap(); // 每个请求在独立的轻量级线程中处理 std::thread::spawn(move || { // WasmEdge支持async运行时 handle_request(stream); }); } } ``` ```bash # 编译运行 cargo build --target wasm32-wasi --release wasmedge --address 0.0.0.0:3000 target/wasm32-wasi/release/web_server.wasm # 测试并发 ab -n 10000 -c 1000 http://localhost:3000/api/health ``` ### 2. Dapr + WasmEdge 微服务 ```yaml # k8s-deployment.yaml apiVersion: apps/v1 kind: Deployment metadata: name: wasm-microservice spec: replicas: 10 selector: matchLabels: app: wasm-service template: spec: runtimeClassName: wasmedge # 使用WasmEdge运行时 containers: - name: app image: registry/app.wasm:latest resources: limits: memory: "32Mi" cpu: "100m" ``` ### 高并发性能数据 | 指标 | WasmEdge | Node.js | Go | |------|----------|---------|-----| | QPS | 120,000 | 35,000 | 110,000 | | 延迟(P99) | 2ms | 15ms | 3ms | | 内存/实例 | 2MB | 35MB | 8MB | | 启动时间 | 1ms | 200ms | 5ms |

### WasmEdge 边缘 JavaScript / SSR WasmEdge 内置 QuickJS 引擎，可以在边缘端运行 JavaScript，支持服务端渲染(SSR)。 ### 1. 在 WasmEdge 中运行 JavaScript ```javascript // hello.js console.log("Hello from WasmEdge JavaScript!"); // 访问WASI能力 const os = import('os'); console.log("Platform:", os.platform()); ``` ```bash # 运行JavaScript wasmedge --js wasmedge_quickjs.wasm hello.js # 输出: Hello from WasmEdge JavaScript! ``` ### 2. React SSR 服务端渲染 ```javascript // ssr-server.js - 使用React进行服务端渲染 const React = { createElement: function(type, props, ...children) { return { type, props: props || {}, children }; } }; function App(props) { return React.createElement('div', { class: 'app' }, React.createElement('h1', null, props.title), React.createElement('p', null, props.content) ); } function renderToString(element) { if (typeof element === 'string') return element; if (!element) return ''; const children = (element.children || []) .map(renderToString).join(''); const attrs = Object.entries(element.props || {}) .map(([k,v]) => ` ${k}="${v}"`).join(''); return `<${element.type}${attrs}>${children}</${element.type}>`; } // HTTP处理 function handleRequest(request) { const html = renderToString( React.createElement(App, { title: 'Hello SSR', content: 'Rendered by WasmEdge at edge!' }) ); return { status: 200, headers: { 'Content-Type': 'text/html' }, body: `${html}` }; } // 导出处理函数 globalThis.handleRequest = handleRequest; ``` ```bash # 编译WasmEdge QuickJS + SSR wasmedge --js ssr-server.wasm # 使用cURL测试 curl http://localhost:3000/ # 返回渲染好的HTML ``` ### 3. Next.js SSR on WasmEdge ```yaml # next.config.js module.exports = { target: 'experimental-serverless-wasm', wasmRuntime: 'wasmedge', }; ``` ```bash # 构建并部署到WasmEdge npm run build wasmedge deploy ./out/server.wasm ``` ### 4. CDN边缘函数 ```javascript // edge-function.js - 在CDN边缘运行 function onRequest(context) { const { request, env } = context; // 根据地理位置重定向 const country = request.headers.get('CF-IPCountry'); if (country === 'CN') { return Response.redirect('https://cn.example.com', 302); } // 缓存策略 const cacheKey = new Request(request.url, request); const cachedResponse = await caches.default.match(cacheKey); if (cachedResponse) { return cachedResponse; } // 回源 const response = await fetch(request); const newResponse = new Response(response.body, response); newResponse.headers.set('Cache-Control', 'public, max-age=3600'); await caches.default.put(cacheKey, newResponse.clone()); return newResponse; } ``` ### 边缘SSR优势 | 指标 | WasmEdge SSR | 传统Node.js SSR | |------|-------------|-------------------| | 冷启动 | ~3ms | ~3000ms | | 内存占用 | ~5MB | ~100MB+ | | 全球部署 | 毫秒级分发 | 分钟级 | | 成本 | 低 (共享资源) | 高 (专用实例) |