Pengenalan kepada 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.

1. 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

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

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

1. 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.
  

   
   
     
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>WebAssembly Example</title>
     
     
       <h1 id="WebAssembly-Example">WebAssembly Example</h1>
       <div>
  
  
  <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

1. 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.

2. 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

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

2. 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.

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

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

1. 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.