WebAssembly - 使用 C 語言工作

WebAssembly與C的介紹

你好啊，未來的編程魔法師們！今天，我們將踏上一段令人興奮的旅程，進入WebAssembly和C語言的世界。作為你們鄰居的親切計算機科學老師，我將帶著第一次發現編程魔法的熱情來指導你們這次冒險。所以，請繫好安全帶，我們一起潛入水中！

WebAssembly - Working with C

什麼是WebAssembly？

WebAssembly，簡稱為Wasm，就像是一種秘密語言，讓你的網頁浏览器能夠運行超級快速的代碼。想象一下你的浏览器突然獲得了超能力——這就是WebAssembly的作用！它讓我們能夠用像C這樣的語言寫代碼，並在浏览器中以接近本地速度運行。

為什麼WebAssembly要與C一起使用？

現在，你可能會想，“為什麼要用C？這不是一種古老的語言嗎？” 喂，年輕的學徒們，C語言就像編程語言中的智慧長者。它已經存在了很長時間，而且有充分的理由！C語言快速、高效，並且有大量的現有代碼可以我們利用。通過將C與WebAssembly一起使用，我們將這股力量帶到了網絡上。

設置開發環境

在我們開始編程之前，我們需要設置我們的數字工作坊。別擔心；這比組裝宜家家具還要簡單！

安裝Emscripten

Emscripten是我們的神奇工具，它將C代碼轉換為WebAssembly。以下是如何獲取它的方法：

打開你的終端（別害怕，這只不過是一個基於文本的朋友）
執行以下命令：

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh

恭喜你！你剛剛設置了你的WebAssembly實驗室。

你的第一個WebAssembly程序

讓我們從一個簡單的“Hello, World!”程序開始。這就像一個嬰兒的第一個詞，但在代碼中！

編寫C代碼

創建一個名為hello.c的文件，並添加以下代碼：

#include <stdio.h>

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

這個小片段就是告訴計算機打印我們的問候語。這就像教一隻鸚鵡說“你好”，但酷多了！

編譯為WebAssembly

現在，讓我們將我們的C代碼轉換為WebAssembly。在終端中，運行以下命令：

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

這個命令就像揮動一根魔杖。它會創建三個文件：hello.html、hello.js和hello.wasm。

運行你的WebAssembly程序

在浏览器中打開hello.html文件。你應該會看到打印出“Hello, WebAssembly World!”。恭喜你！你剛剛運行了你的第一個WebAssembly程序！

使用函數

現在我們已經問候過了，讓我們來做一些實際的工作。我們將創建一個函數來添加兩個數字。

創建一個簡單的加法函數

創建一個名為math.c的新文件：

#include <emscripten.h>

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

EMSCRIPTEN_KEEPALIVE就像告訴編譯器，“喂，這個函數很重要！別把它優化掉！”

編譯這個函數

使用以下命令編譯：

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

這會創建math.js和math.wasm。

在JavaScript中使用這個函數

現在，讓我們在JavaScript中使用我們的C函數。創建一個index.html文件：

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly 數學</title>
</head>
<body>
<h1>WebAssembly 數學</h1>
<p>結果: <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>

在浏览器中打開這個文件，你會看到5 + 7的結果！

使用內存

現在，讓我們進一步了解並使用內存。這就像給你的WebAssembly超能力一個筆記本，它可以在上面寫下東西。

分配和使用內存

創建一個名為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);
}

使用以下命令編譯：

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

現在，讓我們在JavaScript中使用這些函數：

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly 內存管理</title>
</head>
<body>
<h1>WebAssembly 內存管理</h1>
<p>數組之和: <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>

這個示例展示了我們如何分配內存、填充數組、計算和，然後釋放內存——所有這些都是通過從JavaScript調用C函數來完成的！

結論

恭喜你，你已經開始踏上了使用C語言的WebAssembly世界的第一步！我們從設置環境到使用內存的基本知識都有所涉獵。記住，學習編程就像學習一種新語言——它需要練習和耐心。但是，你寫的每一行代碼都讓你在計算機語言中變得更加流利。

當我們結束時，這裡有一個總結我們學到的關鍵函數的表格：

函數	描述	示例
printf()	將文本打印到控制台	printf("Hello, World!");
malloc()	分配內存	int arr = (int)malloc(size * sizeof(int));
free()	釋放已分配的內存	free(arr);
EMSCRIPTEN_KEEPALIVE	防止函數被優化掉	EMSCRIPTEN_KEEPALIVE int add(int a, int b)

持續編程，持續學習，並記住——在編程世界中，唯一的限制是你的想象力！祝編程愉快，未來的科技超級明星！

Credits: Image by storyset