Картина по Вадим Шербаков через Unsplash
Webassembly Это новая технология, она (до) 1000 раз быстрее, чем JavaScript. В начале Webassembly была намерена запустить только на браузере, но, как и сейчас, люди работают, чтобы сделать Windassembly, чтобы бежать за пределы браузера. Одна из программы, которая позволяет нам запускать Webassembly за пределами браузера, является второй состоятельной виртуальной машиной.
Второе государство VM (SSVM) Это высокопроизводительное окно выполнения, оптимизированную для серверных приложений. Этот проект предоставляет поддержку доступа к SSVM в качестве аддона Node.js. Это позволяет приложениям Node.js вызовов функции Webassembly, написанные на ржавчине или других высокопроизводительных языках. Почему вы хотите запустить Webassembly на стороне сервера? Аддон SSVM может взаимодействовать с файлами Webassembly, создаваемых инструментом компилятора SSVMUP.
Цель
Почему мы хотим использовать webassembly? Разве JavaScript не может обрабатывать все в браузере? Ну, я могу сказать да и нет. JavaScript может иметь возможность делать большую часть вещей на веб-странице, однако существуют некоторые преимущества WebAssembly Over JavaScript для создания веб-приложений:
- Меньший размер программы, потому что программа скомпилирована на двоичный
- Сборщик мусора является необязательным (только тогда, когда вы используете собранный язык, например Go)
- Ближе к машиностроительному коду, который делает его быстро компилировать и больше не требует переоценки
Короче говоря, что мы собираемся сделать, это просто запустить функцию в поддержанном языке Webassembly от JavaScript (вы можете использовать узел или DENO для времени выполнения).
В этом руководстве я буду использовать язык ржавчины (вы также можете использовать C, C ++ или GO), потому что его проще настроить и был отправлен стартовым шаблоном.
Поэтому мы ожидаем получить эти 3 преимущества:
- Ржавая производительность
- Правильность и ремонтопригодность
- Безопасность и портативность Webassembly (компилируйте один раз, бегайте где угодно)
Я объясню вас агностическим способом, поэтому вы не привязаны к моему личному выбору.
Начинаем
Итак, SSVM предоставил нам основные Стартовый шаблон который вы можете клонировать и попытаться сделать проект от него. Так Просто клонируйте или скачайте – и вставьте его в свой проект.
После этого вы можете установить SSVM на вашу машину.
npm i -g ssvmup npm i ssvm
Для этого проекта я собираюсь приносить мой RUST ANIME4K Проект станет веб-службой. Я ожидаю не переписать большую часть кода ржавчины, так как проект был сделан.
Таким образом, пользователь сможет загрузить изображение, то загруженное изображение будет передано и обработано в Rust, и обработанное изображение будет возвращено обратно на веб-сервер JavaScript.
Написание кода ржавчины
Вам нужно только написать код ржавчины внутри источника ржавчины каталог SRC/ И не забудьте сделать функцию общественности ( Pub ) и дает # [WASM_BINDGEN] атрибут.
Ниже приведена сводка моего кода
SRC/lib.rs.
#[wasm_bindgen] pub fn anime4k(buf : &[u8]) -> Vec{ // Yadayada my long code ... let mut out = Vec:: ::new(); image::png::PNGEncoder::new(&mut out) .encode(&bytes[..], img_width, img_height, image::ColorType::Rgba8) .unwrap(); out }
Используя стартовый проект, я могу использовать только версию WASM-BINDGEN 0.2.61 только поддерживает только Целое число С Строка или VEC Поскольку это функциональный тип параметра и тип возврата (возможно, он был вызван самим SSVM). Так что будьте осторожны с этим ограничением, если вы используете конкретный тип данных, вы должны преобразовать его в байты ( VEC ) и декодируйте его позже.
Это то, что я получил от попытки вернуть VEC
Caused by:
Type of `return value` is Vector(I32), only Integer, String or Vector are supported now
Так что это довольно просто. Мне не нужно очень переписать это очень много, мне нужно только настроить данные ввода и выходных данных, а также параметр функции и тип возврата.
Написание кода JavaScript
Для веб-сервера я буду использовать Expressjs, потому что я был знаком с этим. Итак, мне просто нужно установить его, используя команду ниже
npm install express npm install express-fileupload # Needed to handle file upload
И ниже полный код моей сети
Узел/app.js.
// Import the function you have create in Rust
// anime4k is the function that I will create
const { anime4k } = require('../pkg/ssvm_nodejs_starter_lib.js');
const express = require('express');
const fileUpload = require('express-fileupload');
// In Heroku, the port number was provided from environment
// variable.
const PORT = process.env.PORT || 3000;
const app = express();
app.use(fileUpload());
app.use(express.static(__dirname + '/public'));
// Accept an uploaded image and pass it to
// the `anime4k` function and return the result
app.post('/upload', (req, res) => {
// The image had to be converted to a bytes
const buf = Uint8Array.from(req.files.image.data);
res.set('Content-Type', 'text/png');
res.end(Buffer.from(anime4k(buf)));
});
app.listen(PORT, () => {
console.log(`Server running at http://127.0.0.1:${PORT}/`);
});
Запуск приложения
Прежде чем запустить приложение, вы должны построить библиотеку ржавчины. Чтобы построить библиотеку ржавчины, вы должны ввести команду ниже
ssvmup build
Затем вы можете запустить приложение JavaScript
node node/app.js
Развертывание
После того, как вы создадите код, теперь вы можете развернуть его в Интернет.
Ниже Dockerfile Содержание файла, которое я изменил
FROM ubuntu:20.04
ARG DEBIAN_FRONTEND=noninteractive
ENV RUSTUP_HOME=/usr/local/rustup \
CARGO_HOME=/usr/local/cargo \
PATH=/usr/local/cargo/bin:$PATH
RUN apt-get update \
&& apt-get install -y tzdata \
&& apt-get -y upgrade && apt-get install -y build-essential curl wget git vim libboost-all-dev
RUN curl -sL https://deb.nodesource.com/setup_14.x | bash \
&& apt-get install -y nodejs \
&& npm install -y -g ssvmup --unsafe-perm \
&& npm install -y ssvm \
&& npm install express express-fileupload # You can change it with any library you use
RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
ADD . ./
RUN ssvmup build
CMD node node/app.js
Он просто устанавливает все необходимое приложение, такое как узел, SSVM и какой-то узел. скопируйте код проекта; построить проект ржавчины; Затем запустите веб-сервер, выполнив Узел узла/app.js команда.
Развертывание Героку
Это очень легко развернуть в Heroku Отказ
Вам нужно только создать приложение или использовать существующий.
После этого вы должны изменить стек проекта, чтобы использовать контейнер, потому что мы будем использовать Докер Отказ Вы можете изменить стек проекта, запустив команду ниже
heroku stack:set container -a APPLICATION_NAME
После этого вы можете использовать любой метод развертывания, но предпочитаю подключить мои репозитории GitHub к Heroku.
Затем нажмите Развертывание Кнопка для развертывания проекта и подожди, пока он не развернут.
Вот предварительный просмотр сети.
Вердикт
JavaScript может быть довольно мощным для использования в веб-приложениях, но у него есть свои ограничения. Чтобы преодолеть эти ограничения, мы выходим из критического критического кода производительности от JavaScript в Rust, компилируйте код ржавчины в Webassembly и интегрировать Webassembly с JavaScript.
Если у вас есть дополнительные вопросы, дайте мне знать в комментариях ниже.
Исходный код проектов доступны для общественности https://github.com/andraantariksa/anime4k-ssvm-nodejs а также живая демонстрация http://anime4k-ssvm-nodejs.herokuapp.com/
Ссылка
- https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/
- https://www.secondstate.io/
- https://devcenter.heroku.com/articles/build-docker-images-heroku-yml
Этот пост был изначально размещен в моих блогах https://andraaa.my.id/blog/run-webassembly-outside-browser-uss-second-state-vm/
Оригинал: “https://dev.to/andraantariksa/combining-the-power-of-javascript-and-rust-by-running-webassembly-outside-browser-using-second-state-vm-379d”