Первая программа

Установка инструментария

Для генерации файлов wasm потребуется специальный инструментарий. Для этого можно использовать различные средства. В данном же случае мы будем использовать наиболее распространенный и популярный инструмент - Emscripten SDK (EMSDK).

Загузим с официального репозитория https://github.com/juj/emsdk архив с файлами.

Распакуем загруженный архив, например, в корне диска С. Например, в моем случае загруженный архив распакован в папку C:\emsdk-master.

В командной строке/терминале перейдем к папке распакованного архива и последовательно введем следующие команды

emsdk update
emsdk install latest
emsdk activate latest

Последняя командна emsdk activate latest активирует среду Emscripten. И ее надо вызывать каждый раз, когда мы заново открываем консоль и собираемся компилировать модуль wasm.

Компиляторы и параметры компиляции

Ключевыми утилитами в emsdk являются emcc - компилирует программу на C в wasm и em++ - компилирует программу на C++ в wasm. И в зависимости от применяего языка программирования выбирается один из этих компиляторов. Эти утилиты фактически представляют скрипты на языке python, которые вызывают компиляторы Clang из пакета emsdk.

Фактически компиляция производится с помощью команды в командной строке/консоли:

emcc/em++ <флаги> файлы_с_исходным_кодом

При компиляции комплятору можно передать различные флаги:

• -o путь_к_выходному_файлу: указывает путь к файлу, который надо сгенерировать, обычно это либо файл wasm, либо js-файл, коорый загружает скомпилированный модуль wasm, либо html-страница, на которой загружается модул wasm

• -g: генерирует отладочную информацию

• -s option=value: устанавливает настройки компиляции. Например, некоторые параметры компиляции:

  • -s WASM=1: эта опция указывает компилятору сгенерировать файл WebAssembly

  • -s ONLY_MY_CODE=1: указывает компилятору не включать код из стандартной библиотеки C/C++ в компилируемый модуль wasm - он будет включать только неспоредственно тот код, который мы сами пишем

  • -s EXPORTED_FUNCTIONS='[...]': определяет набор функций, который должны быть экспортированы из wasm

  • -s SIDE_MODULE=1: эта опция указывает компилятору, что надо создать только модуль wasm

• -O[уровень_оптимизации]: указывает, какой уровень оптимизации следует использовать при компиляции. Зачастую используется третий высший уровень, то есть -O3

Создание первой программы

Напишем простейшую программку с использованием Wasm. Создадим для файлов какой-нибудь каталог, например, C://wasm, и определим в нем новый файл hello.c со следующим кодом на языке C:

#include <stdio.h>
int main(void)
{
    printf("Hello WebAssembly! \n");
    return 0;
}

Этот код просто выводит на консоль строку.

Теперь скомпилируем его. Прежде всего перейдем в командной строке/терминале к папке с файлом hello.c.

Для компиляции файлов выполним в командной строке/терминале следующую команду

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

Здесь компилятору emcc передается ряд параметров:

• hello.c указывает на компилируемый файл

• -s WASM=1 указывает, что мы хотим скомпилировать файл с кодом wasm

• -o hello.html указывает, что мы хотим сгенерировать веб-страницу hello.html, на которой будет загружаться модуль wasm

После компиляции в папке с исходным кодом появятся еще три файла: hello.wasm - сам модуль wasm, hello.html - веб-страница и hello.js - код js для загрузке модуля wasm на веб-страницу.

Имея скомпилированные файлы, мы можем их запустить в браузере. Однако следует учитывать, что если в одних браузерах нам достаточно просто кинуть страницу в веб-браузер (MS Edge, Mzilla Firefox), то в других браузерах (Google Chrome, Opera) для работы с модулями wasm необходимо размещать страницу и все связанные файлы на веб-сервере и затем обращаться к странице по протоколу http. Поэтому при работе с wasm я советую выбрать любой предпочтительный веб-сервер - Apache, NodeJS, IIS и т.д. и размещать все файлы на веб-сервере. Либо написать какое-нибудь веб-приложение с помощью одной из технологий серверного уровня - ASP.NET, JavaEE, Nodejs, PHP и т.д. и рамках этого приложения размещать файлы WebAssembly. Однако в данном случае мы можем упростить себе работу. Emscripten имеет такую утилиту как emrun, которая позволяет выполнить веб-страницу на небольшом встроенном веб-севере.

Итак, запустим сгенерированные файлы с помощью следующей команды:

emrun hello.html

Также дополнительно с помощью параметра --browser можно указать браузер, который будет запускаться

emrun --browser chrome hello.html

Откроется браузер, где мы сможем увидеть в консоли строку "Hello WebAssembly"

Следует отметить, что Emscripten создает довольно своеобразную страницу. Но естественно мы ее можем изменить, например, остаить только подключение js кода, который загружает модуль wasm.