[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)中 在进入上下文阶段创建 影响 ...
随机推荐
- perl学习笔记之：模式匹配，模块，文档
Perl语言的最大特点,也是Perl作为CGI首选语言的最大特点,是它的模式匹配操作符.Perl语言的强大的文本处理能力正是通过其内嵌的对模式匹配的支持体现的.模式通过创建正则表达式实现.Perl的正 ...
- java之 单根继承与集合
1.单根继承 概念: 单根继承,意味着所有类的继承,都继承自单一的基类的继承模式 优点: (1)所有对象都具有一个共用接口,归根到底都是相同的基本类型. (1)所有对象都具有一个共用接口,归根到底都是 ...
- GitHub中国区前100名到底是什么样的人？(转载)
本文根据Github公开API,抓取了地址显示China的用户,根据粉丝关注做了一个排名,分析前一百名的用户属性,剖析这些活跃在技术社区的牛人到底是何许人也!后续会根据我的一些经验出品<技术人员 ...
- C++类指针初始化
上面的代码会打印“A”. C++ 类指针定义的时候没有初始化的时候,居然可以安全的调用类内部的成员函数而不出错. 在网上查了一下: 初始化为NULL的类指针可以安全的调用不涉及类成员变量的类成员函 ...
- 线段树 Mayor's posters
甚至DFS也能过吧 Mayor's posters POJ - 2528 The citizens of Bytetown, AB, could not stand that the candidat ...
- 【bzoj3671】[Noi2014]随机数生成器 贪心
题目描述 输入 第1行包含5个整数,依次为 x_0,a,b,c,d ,描述小H采用的随机数生成算法所需的随机种子.第2行包含三个整数 N,M,Q ,表示小H希望生成一个1到 N×M 的排列来填入她 N ...
- 解开Future的神秘面纱之任务执行
此文承接之前的博文 解开Future的神秘面纱之取消任务 补充一些任务执行的一些细节,并从全局介绍程序的运行情况. 任务提交到执行的流程 前文我们已经了解到一些Future的实现细节,这里我们来梳理一 ...
- BZOJ 2301 [HAOI2011]Problem b ——莫比乌斯反演
分成四块进行计算,这是显而易见的.(雾) 然后考虑计算$\sum_{i=1}^n|sum_{j=1}^m gcd(i,j)=k$ 首先可以把n,m/=k,就变成统计&i<=n,j< ...
- USACO Party Lamps
题目大意:一排灯有n个,有4种开关,每种开关能改变一些灯现在的状态(亮的变暗,暗的变亮)现在已知一些灯的亮暗情况,问所以可能的情况是哪些 思路:同一种开关开两次显然是没效果的,那么枚举每个开关是否开就 ...
- gevent 使用踩坑
简单介绍 gevent 基本概念: 调度器: hub 上下文切换管理: switch 主循环: loop 协程: greenlet gevent 特性: ...