WebAssembly (WASM) untuk Aplikasi Berprestasi Tinggi · Pelajaran

Memuatkan & Menjalankan WASM dalam JavaScript

Pelajari cara memuatkan modul WASM yang telah dikompil dalam pelayar web menggunakan JavaScript dan memanggil fungsi yang dieksport olehnya.

Pelajaran 2 daripada 411 langkah

Memuatkan & Menjalankan WASM dalam JavaScript ialah pelajaran WebAssembly (WASM) untuk Aplikasi Berprestasi Tinggi percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran WebAssembly (WASM) untuk Aplikasi Berprestasi Tinggi, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus WebAssembly (WASM) untuk Aplikasi Berprestasi Tinggi merangkumi sejumlah 4 pelajaran.

Membawa WASM ke dalam Pelayar

Selamat datang! Anda telah mempelajari cara mengompil kod C/C++ kepada fail .wasm. Kini tiba masanya untuk menghidupkan modul WebAssembly yang berkuasa itu dalam pelayar web Anda.

Pelajaran ini akan membimbing Anda memuatkan modul .wasm menggunakan JavaScript dan memanggil fungsinya.

Gerbang WASM Pelayar

Pelayar web moden menyediakan objek global WebAssembly. Objek ini ialah antara muka utama Anda untuk berinteraksi dengan modul WebAssembly.

Ia membolehkan Anda mengompil, mewujudkan dan mengurus kod WASM.
Kita akan menggunakan kaedahnya untuk mendapatkan dan memuatkan fail .wasm ke dalam persekitaran masa jalan pelayar.

Pemuatan WASM yang Dipermudah

Cara paling cekap untuk memuatkan modul WASM daripada permintaan rangkaian adalah dengan menggunakan WebAssembly.instantiateStreaming().

Ia menstrim bait mentah terus daripada respons rangkaian.
Ia mengompil dan mewujudkan modul dalam satu langkah, sekali gus menjimatkan masa dan sumber.
Kaedah ini menjangkakan objek Response, yang biasanya diperoleh daripada API fetch().

Fungsi C Mudah Kita

Anggaplah kita mempunyai fungsi C yang sangat asas untuk menambah dua nombor, seperti yang berikut. Fungsi ini akan dikompil kepada add.wasm (seperti yang dibincangkan dalam pelajaran sebelumnya) dan kemudian dieksport daripada modul WASM.

Eksport ini menjadikannya boleh dipanggil terus daripada JavaScript.

/* add.c */
int add(int a, int b) {
    return a + b;
}

Mendapatkan Fail .wasm

Sebelum kita boleh mewujudkan modul WASM, kita perlu mendapatkan fail .wasm itu sendiri. API fetch() standard sangat sesuai untuk tugas ini.

Ia mengembalikan Promise yang diselesaikan kepada objek Response, yang kemudiannya kita hantar kepada instantiateStreaming().

async function fetchWasmModule() {
  const response = await fetch('add.wasm');
  // Check if the request was successful
  if (!response.ok) {
    throw new Error(`HTTP error! Status: ${response.status}`);
  }
  return response;
}

Mewujudkan Modul WASM

Fungsi WebAssembly.instantiateStreaming() menerima Response dan mengembalikan Promise. Promise ini diselesaikan kepada objek yang mengandungi dua sifat penting:

module: Modul WebAssembly yang telah dikompil itu sendiri.
instance: Objek yang mewakili tika modul yang sedang berjalan dan menyimpan eksportnya.

async function loadAndInstantiate() {
  const response = await fetch('add.wasm');
  const wasmObject = await WebAssembly.instantiateStreaming(response);
  console.log(wasmObject); // Shows { module: WebAssembly.Module, instance: WebAssembly.Instance }
  return wasmObject.instance;
}

Mengakses Fungsi yang Dieksport

Setelah mempunyai objek instance, Anda boleh mengakses mana-mana fungsi atau pemboleh ubah global yang telah dieksport daripada modul WASM Anda. Semua ini tersedia melalui sifat exportsnya.

