WebAssembly (WASM) 简介-js教程-PHP中文网

Introduction to WebAssembly (WASM)

WebAssembly (WASM) 是一种基于堆栈的虚拟机的二进制指令格式，设计为高性能应用程序的便携式目标。在本文中，我们将探讨如何将简单的 C 程序编译为 WebAssembly，将其加载到 Web 浏览器中，并使用 JavaScript 与其交互。我们还将探索一些在开发容器环境之外使用 WASM 的有用工具和命令。

设置开发环境

为您的 WebAssembly 项目创建必要的文件夹结构和文件。

创建项目文件夹：首先为您的项目创建一个新目录。在此文件夹中，您将添加必要的文件和配置。

   mkdir wasm-web-example
   cd wasm-web-example

登录后复制

设置开发容器：在 wasm-web-example 目录中，创建 .devcontainer 文件夹来存储 dev 容器配置文件。这些文件将设置一个安装了 Emscripten 的容器，用于将 C 代码编译成 WebAssembly。

在 .devcontainer 文件夹中，创建以下文件：

devcontainer.json

此文件将 VSCode 配置为使用具有必要扩展和环境设置的 Docker 容器。

 {
   "name": "Emscripten DevContainer",
   "build": {
     "dockerfile": "Dockerfile"
   },
   "customizations": {
     "vscode": {
       "settings": {
         "terminal.integrated.shell.linux": "/bin/bash",
         "C_Cpp.default.configurationProvider": "ms-vscode.cmake-tools",
         "C_Cpp.default.intelliSenseMode": "gcc-x64"
       },
       "extensions": [
         "ms-vscode.cpptools",
         "ms-vscode.cmake-tools"
       ]
     }
   },
   "postCreateCommand": "emcc --version"
 }

登录后复制

Dockerfile

