Содержание блога
Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git необходимо в данном случае только для клонирования репозитория emsdk.
Установка Emscripten SDK (emsdk)
Есть официальная пошаговая инструкция, которой мы будет следовать:
- Откройте терминал в корне диска С (или другого локального диска) - например, в поиске программ наберите CMD
- Скачайте инструменты:
| Bash | 1
2
| git clone https://github.com/emscripten-core/emsdk.git
cd emsdk |
|
- Установите и активируйте требуемую версию - 4.0.15:
| Bash | 1
2
| emsdk install 4.0.15
emsdk activate 4.0.15 |
|
- Примечание. Все библиотеки, которые вы используете в своих проектах нужно собирать с одной и той же версией emsdk. Нельзя перемешивать сборки библиотек с разными версиями emsdk
- Добавьте следующий путь в Path: C:\emsdk\upstream\emscripten
- Примечание. Если не знаете, что такое переменная окружения среды Path и как добавить в неё путь, то спросите у ИИ. Скопируйте для ИИ вопрос:
Что такое переменная окружения Path и как добавить в неё путь на Windows 10 (и 11)
|
Установка CMake
- Скачайте и установите CMake. Ищите cmake-x.x.x-windows-x86_64.msi в списке для установки
- Нажимайте кнопки Next -> Next -> Finish
- Откройте консоль (CMD) и проверьте запускается ли CMake:
Пишем "Hello World" на C для запуска в браузере
- Создайте пустую папку для проекта, например, с именем: hello-wasm-c
- Откройте эту папку каком-нибудь редакторе кода, например, в Nodepad++. Мне больше всего нравится Sublime Text 4: https://www.sublimetext.com/download
- В папке "hello-wasm-c" создайте папку "src", а в этой папке "src" создайте файл "main.c"
- Откройте файл "main.c" в редакторе кода и напишите код на С или скопируйте:
| C | 1
2
3
4
5
6
7
| #include <stdio.h>
int main()
{
printf("Привет из WebAssembly!\n");
return 0;
} |
|
- Создайте файл CMakeLists.txt в папке "hello-wasm-c":
| Code | 1
2
3
4
5
6
7
8
9
10
11
12
13
14
| cmake_minimum_required(VERSION 3.21)
project(hello-wasm-c)
# Задаем название будущего приложения (в Windows это был бы app.exe, а в вебе будет app.js / app.wasm)
add_executable(app)
# Устанавливаем стандарт C
set(CMAKE_C_STANDARD 11)
# Добавляем исполняемый файл
target_sources(app
PRIVATE
src/main.c
) |
|
- Откройте терминал в корне проекта и скопируйте в терминал команду для конфигурирования проекта:
| Bash | 1
| emcmake cmake -S . -B dist -DCMAKE_BUILD_TYPE=Debug |
|
- Наберите и выполните команду для компиляции:
- После команды выше в папке dist будут созданы два файла: app.js и app.wasm
- В папке "hello-wasm-c" создайте папку "public", а в этой папке "public" создайте файл "index.html"
- Откройте файл "index.html" в редакторе кода и скопируйте в него следующий код, который подключает файл "app.js":
| PHP/HTML | 1
2
3
4
5
6
7
8
9
10
11
12
13
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Wasm</title>
</head>
<body>
<script async src="./js/app.js"></script>
</body> |
|
- В папке "public" создайте папку "js"
- Скопируйте в папку "js" два файла: "app.js" и "app.wasm" (из папки "dist")
- Веб-приложение готово - оно находится в папке "public". Вы можете запустить это веб-приложение локально, с помощью локального сервера. Либо вы можете загрузить папку "public" на бесплатный хостинг: Vercel, Firebase, GitHub Pages и т.д.
Запуск веб-приложения на локальном хостинге с помощью Node.js и http-server
- Скачайте и установите Node.js: https://nodejs.org/en/download - это стандартный установщик: Next -> Next -> ... -> Finish
- Node.js содержит установщик пакетов под названием NPM
- Откройте терминал (CMD) и установите пакет http-server с помощью команду:
- Примечание. Ключ -g означает "глобально", то есть команда для запуска локального сервера будет доступна из терминала
- Откройте терминал в корне проекта и запустите локальный сервер командой:
- Примечание. Ключ -c-1 означает дать команду браузеру не кэшировать файлы, чтобы загружались только актуальные файлы в браузер
- Локальный сервер запущен. В консоль выводятся адреса, по которым можно посмотреть результат:
| Code | 1
2
3
4
5
| Available on:
http://100.116.245.193:8080
http://192.168.56.1:8080
http://127.0.0.1:8080
Hit CTRL-C to stop the server |
|
- Вы можете скопировать одни из адресов в браузер, либо можете набрать в адресной строке браузера: localhost:8080 и нажать Enter
- Примечание. Если у вас есть Wi-Fi на телефоне, то можете в нём адрес в браузере, например: 192.168.56.1:8080 Правда, в данном приложении вы не увидите вывод в мобильном браузере. Можете спросить у ИИ как выводить содержимое консоли мобильного в браузер на компьютере для отладки мобильных приложений в браузере
- Откройте отладочную консоль браузера, чтобы увидеть результат работы программы. В Chrome и Edge для открытия отладочной консоли нужно нажать Ctrl+Shift+J (в FireFox: Ctrl + Shift + K)
- В консоли вы увидите вывод:
- Попробуйте, что изменить в программе и перекомпилировать её. Например, добавьте в коде в выводе текста: "Урааааа!":
| C | 1
2
3
4
5
6
7
| #include <stdio.h>
int main()
{
printf("Привет из WebAssembly! Урааааа!\n");
return 0;
} |
|
- Лучше держать две консоли открытыми. В одной вы запустили локальный сервер и не трогаете эту консоль. А во второй консоли вы ввели один раз команду для сборки "cmake --build dist" и потом просто нажимаете стрелку вверх в консоли, чтобы выбрать предыдущую команду и нажимаете Enter
- Чтобы каждый раз не копировать вручную файлы app.js и app.wasm из папки "dist" в папку "public/js" скопируйте этот bash-скрипт (то есть батник) в корень проекта "hello-wasm-c" и назовите батник "build-web.bat":
build-web.bat
| Bash | 1
2
3
4
5
6
7
8
| cd dist
cmake --build .
cd ..
mkdir public\js
set current_dir=%~dp0
copy "%current_dir%dist\app.wasm" "%current_dir%public\js"
copy "%current_dir%dist\app.js" "%current_dir%public\js" |
|
- Как видно из кода выше. Сначала происходит вход в папку "dist" (cd dist). Потом сборка в текущей папке (cmake --build .). Далее выход из папки "dist" в корень проекта (cd ..). Создаётся папка "public/js", если она не была ещё создана (mkdir public\js). Потом создаётся переменная "current_dir", в которую сохраняется путь до текущей директории. А в конце два файла (app.js и app.wasm) копируются в папку "public/js" с помощью команд "copy"
- Теперь можно компилировать код одной командой:
- Переходите в браузер и обновляете страницу. Лучше всего обновлять (при открытой консоли браузера) правой кнопкой по кнопке "Reload" и выбрать "Empty Cache and Hard Reload", чтобы точно быть уверенным, что загрузятся актуальные файлы проекта в браузер
- Лучше всего ещё команду конфигурирования сохранить в батник с именем "config-web.bat" в корень проекта:
config-web.bat
| Code | 1
| emcmake cmake -S . -B dist -DCMAKE_BUILD_TYPE=Debug |
|
- Примечание. Команда выше конфигурирует проект Debug (для отладки) и в этом случае собирается быстро, но файл app.wasm весит больше (95.6 KB), а если вместо Debug написать Release, то будет весить меньше, но собираться будет дольше:
| Code | 1
| emcmake cmake -S . -B dist -DCMAKE_BUILD_TYPE=Release |
|
- Примечание. Это приложение настолько простое, что по весу разницы нет между Debug и Release ни в весе ни в скорости сборки
Загрузка веб-приложения на бесплатный хостинг Vercel
- Зарегистрируйтесь в Vercel: https://vercel.com/
- Установите Vercel глобально командой:
- В корне проекта создайте файл с именем "vercel.json" со следующим содержимым:
vercel.json
| JSON | 1
2
3
4
5
6
7
8
9
10
11
| {
"headers": [
{
"source": "/(.*)",
"headers": [
{ "key": "Cross-Origin-Embedder-Policy", "value": "require-corp" },
{ "key": "Cross-Origin-Opener-Policy", "value": "same-origin" }
]
}
]
} |
|
- Примечание. Этот файл нужен для загрузки файла app.wasm
- В консоли из корня проекта выполните команду для входа в Vercel:
- В консоли вы увидите сообщение: "Press [ENTER] to open the browser" ("Нажмите [ENTER], чтобы перейти в браузер")
- Нажмите Enter и вы будете перенаправлены в браузер, где нужно будет нажать кнопку "Allow" ("Позволяю")
- Наберите команду для первой отгрузки приложения на хостинг:
- Вас спросят: "Set up and deploy". Нажмите клавишу "y" и Enter, то есть "yes"
- Следующий вопрос: "Which scope should contain your project?" - нажмите Enter
- Вопрос: "Link to existing project?" - нажмите "n" и Enter
- Вопрос: "What’s your project’s name? (hello-wasm-c)" - нажмите Enter
- Вопрос: "In which directory is your code located?" - наберите public и нажмите Enter
- Вопрос: "Want to modify these settings?" - нажмите "n" и Enter
- Вопрос: "Do you want to change additional project settings?" - нажмите "n" и Enter
- Подождите несколько секунд пока содержимое папку "public" загружается на бесплатный хостинг Vercel
- Будет выведет адрес в консоль, по которому будет доступно приложение в браузере:
| Code | 1
| Aliased: https://hello-wasm-c.vercel.app |
|
- Теперь приложение можно попробовать открыть в браузере, но оно зависнет: https://hello-wasm-c.vercel.app
- Ответ Gemini:
Зависнет, потому что на Vercel как только произошел return 0, Emscripten по умолчанию считает, что работа окончена. Он "схлопывает" виртуальную файловую систему и закрывает потоки stdout. А при запуске на на локальном сервере весь JS-клей и WASM-бинарник прилетают в браузер мгновенно. printf успевает "выплюнуть" данные в консоль до того, как движок JavaScript решит, что модуль можно полностью выгрузить или остановить.
|
- Чтобы эту проблему решить нужно подключить заголовочный файл emscripten.h и функцию emscripten_set_main_loop(), которая просто запустит бесконечный цикл:
| C | 1
2
3
4
5
6
7
8
9
10
11
12
13
14
| #include <stdio.h>
#include <emscripten.h>
void loop()
{
// Пусто
}
int main()
{
printf("Привет из WebAssembly на Vercel!\n");
emscripten_set_main_loop(loop, 0, 1); // Это не даст программе закрыться
return 0;
} |
|
- Запускайте команды сборки и отгрузки на Vercel:
| Bash | 1
2
| build-web
vercel --prod |
|
- Примечание 1. На самом деле emscripten_set_main_loop - это обёртка над window.requestAnimationFrame в браузере
- Примечание 2. При использовании SDL3-callback функций не нужно будет явно писать функцию emscripten_set_main_loop. На SDL3 код один и и тот же код можно собирать для WASM, Desktop и Android
- Примечание 3. Если вы скомпилируете код выше в Debug, то вес составит примерно: app.js - 66 KB, app.wasm - 96 KB. А если скомпилируете в Release, то вес будет значительно меньше: app.js - 14 KB и app.wasm - 2 KB. Не забывайте набрать команду config-web.bat, когда вы поменяли Debug на Release или Release на Debug, а потом вводите команду build-web.bat Как только вы ввели по одному разу config-web и build-web, то вы можете переключаться между ними стрелками вверх и вниз в консоли
Ответ Gemini 3 на вопрос, что такое Emscripten и WebAssembly
WebAssembly (Wasm) — это технология (формат кода), которая позволяет запускать тяжелые приложения в браузере почти со скоростью обычных компьютерных программ. Emscripten — это главный инструмент (компилятор), который превращает ваш код на C++ или C в этот самый формат.
Вот подробный разбор того, как они работают и в чем разница.
1. WebAssembly (Wasm) — это "Мишень"
WebAssembly — это не язык программирования в привычном смысле, а низкоуровневый формат инструкций.
- Для чего нужен: Раньше браузеры понимали только JavaScript. JS гибкий, но медленный для тяжелых вычислений (игры, видеомонтаж). Wasm дает браузеру возможность выполнять бинарный код.
- Особенности: * Работает в песочнице (безопасно).
- Кроссплатформенный (работает везде, где есть браузер).
- Не заменяет JavaScript, а работает с ним в паре.
2. Emscripten — это "Инструмент"
Emscripten — это мощный набор инструментов (Toolchain) на базе LLVM. Представьте его как переводчика-профессионала.
- Что делает: Он берет исходный код, написанный на C, C++ или других языках, и переводит (компилирует) его в файл .wasm.
- Дополнительная магия: Emscripten не просто переводит код, он имитирует целую операционную систему для вашей программы внутри браузера. Он создает "мостики" для работы с файловой системой, графикой (через WebGL) и звуком.
Как они работают вместе
Процесс обычно выглядит так:
- Вы берете библиотеку на C++ (например, движок для обработки фото).
- Запускаете Emscripten.
- На выходе получаете файл .wasm (сама логика) и файл .js (клей, который помогает браузеру запустить этот Wasm).
- Ваш сайт теперь может обрабатывать фото в 10 раз быстрее, чем на чистом JS.
Интересный факт: Благодаря этой связке в браузере теперь работают такие гиганты, как Google Earth, Adobe Photoshop и т.д.
|
|
