Tiếng Việt

Hướng dẫn WebAssembly

WebAssembly - Làm việc với ngôn ngữ C

Giới thiệu về WebAssembly và C

Xin chào các nhà mã hóa tương lai! Hôm nay, chúng ta sẽ bắt đầu một chuyến hành trình thú vị vào thế giới của WebAssembly và C. Như một người dạy khoa học máy tính gần gũi, tôi ở đây để hướng dẫn các bạn qua chuyến phiêu lưu này với niềm的热情 tôi đã có khi lần đầu tiên khám phá phép màu của lập trình. Hãy chuẩn bị và cùng nhau nhảy vào!

WebAssembly - Working with C

WebAssembly là gì?

WebAssembly, hoặc简称 Wasm, giống như một ngôn ngữ bí mật cho phép trình duyệt web của bạn chạy mã siêu nhanh. Hãy tưởng tượng nếu trình duyệt của bạn đột nhiên có siêu năng lực - đó là điều WebAssembly làm! Nó cho phép chúng ta viết mã trong các ngôn ngữ như C và chạy nó trong trình duyệt với tốc độ gần như-native.

Tại sao sử dụng C với WebAssembly?

Bạn có thể tự hỏi, "Tại sao lại là C? Đó không phải là ngôn ngữ cũ sao?" Well, các bạn trẻ, C giống như ông nội thông thái của các ngôn ngữ lập trình. Nó đã có từ lâu và có lý do chính đáng! C nhanh chóng, hiệu quả và có rất nhiều mã hiện có mà chúng ta có thể tận dụng. Bằng cách sử dụng C với WebAssembly, chúng ta đang mang lại sức mạnh này cho web.

Thiết lập môi trường

Trước khi bắt đầu lập trình, chúng ta cần thiết lập xưởng kỹ thuật số của mình. Đừng lo lắng; nó dễ dàng hơn việc ráp ghép đồ nội thất IKEA!

Cài đặt Emscripten

Emscripten là công cụ ma thuật của chúng ta để chuyển đổi mã C thành WebAssembly. Dưới đây là cách để nhận nó:

  1. Mở terminal (đừng sợ, nó chỉ là một bạn text-based)
  2. Chạy các lệnh sau:
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh

Chúc mừng! Bạn vừa thiết lập xong phòng thí nghiệm WebAssembly của mình.

Chương trình WebAssembly đầu tiên

Hãy bắt đầu với một chương trình "Hello, World!" đơn giản. Nó giống như những từ đầu tiên của một đứa trẻ, nhưng trong mã!

Viết mã C

Tạo một tệp名叫 hello.c và thêm mã sau:

#include <stdio.h>

int main() {
printf("Hello, WebAssembly World!\n");
return 0;
}

Mã nhỏ này đang nói với máy tính để in ra lời chào. Nó giống như dạy một con vẹt nói "Hello" nhưng thú vị hơn!

Biên dịch thành WebAssembly

Bây giờ, hãy chuyển mã C của chúng ta thành WebAssembly. Trong terminal, chạy:

emcc hello.c -s WASM=1 -o hello.html

Lệnh này giống như挥动魔杖. Nó tạo ra ba tệp: hello.html, hello.js, và hello.wasm.

Chạy chương trình WebAssembly

Mở tệp hello.html trong trình duyệt của bạn. Bạn nên thấy "Hello, WebAssembly World!" được in ra. Chúc mừng! Bạn vừa chạy chương trình WebAssembly đầu tiên của mình!

Làm việc với hàm

Bây giờ chúng ta đã chào hỏi, hãy làm một chút công việc thực tế. Chúng ta sẽ tạo một hàm để cộng hai số.

Tạo hàm cộng đơn giản

Tạo một tệp mới gọi là math.c:

#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
int add(int a, int b) {
return a + b;
}

EMSCRIPTEN_KEEPALIVE giống như nói với bộ 编译器, "Hey, hàm này quan trọng! Giữ nó lại!"

Biên dịch hàm

Biên dịch nó với:

emcc math.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -o math.js

Điều này tạo ra math.js và math.wasm.

Sử dụng hàm trong JavaScript

