0Pricing
Learn Rust Coding · บทเรียน

Rust สู่ WebAssembly (WASM)

คอมไพล์โค้ด Rust เป็น WebAssembly ทำให้โมดูลประสิทธิภาพสูงทำงานในเว็บเบราว์เซอร์และรันไทม์ WASM อื่น ๆ ได้

Rust สู่ WebAssembly (WASM) เป็นบทเรียน Learn Rust Coding ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Learn Rust Coding และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Learn Rust Coding มีบทเรียนทั้งหมด 3 บทเรียน

WebAssembly (WASM) คืออะไร

WebAssembly หรือ WASM คือรูปแบบคำสั่งไบนารีสำหรับเครื่องเสมือนที่ทำงานแบบสแตก โดยออกแบบให้เป็นเป้าหมายการคอมไพล์แบบพกพาสำหรับภาษาระดับสูง เช่น Rust, C/C++ และ Go

ลองนึกภาพว่าเป็นภาษาระดับต่ำที่คล้ายภาษาแอสเซมบลี ซึ่งทำงานได้อย่างมีประสิทธิภาพในเว็บเบราว์เซอร์และสภาพแวดล้อมอื่น ๆ ช่วยให้คุณเรียกใช้โค้ดที่ต้องการประสิทธิภาพสูงด้วยความเร็วใกล้เคียงโค้ดเนทีฟ

ข้อได้เปรียบของ Rust สำหรับ WASM

Rust เป็นตัวเลือกที่ยอดเยี่ยมสำหรับการพัฒนา WebAssembly เนื่องจากมีจุดแข็งเฉพาะตัวดังนี้:

  • ประสิทธิภาพ: Rust มีชื่อเสียงด้านความเร็ว ซึ่งใกล้เคียงกับ C/C++
  • ความปลอดภัยของหน่วยความจำ: ระบบการเป็นเจ้าของของ Rust ป้องกันข้อผิดพลาดที่พบบ่อยได้โดยไม่ต้องใช้ตัวเก็บขยะ
  • ไบนารีขนาดเล็ก: รันไทม์ที่มีขนาดเล็กของ Rust ทำให้โมดูล WASM มีขนาดกะทัดรัด
  • เครื่องมือ: รองรับเป็นอย่างดีด้วยเครื่องมืออย่าง wasm-pack และ wasm-bindgen

การตั้งค่าเครื่องมือ WASM

หากต้องการคอมไพล์ Rust เป็น WebAssembly โดยหลักแล้วคุณจะใช้ wasm-pack ซึ่งเป็นเครื่องมือบรรทัดคำสั่งที่จัดการกระบวนการสร้างทั้งหมด

คุณจะใช้ wasm-bindgen ด้วย ซึ่งเป็นครейт Rust และเครื่องมือ CLI ที่ช่วยอำนวยความสะดวกในการโต้ตอบระดับสูงระหว่างโมดูล WASM กับ JavaScript

หากต้องการติดตั้ง wasm-pack ให้เปิดเทอร์มินัลแล้วเรียกใช้:

cargo install wasm-pack

โปรเจกต์ WASM แรกของคุณ

มาสร้างโปรเจกต์ Rust ใหม่ที่ปรับให้เหมาะกับ WebAssembly กัน เราจะใช้ cargo generate พร้อมแม่แบบเฉพาะ:

cargo install cargo-generate
cargo generate --git https://github.com/rustwasm/wasm-pack-template

ทำตามคำแนะนำเพื่อกำหนดชื่อโปรเจกต์ การดำเนินการนี้จะตั้งค่าไฟล์ lib.rs ที่พร้อมสำหรับโค้ด WASM และไดเรกทอรี www สำหรับอินเทอร์เฟซเว็บอย่างง่าย

ฟังก์ชัน Rust สำหรับ JavaScript

หากต้องการทำให้ฟังก์ชัน Rust ถูกเรียกใช้จาก JavaScript ได้ เราจะใช้แอตทริบิวต์ #[wasm_bindgen] จากครейт wasm-bindgen

แอตทริบิวต์นี้สั่งให้ wasm-bindgen สร้างโค้ดเชื่อมต่อที่จำเป็น เพื่อให้ JavaScript โต้ตอบกับฟังก์ชัน Rust ของคุณได้

use wasm_bindgen::prelude::*;

// This attribute makes the `greet` function available to JavaScript.
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

// In a WASM library, `main` is not used. This code is compiled to a .wasm module.

ผสาน WASM เข้ากับ JavaScript

หลังจากเขียนโค้ด Rust แล้ว คุณจะสร้างโค้ดเป็นโมดูล WASM ด้วย wasm-pack build คำสั่งนี้จะสร้างไดเรกทอรี pkg ที่มีไฟล์ .wasm และโค้ดเชื่อมต่อ JS

จากนั้น ใน JavaScript คุณสามารถนำเข้าฟังก์ชัน Rust ที่ส่งออกมาและใช้งานได้อย่างง่ายดาย:

// www/index.js (simplified)
import { greet } from "../pkg/your_project_name"; // Adjust path

// Call the Rust function
const message = greet("CoddyKit Learner");
console.log(message); // Outputs: "Hello, CoddyKit Learner!"

// You'd typically connect this to HTML elements.

Rust เรียกใช้ JavaScript

