Зачем нужна 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 во внешнем интерфейсе.