WebAssembly - Работа с C

Введение в WebAssembly и C

Здравствуйте, будущие кодировщики! Сегодня мы отправляемся в увлекательное путешествие в мир WebAssembly и C. Как ваш добрый сосед по компьютерным наукам, я здесь, чтобы провести вас через это приключение с тем же энтузиазмом, который я испытал, когда впервые发现了 магию программирования. Так что пристегнитесь и погружайтесь с нами!

WebAssembly - Working with C

Что такое WebAssembly?

WebAssembly, или Wasm для краткости, resembles a secret language that allows your web browser to run super-fast code. Imagine if your browser suddenly got superpowers - that's what WebAssembly does! It lets us write code in languages like C and run it in the browser at near-native speed.

Почему C с WebAssembly?

Теперь вы можете задаться вопросом: "Почему C? Разве это не старый язык?" Ну, мои молодые padawans, C resembles the wise grandparent of programming languages. It's been around for ages, and for good reason! C is fast, efficient, and has a ton of existing code that we can tap into. By using C with WebAssembly, we're bringing this powerhouse to the web.

Настройка окружения

Before we start coding, we need to set up our digital workshop. Don't worry; it's easier than assembling IKEA furniture!

Установка Emscripten

Emscripten resembles our magical tool that will transform C code into WebAssembly. Here's how to get it:

Open your terminal (don't be scared, it's just a text-based friend)
Run the following commands:

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

Congratulations! You've just set up your WebAssembly laboratory.

Ваш первый WebAssembly program

Let's start with a simple "Hello, World!" program. It's like the first words of a baby, but in code!

Написание C кода

Создайте файл с именем hello.c и добавьте этот код:

#include <stdio.h>

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

Этот небольшой фрагмент instructs the computer to print our greeting. It's like teaching a parrot to say "Hello" but much cooler!

Компиляция в WebAssembly

Теперь lets turn our C code into WebAssembly. In your terminal, run:

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

This command is like waving a magic wand. It creates three files: hello.html, hello.js, and hello.wasm.

Запуск вашего WebAssembly program

Откройте файл hello.html в вашем браузере. Вы должны увидеть "Hello, WebAssembly World!" напечатанным. Поздравляю! Вы только что запустили свой первый WebAssembly program!

Работа с функциями

Теперь, когда мы сказали "Привет", lets do some actual work. We'll create a function to add two numbers.

Создание простой функции сложения

Создайте новый файл под названием math.c:

#include <emscripten.h>

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

The EMSCRIPTEN_KEEPALIVE resembling telling the compiler, "Hey, this function is important! Keep it around!"

Компиляция функции

Скомпилируйте его с помощью:

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

Это создает math.js и math.wasm.

Использование функции в JavaScript

Теперь lets use our C function in JavaScript. Создайте файл index.html:

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly Math</title>
</head>
<body>
<h1>WebAssembly Math</h1>
<p>Result: <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!

Работа с памятью

Теперь lets get a bit more advanced and work with memory. This is like giving your WebAssembly superpowers access to a notebook where it can write things down.

Выделение и использование памяти

Создайте файл под названием 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

Теперь lets use these functions in JavaScript:

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly Memory</title>
</head>
<body>
<h1>WebAssembly Memory Management</h1>
<p>Sum of array: <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-функций из JavaScript!

Заключение

Поздравляю, вы сделали свои первые шаги в мир WebAssembly с C! Мы рассмотрели основы, от настройки окружения до работы с памятью. Помните, что обучение программированию resembles обучение новому языку - это требует практики и терпения. Но с каждой строкой кода, которую вы пишете, вы становитесь все более fluent в языке компьютеров.

Заканчивая, вот таблица, резюмирующая ключевые функции, которые мы изучили:

Функция	Описание	Пример
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)

Продолжайте программировать, продолжайте учиться, и помните - в мире программирования единственным ограничением resembles ваше воображение! Счастливого кодирования, будущие супергерои техники!

Credits: Image by storyset

Предыдущий учебник:

WebAssembly - Безопасность

Следующий учебник:

WebAssembly - Работа с C++