私はこれから小さなWasmファイルを作成しましたRustコード:
#[no_mangle]
pub fn hello() -> &'static str {
"hello from Rust"
}
それはビルドされ、hello
関数はJSから呼び出すことができます:
<!DOCTYPE html>
<html>
<body>
<script>
fetch('main.wasm')
.then(response => response.arrayBuffer())
.then(bytes => WebAssembly.instantiate(bytes, {}))
.then(results => {
alert(results.instance.exports.hello());
});
</script>
</body>
</html>
私の問題は、alert
が「undefined」を表示することです。 i32
を返すと、機能してi32
を表示します。また、String
を返そうとしましたが、機能しません(「undefined」と表示されます)。
WebAssemblyでRustから文字列を返す方法はありますか?どのタイプを使用する必要がありますか?
WebAssemblyは、少数の 数値型 のみをサポートします。これは、エクスポートされた関数を介して返すことができるすべてです。
WebAssemblyにコンパイルすると、文字列はモジュールの線形メモリに保持されます。ホスティングJavaScriptからこの文字列を読み取るには、メモリ内の場所への参照と文字列の長さ、つまり2つの整数を返す必要があります。これにより、メモリから文字列を読み取ることができます。
WebAssemblyにコンパイルする言語に関係なく、これと同じ手法を使用します。 WebAssembly関数からJavaScript文字列を返す方法 は、問題の詳細な背景を提供します。
Rustの場合、具体的には、次のようにCString
タイプを使用して、Foreign Function Interface(FFI)を利用する必要があります。
use std::ffi::CString;
use std::os::raw::c_char;
static HELLO: &'static str = "hello from Rust";
#[no_mangle]
pub fn get_hello() -> *mut c_char {
let s = CString::new(HELLO).unwrap();
s.into_raw()
}
#[no_mangle]
pub fn get_hello_len() -> usize {
HELLO.len()
}
上記のコードは、文字列への参照を返すget_hello
と、その長さを返すget_hello_len
の2つの関数をエクスポートします。
上記のコードをwasmモジュールにコンパイルすると、次のように文字列にアクセスできます。
const res = await fetch('chip8.wasm');
const buffer = await res.arrayBuffer();
const module = await WebAssembly.compile(buffer);
const instance = await WebAssembly.instantiate(module);
// obtain the module memory
const linearMemory = instance.exports.memory;
// create a buffer starting at the reference to the exported string
const offset = instance.exports.get_hello();
const stringBuffer = new Uint8Array(linearMemory.buffer, offset,
instance.exports.get_hello_len());
// create a string from this buffer
let str = '';
for (let i=0; i<stringBuffer.length; i++) {
str += String.fromCharCode(stringBuffer[i]);
}
console.log(str);
Cに相当するもの WasmFiddleで実際に見ることができます 。
Rust String
または&str
。代わりに、JavaScript側でJS文字列としてエンコードする必要があるデータを含む生のバイトポインターを割り当てて返します。
SHA1の例 here をご覧ください。
関心のある機能は
demos/bundle.js
-copyCStr
demos/sha1/sha1-digest.rs
-digest
ほとんどの例では、文字列を2回コピーしました。最初にWASM側でCString
に、またはVec
をその容量まで縮小してから、JS側でUTF-8をデコードします。
速度を上げるためにWASMを使用することが多いので、Rustベクトルを再利用するバージョンを実装しようとしました。
use std::collections::HashMap;
/// Byte vectors shared with JavaScript.
///
/// A map from payload's memory location to `Vec<u8>`.
///
/// In order to deallocate memory in Rust we need not just the memory location but also it's size.
/// In case of strings and vectors the freed size is capacity.
/// Keeping the vector around allows us not to change it's capacity.
///
/// Not thread-safe (assuming that we're running WASM from the single JavaScript thread).
static mut SHARED_VECS: Option<HashMap<u32, Vec<u8>>> = None;
extern "C" {
fn console_log(rs: *const u8);
fn console_log_8859_1(rs: *const u8);
}
#[no_mangle]
pub fn init() {
unsafe { SHARED_VECS = Some(HashMap::new()) }
}
#[no_mangle]
pub fn vec_len(payload: *const u8) -> u32 {
unsafe {
SHARED_VECS
.as_ref()
.unwrap()
.get(&(payload as u32))
.unwrap()
.len() as u32
}
}
pub fn vec2js<V: Into<Vec<u8>>>(v: V) -> *const u8 {
let v = v.into();
let payload = v.as_ptr();
unsafe {
SHARED_VECS.as_mut().unwrap().insert(payload as u32, v);
}
payload
}
#[no_mangle]
pub extern "C" fn free_vec(payload: *const u8) {
unsafe {
SHARED_VECS.as_mut().unwrap().remove(&(payload as u32));
}
}
#[no_mangle]
pub fn start() {
unsafe {
console_log(vec2js(format!("Hello again!")));
console_log_8859_1(vec2js(b"ASCII string." as &[u8]));
}
}
そしてJavaScriptの部分:
(function (iif) {
function rs2js (mod, rs, utfLabel = 'utf-8') {
const view = new Uint8Array (mod.memory.buffer, rs, mod.vec_len (rs))
const utf8dec = new TextDecoder (utfLabel)
const utf8 = utf8dec.decode (view)
mod.free_vec (rs)
return utf8}
function loadWasm (cache) {
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming
WebAssembly.instantiateStreaming (fetch ('main.wasm', {cache: cache ? "default" : "no-cache"}), {env: {
console_log: function (rs) {if (window.console) console.log ('main]', rs2js (iif.main, rs))},
console_log_8859_1: function (rs) {if (window.console) console.log ('main]', rs2js (iif.main, rs, 'iso-8859-1'))}
}}) .then (results => {
const exports = results.instance.exports
exports.init()
iif.main = exports
iif.main.start()})}
// Hot code reloading.
if (window.location.hostname == '127.0.0.1' && window.location.port == '43080') {
window.setInterval (
function() {
// Check if the WASM was updated.
fetch ('main.wasm.lm', {cache: "no-cache"}) .then (r => r.text()) .then (lm => {
lm = lm.trim()
if (/^\d+$/.test (lm) && lm != iif.lm) {
iif.lm = lm
loadWasm (false)}})},
200)
} else loadWasm (true)
} (window.iif = window.iif || {}))
ここでのトレードオフは、WASMでHashMap
を使用していることです。これにより、HashMap
がすでに必要でない限り、サイズが大きくなる可能性があります。
興味深い代替手段は tables を使用して(ペイロード、長さ、容量)トリプレットをJavaScriptと共有し、文字列を解放するときにそれを取得することです。しかし、私はまだテーブルの使い方を知りません。
追伸最初にVec
を割り当てたくない場合があります。
この場合、メモリ追跡をJavaScriptに移動できます。
extern "C" {
fn new_js_string(utf8: *const u8, len: i32) -> i32;
fn console_log(js: i32);
}
fn rs2js(rs: &str) -> i32 {
assert!(rs.len() < i32::max_value() as usize);
unsafe { new_js_string(rs.as_ptr(), rs.len() as i32) }
}
#[no_mangle]
pub fn start() {
unsafe {
console_log(rs2js("Hello again!"));
}
}
(function (iif) {
function loadWasm (cache) {
WebAssembly.instantiateStreaming (fetch ('main.wasm', {cache: cache ? "default" : "no-cache"}), {env: {
new_js_string: function (utf8, len) {
const view = new Uint8Array (iif.main.memory.buffer, utf8, len)
const utf8dec = new TextDecoder ('utf-8')
const decoded = utf8dec.decode (view)
let stringId = iif.lastStringId
while (typeof iif.strings[stringId] !== 'undefined') stringId += 1
if (stringId > 2147483647) { // Can't easily pass more than that through WASM.
stringId = -2147483648
while (typeof iif.strings[stringId] !== 'undefined') stringId += 1
if (stringId > 2147483647) throw new Error ('Out of string IDs!')}
iif.strings[stringId] = decoded
return iif.lastStringId = stringId},
console_log: function (js) {
if (window.console) console.log ('main]', iif.strings[js])
delete iif.strings[js]}
}}) .then (results => {
iif.main = results.instance.exports
iif.main.start()})}
loadWasm (true)
} (window.iif = window.iif || {strings: {}, lastStringId: 1}))