Как снять с WebAssembly для Go в React

1656524179 kak snyat s webassembly dlya go v react

от Криса Чака

1*0nvsQXICkyKVMAq4hbYRPg

С Go версии 1.11 мы получаем экспериментальную версию WebAssembly. Если вы не знаете, что такое WebAssembly, не беспокойтесь. Короче говоря, WebAssembly стремится внести в браузер высокопроизводительный код, похожий на сборку. Это позволяет разработчикам ставить в браузер задачи с большим количеством вычислений, будь то для игры или создания суперкрутых анимаций.

Поэтому я собираюсь показать вам, как добавить WebAssembly на основе Go к программе React! Это руководство предполагает, что вы немного знакомы с Webpack, Babel и React. Если вы новичок в этих технологиях, я настоятельно рекомендую вам ознакомиться с этим руководством.

Учебник покажет вам, как создать базовую программу React, использующую WebAssembly for Go. В ближайшее время я покажу вам, как создать игру в крестики-нолики, в которой компьютер на 100% непревзойден, и мы будем использовать WebAssembly для обеспечения работы минимаксного алгоритма (не беспокойтесь, это звучит сложнее, чем он есть!) ?

Код для этой части (и будущих частей) будет здесь на Github.

Предпосылки и начальная настройка

Убедитесь, что у вас установлен Go 1.11 (минимум) и Node.js.

Я использую Chrome версии 69 и все текущие версии Edge, Firefox и Safari поддерживают WebAssembly. Однако результаты данного руководства могут отличаться в зависимости от версии/браузера.

Перейдя прямо в него, создайте папку и cd в это.

В этой папке создайте файл a client и а server папку.

Приложение React

Начнём с создания программы React. Это не что иное, как обычная программа на стороне клиента с добавленными несколькими дополнительными битами!

Сначала cd в client папку и запустить npm init -y чтобы инициализировать ваш package.json.

После этого запустите следующее:

npm install --save react react-dom && npm install --save-dev @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/plugin-syntax-dynamic-import @babel/polyfill @babel/preset-env @babel/preset-react add-asset-html-webpack-plugin babel-loader html-webpack-plugin webpack webpack-cli webpack-dev-server

Как только вы это сделаете, измените scripts часть вашей package.json к следующему:

"scripts": {  "dev": "webpack-dev-server --mode development",  "build": "webpack --mode production"},

Далее в папке клиента создайте два файла, a .babelrc и а webpack.config.js.

В .babelrc вставьте следующее:

{  "presets": [ ["@babel/preset-env", { "modules": false } ],  "@babel/preset-react"],  "plugins": [    "@babel/plugin-proposal-class-properties",    ["@babel/plugin-proposal-decorators", { "legacy": true }],    "@babel/plugin-syntax-dynamic-import"  ]}

И в webpack.config.js вставьте следующее:

Обратите внимание на AddAssetHtmlPlugin который мы используем для ввода wasm_exec.js файл и init_go.js файл в наше приложение через тег script. Они должны быть в том порядке, в котором они показаны, чтобы wasm_exec.js файл запускается раньше init_go.js файл. The wasm_exec.js просто настраивает среду выполнения Go в браузере и init_go.js файл дает нам глобальный, трудоспособный экземпляр Go объекта. Но подробнее об этих файлах позже.

Теперь создайте a src папку и добавьте файл index.js файл, index.html файл, init_go.js файл, wasm_exec.js файл, а components папка из app.js файл в нем. Ваш каталог должен выглядеть так:

1*8qMoT7ccXiXFpbNfb5wOew

Отсюда добавьте это к своему index.html:

В index.js добавить это:

И в вашем components/app.js файл добавьте следующее:

Теперь у нас есть очень простое приложение React!

WebAssembly на Клиенте

В wasm_exec.js файл, вставьте код об этом (опущен для краткости).

Как мы уже говорили ранее, это просто создает экземпляр основной среды исполнения для Go в клиенте. Он обеспечивает глобальный Go конструктор, который мы будем использовать позже.

Дальше нам нужно что-то с этим делать Go объект. Да в вашем init_go.js файл, добавьте следующее:

Все это создает новый go объект с Go конструктор, который мы создали раньше, и привязываем его к глобальному состоянию.

Иди вперед и бегай npm run dev и перейдите к localhost:8080 в браузере, и вы должны увидеть «Привет!» на вашей веб-странице. Не очень интересно, верно? Но чего вы не видите, так это того, что мы ввели наш глобальный go объект!

1*WeKkDngnfaVrJILoAxEJsQ

Теперь смените свой components/app.js файл к следующему:

Что мы изменили? Начнём с простых вещей. Сначала мы добавили an isLoading приписывать государству. Это для того, чтобы мы знали, что WebAssembly все еще загружается. В render функцию, мы используем isLoading атрибут от состояния до условного отображения a div с надписью «Загрузка» или a button.

