Rumah >hujung hadapan web >tutorial js >Pengenalan kepada WebAssembly (WASM)

Pengenalan kepada WebAssembly (WASM)

Barbara Streisandasal: 2025-01-11 07:26:421012semak imbas

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

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

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

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
 }

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

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;
 }
```

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

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

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

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

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
 }

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!

Python JavaScript json html for format include Directory using JS function this docker vscode macos http wasm

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Dari Tempatan ke Global: Migrasi Azure yang Meningkatkan Kecekapan dan Keselamatan KamiArtikel seterusnya：Dari Tempatan ke Global: Migrasi Azure yang Meningkatkan Kecekapan dan Keselamatan Kami

Artikel berkaitan

Lihat lagi