[Rust] Pass a JavaScript Function to WebAssembly and Invoke it from Rust
In some cases it’s useful to be able to invoke a JavaScript function inside Rust. This session showcases how this can be done, by passing along our JavaScript functions to the WebAssembly module instantiation.
First let's create a function in js:
const appendNumberToBody = (number) => {
const text = document.createTextNode(number);
document.body.appendChild(text);
}
Wrap this function into a single object which contains 'env':
const importObject = {
env: {
appendNumberToBody: appendNumberToBody
}
};
When we load wasm, we can pass in the object:
WebAssembly.instantiateStreaming(fetch("utils.gc.wasm"), importObject)
It return a promise, we can run the exported function return by wasm inside the promise.
Now we are going to create a function in Rust:
extern {
fn appendNumberToBody(x: u32);
}
#[no_mangle]
pub extern fn run() {
unsafe { // we need to wrap with unsafe if getting the passed in value from third party
appendNumberToBody(42);
}
}
We exprot 'run' function, then we can invoke it inside promise:
WebAssembly.instantiateStreaming(fetch("utils.gc.wasm"), importObject)
.then(wasmModule => {
wasmModule.instance.exports.run();
});
---------
Full code: Github
index.html:
<!DOCTYPE html>
<html>
<head>
<script> // pass the data from Js to Rust
const appendNumberToBody = (number) => {
const text = document.createTextNode(number);
document.body.appendChild(text);
} const importObject = {
env: {
appendNumberToBody: appendNumberToBody,
alert: alert
}
}; WebAssembly.instantiateStreaming(fetch("utils.gc.wasm"), importObject)
.then(wasmModule => {
wasmModule.instance.exports.run();
});
</script>
<head>
<body></body>
<html>
lib.rs:
extern {
fn appendNumberToBody(x: u32);
fn alert(x: u32);
}
#[no_mangle]
pub extern fn run() {
unsafe {
appendNumberToBody(42);
alert(33)
}
}
[Rust] Pass a JavaScript Function to WebAssembly and Invoke it from Rust的更多相关文章
- [WASM] Call a JavaScript Function from WebAssembly
Using WASM Fiddle, we show how to write a simple number logger function that calls a consoleLog func ...
- Understanding JavaScript Function Invocation and "this"
Understanding JavaScript Function Invocation and "this" 11 Aug 2011 Over the years, I've s ...
- href="javascript:function()" 和onclick的区别
href='javascript:function()'和onclick能起到同样的效果,一般来说,如果要调用脚本还是在onclick事件里面写代码,而不推荐在href='javascript:fun ...
- 关于<a href='javascript:function()'>
<a href='javascript:function()'> 这样写是为了让这个链接不要链接到新页面转而执行一段js代码.和onclick能起到同样的效果,一般来说,如果要调用脚本还是 ...
- javascript function对象
<html> <body> <script type="text/javascript"> Function.prototype.get_my_ ...
- JavaScript function函数种类（转）
转自:http://www.cnblogs.com/polk6/p/3284839.html JavaScript function函数种类 本篇主要介绍普通函数.匿名函数.闭包函数 目录 1. 普通 ...
- JavaScript function函数种类介绍
JavaScript function函数种类介绍 本篇主要介绍普通函数.匿名函数.闭包函数 1.普通函数介绍 1.1 示例 ? 1 2 3 function ShowName(name) { ...
- 【转】onclick事件与href='javascript:function()'的区别
href='javascript:function()'和onclick能起到同样的效果,一般来说,如果要调用脚本还是在onclick事件里面写代码,而不推荐在href='javascript:fun ...
- javascript:function 函数声明和函数表达式 详解
函数声明(缩写为FD)是这样一种函数: 有一个特定的名称 在源码中的位置:要么处于程序级(Program level),要么处于其它函数的主体(FunctionBody)中 在进入上下文阶段创建 影响 ...
随机推荐
- Many-to-one
创建模型 from django.db import models class Reporter(models.Model): first_name = models.CharField(max_le ...
- 对linux中source，fork,exec的理解以及case的 使用
fork 使用 fork 方式运行 script 时, 就是让 shell(parent process) 产生一个 child process 去执行该 script, 当 child proc ...
- OpennSSL之基本了解
HTTPS是一种协议,等于HTTP+TLS(由于历史原因,SSL3.0之后就被TLS1.0替代了).openssl是一套开源工具集,主要有两个特性: 实现了ssl2,ssl3,TLSv1,TLSv1. ...
- xtu数据结构 I. A Simple Tree Problem
I. A Simple Tree Problem Time Limit: 3000ms Memory Limit: 65536KB 64-bit integer IO format: %lld ...
- pytorch将cpu训练好的模型参数load到gpu上，或者gpu->cpu上
假设我们只保存了模型的参数(model.state_dict())到文件名为modelparameters.pth, model = Net() 1. cpu -> cpu或者gpu -> ...
- Educational Codeforces Round 33 (Rated for Div. 2)
A. Chess For Three time limit per test 1 second memory limit per test 256 megabytes input standard i ...
- ORACLE查询字段中含有空格的数据
SELECT * FROM T_NAME WHERE REGEXP_LIKE(COLNAME, '( )+'); SELECT * FROM T_NAME WHERE length(COLNAME) ...
- BZOJ 4259 残缺的字符串 ——FFT
[题目分析] 同bzoj4503. 只是精度比较卡,需要试一试才能行O(∩_∩)O 用过long double,也加过0.4.最后发现判断的时候改成0.4就可以了 [代码] #include < ...
- BZOJ2457 [BeiJing2011]双端队列 【贪心】
题目 Sherry现在碰到了一个棘手的问题,有N个整数需要排序. Sherry手头能用的工具就是若干个双端队列. 她需要依次处理这N个数,对于每个数,Sherry能做以下两件事: 1．新建一个双端队列 ...
- getParameter 与 getAttribute的区别
request.getAttribute():是request时设置的变量的值,用request.setAttribute("name","您自己的值");来设 ...