Эта статья представляет собой краткое руководство, целью которого является показать, как: Получить rust, создать файл .wasm и вызвать функции rust из этого файла .wasm из консоли браузера.
Чтобы запустить rust в сети, вам нужно найти язык программирования rust. Кроме того, он даст вам груз (их менеджер пакетов — подумайте о npm, если вы пришли из node.js).
Введите это в свой терминал в каталоге по вашему выбору.
$curl https://sh.rustup.rs -sSf | ш
Вы должны увидеть следующую распечатку ниже.
Боже, эти рустообразные - добрые люди.
Теперь перезапустите терминал, чтобы установить переменную PATH. (cmd+q, пробел+cmd, введите «терминал»)
На данный момент у вас теперь есть ржавчина. Если хотите, вы можете продолжить изучение языка, следуя этой замечательной книге:
https://doc.rust-lang.org/book/second-edition/
Я просто предполагаю, что вы прочитали всю книгу и вернулись. Итак, давайте создадим файл ржавчины.
Сначала давайте используем груз, чтобы сделать проект для нас. Я назову этот проект бодрым без особых причин.
В терминале запустить $cargo new pep — bin
следующее теперь должно быть содержимым вашего каталога pep внутри вашего текущего.
Здорово! Теперь перейдите в каталог «pep» или как вы его назовете.
Теперь вы можете запустить команду запуска груза из терминала.
$ грузовой пробег
И вы должны увидеть следующую распечатку.
Здорово! Теперь посмотрим на содержимое файла main.rs, оно должно быть таким:
главная функция () {
println!("Привет, мир!");
}
Давайте заменим это чем-нибудь интересным. Для экономии времени давайте создадим небольшую функцию Фибоначчи, которая принимает ввод u32 и выдает код символа. Не парься, я сделал это за тебя.
используйте std::ffi::CString;
используйте std::os::raw::c_char;
#[no_mangle ] //позволяет получить его из javascript
pub fn fib(input: u32) -› *mut c_char{
пусть mut f_zero: u64 = 0;
пусть mut f_one: u64 = 1;
пусть mut f_n: u64 = f_zero + f_one;
для _ в 1.. ввод {
f_n= f_zero + f_one;
f_zero = f_one;
f_one = f_n;
}
return CString::new(f_n.to_string()).unwrap().into_raw();
}
Теперь также добавьте эту библиотеку в свой файл Cargo.toml.
[библиотека]
тип ящика = [“cdylib”]
Идеально! теперь давайте превратим этот основной файл rust в частично переваренный материал .wasm, чтобы мы могли добавить его в браузер.
Для этого введите эти команды в свой терминал. Для последней команды убедитесь, что вы находитесь в каталоге с файлом main.rs.
$rustup обновление
$rustup target add wasm32-unknown-unknown — набор инструментов каждую ночь
$rustc +nightly — цель wasm32-unknown-unknown -O — crate-type=cdylib main.rs -o main.big.wasm
$Wasm-gc target/wasm32-unknown-unknown/release/PEP.wasm -o main.gc.wasm
теперь уменьшите его, бросив их в терминал:
Установка $cargo — git https://github.com/alexcrichton/wasm-gc
$wasm-gc main.big.wasm main.wasm
Теперь вы должны увидеть файл с именем add.big.wasm в вашем каталоге. и файл с именем main.gc.wasm внутри вашей папки PEP (или как бы вы ее ни называли).
Теперь очень быстро соберите этот файл index.html.
‹!DOCTYPE html›
‹html›
‹скрипт›
WebAssembly.instantiateStreaming(fetch('main.gc.wasm'))
.then(wasm_module =› {
alert(`эта страница может выполнять функции Rust из консоли!`);
window.wasm = wasm_module;
});
‹/скрипт›
‹тело›‹/тело›
‹/html›
Теперь бросьте это в терминал, чтобы запустить ваш маленький сервер с вашим маленьким файлом:
$npx http-обслуживание -C-1
Вы должны получить небольшое сообщение, подобное этому, в вашем терминале:
Теперь перейдите в выбранный вами браузер (под этим я подразумеваю Chrome, Opera, Firefox или Safari, потому что выбор — это иллюзия) и перейдите на localhost:8080. Вы должны получить горячее сообщение, в котором говорится.
«Эта страница может выполнять функцию ржавчины из консоли!»
Здорово! давайте посмотрим, правда ли это. откройте инструменты разработчика (cmd+opt+i на Mac) и откройте вкладку с надписью console. отсюда мы можем ввести следующую команду, чтобы получить доступ к нашей функции fib, и передать ей любое число, которое нам нравится, в моем случае это 10.
wasm.instance.exports.fib(10)
Нажмите Enter и… подождите секунду… это не 10-й индекс последовательности Фибоначчи.
В первую очередь вы можете подумать, что компьютеры тупые и бесполезные, и у вас нет времени на эту ерунду, и это отчасти правда, но в нашем случае браузер (компьютер) выдает индекс в памяти, соответствующий искомому числу. (спойлер 55) начинает храниться. Это подчеркивает некоторые фундаментальные различия между тем, как работает ржавчина как язык, и тем, как работает javascript. А пока давайте просто заставим консоль дерна сказать 55!
Давайте создадим еще одну небольшую функцию в нашем файле index.html, которая позволит нам считывать число из этого индекса и превращать его в строку.
Я использовал этот:
функция readString(wasm, ptr) {
a = новый Uint8Array(wasm.instance.exports.memory.buffer)
пусть строка = ‘’
в то время как (а [указатель]) {
string += String.fromCharCode(a[ptr++])
}
возвращаемая строка
}
Поместите это в файл index.html вот так
Идеально! перезапустите свой старый добрый сервер и вернитесь к вам localhost: 8080 и запустите в консоли браузера:
wasm.instance.exports.fib(10)
А теперь приготовьтесь к моменту, которого вы так долго ждали.
Вызовите функцию readString из консоли с wasm в качестве первого параметра и целым числом, которое консоль напечатала в качестве второго. пример показан ниже (ваше целое число будет отличаться от моего, так что не бойтесь.
Вау, вот оно! Похлопайте себя по плечу, идите выпейте, скажите соседу, что пишете ржавчину в сети. А теперь извинись перед соседом за претенциозность.
