Зачем нужна WebAssembly?

Сегодня веб-приложения и мобильные приложения являются основными средствами предоставления программных решений пользователям по всему миру. Приложения, которые сегодня были только в настольных приложениях, доступны для браузеров, таких как графические, фото и видео редакторы; музыкальные и видеоплееры; и так далее.

Чтобы использовать сложный инструмент в веб-браузере, иногда необходимо использовать определенный язык, а не JavaScript. Мы должны использовать язык, который обеспечивает простой способ создания приложений такого типа. Например, если вы хотите выполнять многие операции параллельно, Go позволяет разработчику использовать параллелизм через горутины и каналы. .

В этой статье мы узнаем, как создать проект с GoLang в браузере с помощью WebAssembly.

Начиная

Шаг 1. Создайте наш файл Go

Сначала мы создадим образец файла Go для компиляции в Wasm (двоичный код WebAssembly). В этом случае мы напечатаем в консоли «Hello, WebAssembly». После этих начальных шагов мы добавим в этот файл больше содержимого, чтобы сделать его более полезным примером.

Шаг 2. Создайте загрузчик JavaScript Wasm

Чтобы запустить двоичный код в браузере, мы должны сгенерировать файл wasm_exec.js. Это файл JavaScript, предоставляемый Go для загрузки файла .wasm на веб-страницу.

Файл загрузчика доступен в стандартной установке Go. Просто скопируйте его в папку проекта с помощью следующей команды:

$ cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" .

Шаг 3. Скомпилируйте файл Main.go

Чтобы скомпилировать наш main.go файл для Интернета, мы установим две переменные среды: GOOS и GOARCH. Мы установим дляGOOS, что означает операционная система Go, значение js. Мы установим GOARCH, что означает Архитектура Go, на wasm. Затем мы можем скомпилировать наш файл с помощью команды Go build:

$ GOOS=js GOARCH=wasm go build -o main.wasm

Шаг 4. Создайте HTML-файл

Теперь, когда у нас есть загрузчик Wasm и файл .wasm, мы можем создать наш первый файл HTML, импортировав эти файлы.

Сначала мы импортируем файл wasm_exec.js в заголовок. Затем внутри тега скрипта (или в файле .js) мы извлекаем файл Wasm и запускаем его:

Шаг 5: запустить

Запустим наш код. Для этого мы запустим простой HTTP-сервер. Мы можем сделать это разными способами. Мы можем использовать Python SimpleHTTPServer, пакет узлов http-server или goexec:

$ goexec 'http.ListenAndServe(`:8080`,http.FileServer(http.Dir(`.`)))'

Эта команда запустит HTTP-сервер на порту 8080. Вы можете ввести URL-адрес http: // localhost: 8080 в своем браузере и открыть инструменты разработчика, чтобы увидеть вывод Hello, WebAssembly в консоли.

Открытие функций Go

В этом примере мы создадим код Go для поиска общих цветов в изображении.

Первое, что нам нужно сделать, это предоставить функцию Go, которая получит изображение и вернет один массив со всеми общими цветами изображения. Для этого нам нужно импортировать пакет JS syscall / js. Этот пакет предоставляет доступ к среде хоста WebAssembly. Затем мы установим функцию Go findCommonColors в глобальный контекст JavaScript. После этого вы можете вызвать функцию в JavaScript.

Функция Go findCommonColors будет вызываться со значением ключевого слова this в JavaScript и аргументами вызова.

Вызов функции Go

После того, как вы установили функцию Go в глобальном контексте JavaScript, мы можем вызвать функцию с помощью JavaScript. Вы можете получить доступ к функции через объект окна после того, как мы создадим экземпляр кода Go, который мы только что создали:

Реализация примера общих цветов

Чтобы продемонстрировать реальное веб-приложение, мы реализуем функцию Go, которая будет обрабатывать файл изображения, полученный из JavaScript, и возвращать его доминирующие цвета. Мы будем использовать внешний пакет для получения результата.

Пакет под названием visiblecolor использует алгоритм Kmeans ++ для решения этой проблемы. По умолчанию он вернет нам три самых популярных цвета. Мы можем установить этот пакет, используя следующую команду:

$ go get github.com/EdlinOrg/prominentcolor

Сначала мы преобразуем изображение из аргумента в Go Image. Мы используем CopyBytesToGo для копирования байтов из массива байтов JS в Go. Затем мы декодируем читателя в Go Image.

С изображением мы можем использовать пакет visiblecolor, чтобы получить доминирующие цвета в изображении и создать массив пустого интерфейса, включая шестнадцатеричный цветовой код.

И, наконец, мы модифицируем findCommonColors, чтобы возвращать массив цветов, используя js.ValueOf, который преобразует массив пустого интерфейса в массив JavaScript.

И это весь наш код Go:

В HTML мы отобразим изображение, выбранное в поле входного файла, и вызовем findCommonColors, используя то же изображение, и покажем общие цвета изображения.

Вы можете получить полный код здесь.

Заключение

Сегодня WebAssembly поддерживается всеми основными браузерами в настольных и мобильных средах. В настоящее время его поддерживают 93,17% всех пользователей во всем мире. И сегодня у нас есть несколько запасных стратегий для поддержки других пользователей.

В следующей статье я покажу вам лучшие практики, инструменты и резервные варианты для создания законченного проекта с Go, WebAssembly и Webpack во внешнем интерфейсе.