[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)中 在进入上下文阶段创建 影响 ...
随机推荐
- Day08字符编码
Day08: 知识储备: 硬盘:由硬盘加载到内存,cpu从内存中取 软件产生的数据都是先保存在内存中 文件,输入文字,保存到内存,内存是硬件,硬件只能保存2进制,所以需要转换 文本编辑器,输入文字的时 ...
- Onenote代码高亮的实现方法
最终效果图 最终的效果图如下: VBA的编写参考 主要参考的是这篇博客中的思路:如何在Word中排出漂亮的代码 将VBA脚本复制到Word中并设置快捷键 Alt+F11 打开Word中的 VBS,将下 ...
- windows下升级pip失败，重新安装pip最新版本
环境: python3.6.5 32bit,后改为python3.4.3 32bit pycharm2018旗舰版 问题: pycharm里的pip一直无法升级到10.0.1版本,在cmd中使用升级命 ...
- MySql update inner join！MySql跨表更新 多表update sql语句？如何将select出来的部分数据update到另一个表里面？
项目中,评论数,关注数等数据,是实时更新的.+1,-1 这种. 有的时候,可能统计不准确. 需要写一个统计工具,更新校准下. 用Java写SQL和函数,代码很清晰,方便扩展,但是太慢了. 为了简单起见 ...
- 关于MongoDB分布式高可用集群实现
一.环境准备 1.本例使用3台Linux主机,IP地址如下: 点击(此处)折叠或打开 Server B Server C 2.根据需要,开启相应主机防火墙的相关端口.本次需要用到3台主机,所以开启这3 ...
- 【0门槛】PR稿的自我修养
本文来自网易云社区 作者:巩爽 十一过完,离2018年结束就只剩下85天啦!是不是2016年许下的2017年的梦想,在2018年还没有实现? 做过的项目仿佛都小有成就,可惜只是内部自嗨,想做域外宣传却 ...
- Axure：从单一评价方式到用户自由选择
导读: 亲,还记得淘宝对货物的评价方式吗?还记得对快递哥的评价方式吗? 1,经典五星评: ...
- c++ stack,queue,vector基本操作
stack 的基本操作有:入栈,如例:s.push(x);出栈,如例:s.pop();注意,出栈操作只是删除栈顶元素,并不返回该元素.访问栈顶,如例:s.top()判断栈空,如例:s.empty(), ...
- POJ 1056 IMMEDIATE DECODABILITY
IMMEDIATE DECODABILITY Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 9630 Accepted: ...
- iOS学习笔记18-CoreData
一.CoreData介绍 CoreData是iOS5之后新出来的的一个框架, 是对SQLite进行一层封装升级后的一种数据持久化方式.它提供了对象<-->关系映射的功能,即能够将OC对象转 ...