[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)中 在进入上下文阶段创建 影响 ...
随机推荐
- 如何用纯 CSS 创作一个蝴蝶标本展示框
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xzgZzQ 可交互视频教 ...
- Codeforces Round #439 (Div. 2) E. The Untended Antiquity
E. The Untended Antiquity 题目链接http://codeforces.com/contest/869/problem/E 解题心得: 1.1,x1,y1,x2,y2 以(x1 ...
- luogu3834 【模板】可持久化线段树 1（主席树）
关于空间,第零棵树是 \(4n\),其后每棵树都要多来 \(\log(n)\) 的空间,所以我是开 \(n(4+\log(n))\) 的空间. 关于借用节点: 图片来自这里 #include < ...
- CentOS下，mysql服务启动失败
mysql服务启动失败,可以使用排除法查找原因: 如果修改了my.cnf后重启mysql服务失败,大多数情况下都是配置文件有错误, 可以通过备份原来的配置文件,然后将配置文件清空,只剩下[mysqld ...
- HDU-4612 Warm up,tarjan求桥缩点再求树的直径！注意重边
Warm up 虽然网上题解这么多,感觉写下来并不是跟别人竞争访问量的,而是证明自己从前努力过,以后回头复习参考! 题意:n个点由m条无向边连接,求加一条边后桥的最少数量. 思路:如标题,tarjan ...
- 九度oj 题目1125：大整数的因子
题目描述: 已知正整数k满足2<=k<=9,现给出长度最大为30位的十进制非负整数c,求所有能整除c的k. 输入: 若干个非负整数c,c的位数<=30每行一个c,当c=-1时中止 ( ...
- php.ini配置参数详解
下面对php.ini中一些安全相关参数的配置进行说明 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 2 ...
- BZOJ 4719 [Noip2016]天天爱跑步 ——树链剖分
一直以为自己当时是TLE了,但是再看发现居然WA? 然后把数组扩大一倍,就A掉了.QaQ 没什么好说的.一段路径分成两段考虑,上升的一段深度+时间是定值,下降的一段深度-时间是定值,然后打标记统计即可 ...
- 【双向bfs】2017多校训练十 HDU 6171 Admiral
[题意] 现在给出一个三角矩阵,如果0编号的在点(x,y)的话,可以和(x+1,y),(x-1,y),(x+1,y+1),(x-1,y-1)这些点进行交换. 我们每一次只能对0点和其他点进行交换.问最 ...
- 高一python笔记大全（过会考）
最初のプログラム xfは.どちらかの試合(しあい)活動(かつどう)に参加して.a秒(aは整数)を使ったのですが.今あなたがひとつ任務を有:分と秒数を出力するください. a=int(input(&quo ...