Untuk fungsi C add kita, apabila dikompil kepada WASM dan dieksport, fungsi itu akan boleh diakses dalam JavaScript sebagai instance.exports.add.

Contoh Lengkap: Muatkan dan Panggil WASM

Berikut ialah coretan kod JavaScript yang lengkap. Kod ini mendapatkan add.wasm, mewujudkannya, kemudian memanggil fungsi add yang dieksport dengan dua nombor sambil merekodkan hasilnya.

Kod ini akan dijalankan di dalam teg <script> dalam fail HTML.

async function runWasmAdder() {
  try {
    const response = await fetch('add.wasm');
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const { instance } = await WebAssembly.instantiateStreaming(response);

    // Call the exported 'add' function
    const num1 = 15;
    const num2 = 25;
    const sum = instance.exports.add(num1, num2);

    console.log(`${num1} + ${num2} = ${sum}`);
    // Expected output: "15 + 25 = 40"

  } catch (error) {
    console.error("Error loading or running WASM:", error);
  }
}

runWasmAdder();

Di Dalam Objek Tika

Objek instance ialah antara muka utama anda dengan modul WebAssembly yang sedang berjalan. Ia mengandungi lebih daripada sekadar fungsi yang dieksport:

instance.exports: Objek yang mengandungi semua fungsi, pemboleh ubah global dan memori yang dieksport oleh modul WASM.
instance.module: Rujukan kepada objek WebAssembly.Module yang telah dikompil.
instance.memory: Jika modul WASM menggunakan memori, ini menyediakan akses kepada memori linearnya (sebuah ArrayBuffer).

Semakan Pantas: Pemuatan WASM

Anda telah melihat cara memuatkan dan memulakan modul WASM dengan cekap. Apakah fungsi JavaScript utama yang digunakan untuk tujuan ini apabila penstriman dilakukan daripada permintaan rangkaian?

Jawab dalam pelajaran interaktif

Imbas Kembali: WASM dalam Pelayar

Syabas! Anda telah berjaya mempelajari cara menghidupkan modul WebAssembly yang telah dikompil dalam pelayar. Inilah perkara yang telah kita pelajari:

Menggunakan objek global WebAssembly.
Memuatkan dengan cekap menggunakan WebAssembly.instantiateStreaming().
Mengakses fungsi yang dieksport melalui objek instance.exports.
Memanggil fungsi WASM terus daripada JavaScript.

Kini anda boleh melaksanakan kod berprestasi tinggi terus dalam aplikasi web anda!

Percuma untuk bermula

Pelajari WebAssembly (WASM) untuk Aplikasi Berprestasi Tinggi dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Memuatkan & Menjalankan WASM dalam JavaScript” percuma?

Ya — teks penuh “Memuatkan & Menjalankan WASM dalam JavaScript” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus WebAssembly (WASM) untuk Aplikasi Berprestasi Tinggi, tingkat taraf kepada CoddyKit PRO. Kursus WebAssembly (WASM) untuk Aplikasi Berprestasi Tinggi merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Memuatkan & Menjalankan WASM dalam JavaScript”?

Pelajari cara memuatkan modul WASM yang telah dikompil dalam pelayar web menggunakan JavaScript dan memanggil fungsi yang dieksport olehnya. Anda berlatih WebAssembly (WASM) untuk Aplikasi Berprestasi Tinggi menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan WebAssembly (WASM) untuk Aplikasi Berprestasi Tinggi?

Tiada pengalaman terdahulu diperlukan. Pembelajaran WebAssembly (WASM) untuk Aplikasi Berprestasi Tinggi di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Memuatkan & Menjalankan WASM dalam JavaScript” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran WebAssembly (WASM) untuk Aplikasi Berprestasi Tinggi ini?

Ya. Setiap pelajaran WebAssembly (WASM) untuk Aplikasi Berprestasi Tinggi menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Mengompil C/C++ kepada WASM dengan Emscripten
Memuatkan & Menjalankan WASM dalam JavaScript
Pertukaran Data Asas: Primitif
Memanggil Fungsi JavaScript daripada C/C++

← Kembali ke WebAssembly (WASM) untuk Aplikasi Berprestasi Tinggi