Rust สามารถเรียกใช้ฟังก์ชัน JavaScript ได้เช่นกัน คุณประกาศฟังก์ชันเหล่านั้นในบล็อก extern "C" และใช้ #[wasm_bindgen] เพื่อจับคู่ฟังก์ชันกับออบเจ็กต์หรือฟังก์ชันส่วนกลางของ JS

อาร์กิวเมนต์ js_namespace ช่วยให้คุณระบุได้ว่าจะค้นหาฟังก์ชันในส่วนใดของสภาพแวดล้อม JavaScript เช่น ออบเจ็กต์ console

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern "C" {
    // Import JS console.log as a Rust function named 'log'
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);

    // You can import other JS functions too
    #[wasm_bindgen(js_name = alert)]
    fn js_alert(s: &str);
}

#[wasm_bindgen]
pub fn log_and_alert_from_rust(message: &str) {
    log(&format!("Rust log: {}", message));
    js_alert(&format!("Rust alert: {}", message));
}

การส่งสตริงระหว่าง Rust และ JS

wasm-bindgen จัดการชนิดข้อมูลทั่วไปอย่างตัวเลขและค่าบูลีนได้อย่างชาญฉลาด สำหรับสตริง จะใช้การเข้ารหัส UTF-8

เมื่อคุณส่ง &str หรือ String จาก Rust wasm-bindgen จะแปลงเป็น String ของ JavaScript และแปลงกลับในทิศทางตรงกันข้ามได้ การแยกซ่อนรายละเอียดนี้ทำให้การทำงานร่วมกันเป็นไปอย่างราบรื่น

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn uppercase_and_reverse(s: String) -> String {
    s.to_uppercase().chars().rev().collect()
}

// This function takes a String, processes it, and returns a new String.
// wasm-bindgen handles the conversion to/from JS strings.

WASM นอกเบราว์เซอร์

แม้มักเชื่อมโยงกับเว็บเบราว์เซอร์ แต่ WebAssembly ไม่ได้จำกัดอยู่เพียงเท่านั้น รันไทม์ WASM มีอยู่ในสภาพแวดล้อมมากมาย จึงเปิดโอกาสใหม่ ๆ ดังนี้:

  • ฟังก์ชันแบบไร้เซิร์ฟเวอร์: นำฟังก์ชันที่ทำงานรวดเร็วและแยกเป็นอิสระไปใช้งาน
  • บล็อกเชน: การดำเนินการของสัญญาอัจฉริยะ
  • ปลั๊กอิน/ส่วนขยาย: เพิ่มความสามารถให้แอปพลิเคชันอย่างปลอดภัย
  • แอปเดสก์ท็อป: ฝังโมดูลประสิทธิภาพสูง

สิ่งนี้ขยายขอบเขตการใช้งาน Rust ให้กว้างไกลเกินกว่าการเขียนโปรแกรมระบบแบบดั้งเดิม

แนวคิดสำคัญของ WebAssembly

มาทดสอบความเข้าใจของคุณเกี่ยวกับ Rust และ WebAssembly กัน

ทบทวน: จาก Rust สู่ WASM

คุณได้เรียนรู้วิธีนำประสิทธิภาพและความปลอดภัยของ Rust มาสู่ WebAssembly แล้ว

  • WASM มอบรันไทม์ที่รวดเร็วและพกพาได้สำหรับโค้ดที่คอมไพล์แล้ว
  • Rust เหมาะอย่างยิ่งกับ WASM ด้วยประสิทธิภาพ ไบนารีขนาดเล็ก และความปลอดภัย
  • เครื่องมืออย่าง wasm-pack และ wasm-bindgen ช่วยให้กระบวนการพัฒนาง่ายขึ้น
  • คุณสามารถส่งออกฟังก์ชัน Rust ไปยัง JavaScript และนำเข้าฟังก์ชัน JavaScript มาใช้ใน Rust ได้อย่างง่ายดาย
  • การประยุกต์ใช้ WASM ขยายไปไกลกว่าเว็บเบราว์เซอร์เพียงอย่างเดียว

เรียนรู้ต่อไปเพื่อสร้างแอปพลิเคชันเว็บและแอปพลิเคชันประเภทอื่นที่ทรงพลังและมีประสิทธิภาพสูงด้วย Rust

คำถามที่พบบ่อย

บทเรียน “Rust สู่ WebAssembly (WASM)” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “Rust สู่ WebAssembly (WASM)” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Learn Rust Coding ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Learn Rust Coding มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “Rust สู่ WebAssembly (WASM)”

คอมไพล์โค้ด Rust เป็น WebAssembly ทำให้โมดูลประสิทธิภาพสูงทำงานในเว็บเบราว์เซอร์และรันไทม์ WASM อื่น ๆ ได้ คุณปฏิบัติ Learn Rust Coding ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Learn Rust Coding หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Learn Rust Coding บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน

บทเรียน “Rust สู่ WebAssembly (WASM)” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Learn Rust Coding นี้ได้ไหม

ได้ บทเรียน Learn Rust Coding ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. อินเทอร์เฟซฟังก์ชันภายนอก (FFI)
  2. Rust สู่ WebAssembly (WASM)
  3. การวัดประสิทธิภาพและการปรับแต่งประสิทธิภาพ
← กลับไปที่ Learn Rust Coding