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>

这个示例展示了我们如何分配内存、填充数组、计算和，然后释放内存——都是通过调用 C 函数实现的！

结论

恭喜你，你已经迈出了进入 WebAssembly 和 C 语言世界的第一步！我们已经介绍了基础知识，从设置环境到使用内存。记住，学习编程就像学习新语言一样——需要练习和耐心。但是，你写的每一行代码都让你在计算机语言上更加流利。

在我们结束之前，这里有一个表格总结了我们学到的关键函数：

函数	描述	示例
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