Dockerfile 将设置 Emscripten 环境。这是该文件的内容：

 # Use the official Emscripten image
 FROM emscripten/emsdk:3.1.74

 # Set the working directory
 WORKDIR /workspace

 # Copy the source code into the container
 COPY . .

 # Install any additional packages if necessary (optional)
 # Ensure to clean up cache to minimize image size
 RUN apt-get update && \
     apt-get install -y build-essential && \
     apt-get clean && \
     rm -rf /var/lib/apt/lists/*

登录后复制

创建 VSCode 设置：在项目的根目录中，创建一个包含以下文件的 .vscode 文件夹：

c_cpp_properties.json

此文件配置 C IntelliSense 并包含项目的路径。

 {
   "configurations": [
     {
       "name": "Linux",
       "includePath": [
         "${workspaceFolder}/**",
         "/emsdk/upstream/emscripten/system/include"
       ],
       "defines": [],
       "compilerPath": "/usr/bin/gcc",
       "cStandard": "c17",
       "cppStandard": "gnu++17",
       "configurationProvider": "ms-vscode.cmake-tools"
     }
   ],
   "version": 4
 }

登录后复制

settings.json

此文件包含语言关联的特定 VSCode 设置。

 {
   "files.associations": {
     "emscripten.h": "c"
   },
   "[javascript]": {
     "editor.defaultFormatter": "vscode.typescript-language-features"
   },
   "[typescript]": {
     "editor.defaultFormatter": "vscode.typescript-language-features"
   },
   "[jsonc]": {
     "editor.defaultFormatter": "vscode.json-language-features"
   },
   "[json]": {
     "editor.defaultFormatter": "vscode.json-language-features"
   },
   "[html]": {
     "editor.defaultFormatter": "vscode.html-language-features"
   }
 }

登录后复制

创建 C、JavaScript 和 HTML 文件：现在，为您的项目创建以下文件：

test.c

这个 C 文件包含将被编译为 WebAssembly 的简单函数。
```
 // test.c
 int add(int lhs, int rhs) {
     return lhs + rhs;
 }
```
登录后复制

test.html

此 HTML 文件将使用 JavaScript 加载 WebAssembly 模块。

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>WebAssembly Example</title>
   </head>
   <body>
     <h1>WebAssembly Example</h1>
     <div>

</li>
<li>
<p><strong>test.js</strong><br><br>
 This JavaScript file will fetch the WebAssembly module and call the exported function.<br>
</p>
<pre class="brush:php;toolbar:false"> // test.js
 const wasmFile = 'test.wasm';

 fetch(wasmFile)
   .then(response => response.arrayBuffer())
   .then(bytes => WebAssembly.instantiate(bytes))
   .then(({ instance }) => {
     const result = instance.exports.add(5, 3); // Call the WebAssembly function
     document.getElementById('output').textContent = `Result from WebAssembly: ${result}`;
   })
   .catch(error => console.error('Error loading WebAssembly module:', error));

登录后复制

现在您已经设置了所有必要的文件和配置，您可以继续编译 WebAssembly 并与 WebAssembly 交互。

使用 Emscripten 将 C 代码编译为 WebAssembly

基础 C 程序:

文件 test.c 包含一个简单的函数 add，用于将两个整数相加。我们将使用 Emscripten 将此 C 函数编译为 WebAssembly。
Emscripten 命令:

在 dev 容器内，打开终端（在 VSCode 中使用 cmd j）并运行以下 Emscripten 命令将 C 代码编译为 WebAssembly：

   mkdir wasm-web-example
   cd wasm-web-example

登录后复制

此命令将生成 test.wasm（WebAssembly 二进制文件），并确保导出 add 函数以在 JavaScript 中使用。

在浏览器中加载 WebAssembly 并与之交互

HTML 设置:

文件 test.html 包含一个简单的 HTML 页面，该页面使用 JavaScript 加载 WebAssembly 二进制文件。
JavaScript 设置:

JavaScript 文件 test.js 加载 test.wasm 文件并调用导出的 add 函数：

在 macOS 上使用外部工具

在开发容器之外，您可以运行几个有用的命令来在 Mac 上使用 WebAssembly。

安装wabt： wabt（WebAssembly 二进制工具包）提供了用于使用 WebAssembly 的实用程序，包括将 .wasm 文件转换为人类可读的 WAT（WebAssembly 文本）格式。通过 Homebrew 安装：

 {
   "name": "Emscripten DevContainer",
   "build": {
     "dockerfile": "Dockerfile"
   },
   "customizations": {
     "vscode": {
       "settings": {
         "terminal.integrated.shell.linux": "/bin/bash",
         "C_Cpp.default.configurationProvider": "ms-vscode.cmake-tools",
         "C_Cpp.default.intelliSenseMode": "gcc-x64"
       },
       "extensions": [
         "ms-vscode.cpptools",
         "ms-vscode.cmake-tools"
       ]
     }
   },
   "postCreateCommand": "emcc --version"
 }

登录后复制

将 WASM 转换为 WAT：安装 wabt 后，您可以使用 wasm2wat 工具将 WebAssembly 二进制文件 (test.wasm) 转换为 WAT 格式：

 # Use the official Emscripten image
 FROM emscripten/emsdk:3.1.74

 # Set the working directory
 WORKDIR /workspace

 # Copy the source code into the container
 COPY . .

 # Install any additional packages if necessary (optional)
 # Ensure to clean up cache to minimize image size
 RUN apt-get update && \
     apt-get install -y build-essential && \
     apt-get clean && \
     rm -rf /var/lib/apt/lists/*

登录后复制

提供 HTML 页面：要查看与 WebAssembly 模块交互的 HTML 页面，可以使用 Python 的简单 HTTP 服务器：

 {
   "configurations": [
     {
       "name": "Linux",
       "includePath": [
         "${workspaceFolder}/**",
         "/emsdk/upstream/emscripten/system/include"
       ],
       "defines": [],
       "compilerPath": "/usr/bin/gcc",
       "cStandard": "c17",
       "cppStandard": "gnu++17",
       "configurationProvider": "ms-vscode.cmake-tools"
     }
   ],
   "version": 4
 }

登录后复制