Pengenalan kepada WebAssembly (WASM)-tutorial js-php.cn

Introduction to WebAssembly (WASM)

WebAssembly (WASM) ialah format arahan binari untuk mesin maya berasaskan tindanan, direka bentuk sebagai sasaran mudah alih untuk aplikasi berprestasi tinggi. Dalam artikel ini, kami akan meneroka cara untuk menyusun atur cara C mudah ke WebAssembly, memuatkannya ke dalam penyemak imbas web dan berinteraksi dengannya menggunakan JavaScript. Kami juga akan meneroka beberapa alatan dan perintah yang berguna untuk bekerja dengan WASM di luar persekitaran kontena dev.

Menyediakan Persekitaran Pembangunan

Buat struktur folder dan fail yang diperlukan untuk projek WebAssembly anda.

Buat Folder Projek: Mulakan dengan mencipta direktori baharu untuk projek anda. Di dalam folder ini, anda akan menambah fail dan konfigurasi yang diperlukan.

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

Salin selepas log masuk

Sediakan Bekas Dev: Dalam direktori wasm-web-example, cipta folder .devcontainer untuk menyimpan fail konfigurasi bekas dev. Fail ini akan menyediakan bekas dengan Emscripten dipasang untuk menyusun kod C ke dalam WebAssembly.

Di dalam folder .devcontainer, cipta fail berikut:

devcontainer.json

Fail ini mengkonfigurasi VSCode untuk menggunakan bekas Docker dengan sambungan dan tetapan persekitaran yang diperlukan.

 {
   "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"
 }

Salin selepas log masuk

Fail Docker

Fail Docker akan menyediakan persekitaran Emscripten. Berikut ialah kandungan untuk fail itu:

 # 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/*

Salin selepas log masuk

Buat Tetapan VSCode: Dalam akar projek anda, buat folder .vscode dengan fail berikut:

c_cpp_properties.json

Fail ini mengkonfigurasi C IntelliSense dan menyertakan laluan untuk projek anda.

 {
   "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
 }

Salin selepas log masuk

settings.json

Fail ini termasuk tetapan VSCode khusus untuk persatuan bahasa.

 {
   "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"
   }
 }

Salin selepas log masuk

Buat Fail C, JavaScript dan HTML: Sekarang, buat fail berikut untuk projek anda:

ujian.c

Fail C ini mengandungi fungsi mudah yang akan disusun ke WebAssembly.
```
 // test.c
 int add(int lhs, int rhs) {
     return lhs + rhs;
 }
```
Salin selepas log masuk

test.html

Fail HTML ini akan memuatkan modul WebAssembly menggunakan JavaScript.

 <!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));

Salin selepas log masuk

Sekarang anda telah menyediakan semua fail dan konfigurasi yang diperlukan, anda boleh meneruskan untuk menyusun dan berinteraksi dengan WebAssembly.

Menyusun Kod C ke WebAssembly Menggunakan Emscripten

Program Asas C:

Ujian fail.c mengandungi penambahan fungsi mudah yang menambah dua integer. Kami akan menyusun fungsi C ini ke dalam WebAssembly menggunakan Emscripten.
Perintah Emscripten:

Di dalam bekas dev, buka terminal (gunakan cmd j dalam VSCode) dan jalankan perintah Emscripten berikut untuk menyusun kod C ke WebAssembly:

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

Salin selepas log masuk

Arahan ini akan menjana test.wasm, binari WebAssembly dan memastikan bahawa fungsi tambah dieksport untuk digunakan dalam JavaScript.

Memuatkan dan Berinteraksi dengan WebAssembly dalam Penyemak Imbas

Persediaan HTML:

File test.html mengandungi halaman HTML ringkas yang memuatkan binari WebAssembly menggunakan JavaScript.
Persediaan JavaScript:

Fail JavaScript test.js memuatkan fail test.wasm dan memanggil fungsi tambah yang dieksport:

Menggunakan Alat Luaran pada macOS

Di luar bekas dev, terdapat beberapa arahan berguna yang boleh anda jalankan untuk berfungsi dengan WebAssembly pada Mac anda.

Pasang wabt: wabt (WebAssembly Binary Toolkit) menyediakan utiliti untuk bekerja dengan WebAssembly, termasuk menukar fail .wasm kepada format WAT (WebAssembly Text) yang boleh dibaca manusia. Pasangnya melalui 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"
 }

Salin selepas log masuk

Tukar WASM kepada WAT: Setelah wabt dipasang, anda boleh menggunakan alat wasm2wat untuk menukar binari WebAssembly anda (test.wasm) kepada format 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/*

Salin selepas log masuk

Layankan Halaman HTML: Untuk melihat halaman HTML yang berinteraksi dengan modul WebAssembly, anda boleh menggunakan pelayan HTTP mudah Python:

 {
   "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
 }

Salin selepas log masuk

Kesimpulan

Dengan mengikuti langkah ini, anda boleh menyediakan persekitaran pembangunan untuk menyusun kod C ke WebAssembly, berinteraksi dengannya menggunakan JavaScript dan menukar binari yang terhasil untuk pemeriksaan. Penggunaan alat luaran seperti wabt dan pelayan HTTP Python memudahkan pengurusan dan penerokaan modul WebAssembly pada sistem macOS.

Atas ialah kandungan terperinci Pengenalan kepada WebAssembly (WASM). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!