Вы можете спросить себя: «Эта кнопка имеет onClick с функцией sayHiно я не вижу a sayHi функционировать где угодно». Вот здесь на помощь приходит WebAssembly. Когда мы пишем наш код Go, мы определим эту функцию и привяжем ее к глобальному положению. Вот почему мы должны дождаться загрузки WebAssembly, прежде чем мы сможем отобразить нашу кнопку. Но мы заполним эти пробелы позже.

Глядя на componentDidMount Вы можете видеть, что мы звоним WebAssembly.instantiateStreaming что является оптимальным способом загрузки кода WebAssembly. Требуется возвращающее обещание a wasm файл и an importObject как его параметры Он возвращает скомпилированный модуль WebAssembly. Это обещание является запросом получения нашего API (мы будем создавать его дальше!), и эта конечная точка просто возвращает wasm файл. После того, как мы получим модуль, мы используем go чтобы запустить его, а затем мы устанавливаем isLoading к false.

Но, конечно, поскольку у нас ничего нет localhost:3000 это сломается.

Сервер

Теперь нам нужно настроить сервер для обслуживания наших wasm файл. Сначала откройте новый терминал и cd в server папку, которую вы создали раньше, и запустите npm init -y чтобы инициализировать ваш package.json.

Далее установите несколько пакетов. Выполните следующее:

npm install --save compression cors express && npm install --save-dev nodemon

Изменить scripts часть вашей package.json до этого:

"scripts": {  "dev": "nodemon index.js"},

Теперь у server каталог, создайте файл index.js файл и а go папку. В этом go папку, создайте a main.go файл.

Ваша папка должна выглядеть так:

1*8wCMDp9PG5iX4k-GwvJiaA

В index.js вставьте следующее:

Это просто простой экспресс-сервер, обслуживающий a wasm файл с go папку. Давайте сделаем это сейчас!

WebAssembly на сервере

В вашем main.go файл добавьте это (большое спасибо TutoiralEdge за его учебник):

Давайте разберем это. Сначала нам нужно импортировать fmt для базовой печати и syscall/js мы можем использовать все новые преимущества JavaScript от Go. Далее мы создадим нашу sayHi функция с параметрами args []js.Value хотя мы не собираемся передавать никаких аргументов. Эта функция только печатает Привет!

В registerCallbacks функцию, мы привязываем нашу функцию к глобальному положению в нашем браузере. Теперь, когда мы звоним js.Global().Set функции мы собираемся сначала назвать нашу глобальную переменную «sayHi», а затем соединить ее с нашей sayHi функционировать сверху, завернув его в js.NewCallback функция.

Наконец, в нашей main функция, мы открываем канал и работаем registerCallbacks. Канал просто останавливает наш код Go, чтобы он не завершил исполнение.

Теперь все, что осталось, это скомпилировать этот код Go в WebAssembly.

cd в go папку и запустите следующее:

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

Обратите внимание, что наша GOOS установлено на js и наши GOARCH установлено на wasm. Это означает, что наша целевая операционная система есть js и архитектура компиляции есть wasm.

Теперь структура папок должна быть такой:

1*yyFpDTmOJifjXkdX_O0OGA

Как видите, теперь у нас есть a main.wasm файл, который мы можем предоставить.

cd обратно в server папку и запустить npm run dev.

Теперь ваш сервер должен работать localhost:3000. Вернитесь к localhost:8080 (если у вас все еще работает клиент) в вашем браузере и обновите его. После загрузки откройте консоль и нажмите кнопку. Он должен напечатать «Привет!» в консоли.

1*6gr60oiGn32hG6QPCfd6Напр.
Это работает!

Как вы наверняка видели, до того, как появится наша кнопка, он будет говорить «Загрузку» достаточно долго. Это затраты, которые мы получаем от использования WebAssembly. Однако после этой начальной нагрузки мы можем наслаждаться высокой производительностью на низком уровне.

Чтобы убить клиента и сервера, просто нажмите ctrl + c в терминалах.

Вывод

Спасибо, что прочли, и я надеюсь, что вам понравилось изучать WebAssembly вместе со мной. Хотя это очень базовая реализация WebAssembly в React, в следующей части этой серии мы создадим агента AI, который будет непревзойденным в крестики-нолики. Следите за обновлениями, если вас это интересует!

Если у вас есть комментарии или вопросы, не стесняйтесь оставлять их ниже.

Еще раз спасибо за прочтение! Поделитесь, пожалуйста, сбросьте a ? (или два) и счастливого кодирования.

Разместите меня в LinkedIn!

Добавить комментарий

Ваш адрес email не будет опубликован.