Bây giờ, hãy sử dụng hàm C của chúng ta trong JavaScript. Tạo một tệp index.html:

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly Math</title>
</head>
<body>
<h1>WebAssembly Math</h1>
<p>Kết quả: <span id="result"></span></p>
<script src="math.js"></script>
<script>
Module.onRuntimeInitialized = function() {
var result = Module._add(5, 7);
document.getElementById('result').textContent = result;
};
</script>
</body>
</html>

Mở này trong trình duyệt, và bạn sẽ thấy kết quả của 5 + 7!

Làm việc với bộ nhớ

Bây giờ, hãy nâng cao hơn một chút và làm việc với bộ nhớ. Điều này giống như cho siêu năng lực WebAssembly của bạn quyền truy cập vào một sổ tay để nó có thể viết xuống.

Phân bổ và sử dụng bộ nhớ

Tạo một tệp名叫 memory.c:

#include <emscripten.h>
#include <stdlib.h>

EMSCRIPTEN_KEEPALIVE
int* create_array(int size) {
return (int*)malloc(size * sizeof(int));
}

EMSCRIPTEN_KEEPALIVE
void fill_array(int* arr, int size) {
for (int i = 0; i < size; i++) {
arr[i] = i * 2;
}
}

EMSCRIPTEN_KEEPALIVE
int sum_array(int* arr, int size) {
int sum = 0;
for (int i = 0; i < size; i++) {
sum += arr[i];
}
return sum;
}

EMSCRIPTEN_KEEPALIVE
void free_array(int* arr) {
free(arr);
}

Biên dịch nó với:

emcc memory.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_create_array", "_fill_array", "_sum_array", "_free_array"]' -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' -o memory.js

Bây giờ, hãy sử dụng các hàm này trong JavaScript:

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly Memory</title>
</head>
<body>
<h1>Quản lý bộ nhớ WebAssembly</h1>
<p>Tổng của mảng: <span id="result"></span></p>
<script src="memory.js"></script>
<script>
Module.onRuntimeInitialized = function() {
const create_array = Module.cwrap('create_array', 'number', ['number']);
const fill_array = Module.cwrap('fill_array', null, ['number', 'number']);
const sum_array = Module.cwrap('sum_array', 'number', ['number', 'number']);
const free_array = Module.cwrap('free_array', null, ['number']);

const size = 10;
const ptr = create_array(size);
fill_array(ptr, size);
const sum = sum_array(ptr, size);
free_array(ptr);

document.getElementById('result').textContent = sum;
};
</script>
</body>
</html>

Ví dụ này cho thấy làm thế nào chúng ta có thể phân bổ bộ nhớ, điền vào mảng, tính tổng và sau đó giải phóng bộ nhớ - tất cả đều sử dụng các hàm C được gọi từ JavaScript!

Kết luận

Chúc mừng, bạn đã bước những bước đầu tiên vào thế giới của WebAssembly với C! Chúng ta đã bao gồm các khái niệm cơ bản, từ việc thiết lập môi trường đến làm việc với bộ nhớ. Nhớ rằng, học lập trình giống như học một ngôn ngữ mới - nó đòi hỏi sự luyện tập và kiên nhẫn. Nhưng với mỗi dòng mã bạn viết, bạn đang trở nên thành thạo hơn trong ngôn ngữ của máy tính.

Khi kết thúc, đây là bảng tóm tắt các hàm chính chúng ta đã học:

Hàm Mô tả Ví dụ
printf() In text ra console printf("Hello, World!");
malloc() Phân bổ bộ nhớ int arr = (int)malloc(size * sizeof(int));
free() Giải phóng bộ nhớ đã phân bổ free(arr);
EMSCRIPTEN_KEEPALIVE Ngăn chặn hàm bị tối ưu hóa EMSCRIPTEN_KEEPALIVE int add(int a, int b)

Tiếp tục mã hóa, tiếp tục học hỏi, và nhớ rằng - trong thế giới lập trình, giới hạn duy nhất là trí tưởng tượng của bạn! Chúc các bạn mã hóa vui vẻ, những siêu sao công nghệ tương lai!

Credits: Image by storyset

Hướng Dẫn Trước:
WebAssembly - Bảo mật
Hướng Dẫn Tiếp Theo:
WebAssembly - Làm việc với C++