[Rust] Load a WebAssembly Function Written in Rust and Invoke it from JavaScript
In this lesson we are going to setup a project from scratch by introducing the JavaScript snippet to load a WebAssembly module. We demonstrate two different ways and showcase the benefit of the streaming solution. Once the module is loaded we can invoke a function previously exported from our Rust code.
Create a new project as a library:
cargo new --lib utils
Go to the project folder, modify Cargo.toml:
[package]
name = "utils"
version = "0.1.0"
authors = ["zhentian-wan <answer881215@gmail.com>"]
edition = "" [dependencies] [lib]
crate-type = ["cdylib"]
Create an function in src/lib.rs:
#[no_mangle]
pub extern fn add_one(x: u32) -> u32 {
x + 1
}
The extern keyword is needed to create an interface, so that this function can be invoked from other languages. The function accepts a value x, which is an unsigned integer, which is incremented by one and returned. In addition, we need to add a no-mangle annotation to tell the Rust compiler not to mangle the name of this function.
Run:
cargo build --target wasm32-unknown-unknown --release
wasm-gc target/wasm32-unknown-unknown/release/utils.wasm -o utils.gc.wasm
Create an index.html file and load utils.gc.wasm file we just generated:
<!DOCTYPE html>
<html>
<head>
<script>
WebAssembly.instantiateStreaming(fetch("utils.gc.wasm"))
.then(wasmModule => {
const result = wasmModeult.instance.exports.add_one(3);
const text = document.createTextNode(result);
document.body.appendChild(text);
});
</script>
<head>
<body></body>
<html>
Run:
http
Open the broswer we should see the output 4.
Be aware, instantiate streaming requires that our WASM file must be served with a content type, application/wasm. Fortunately, our HTTP server already does so.
[Rust] Load a WebAssembly Function Written in Rust and Invoke it from JavaScript的更多相关文章
- [WASM + Rust] Debug a WebAssembly Module Written in Rust using console.log
Having some kind of debugging tool in our belt is extremely useful before writing a lot of code. In ...
- [WASM] Create and Run a Native WebAssembly Function
In this introduction, we show a simple WebAssembly function that returns the square root of a number ...
- Rust初步（四）：在rust中处理时间
这个看起来是一个很小的问题,我们如果是在.NET里面的话,很简单地可以直接使用System.DateTime.Now获取到当前时间,还可以进行各种不同的计算或者输出.但是这样一个问题,在rust里面, ...
- Rust 1.31正式发布，首次引入Rust 2018新功能
Rust 1.31是第一个实现了Rust 2018独有新功能并且不保证与现有代码库兼容的版本.Rust 2018相关工作正在进行中,而Rust 1.31只是整个三年开发周期的开始,这个开发周期将对这门 ...
- (function($, window, document) {}) jQuery 调用解决与其他javascript库冲突的写法
将函数包在红色字体内部,可以解决$符号与其他插件的冲突. <script type="text/javascript"> (function($, window, do ...
- 用 Function.apply() 的参数数组化来提高 JavaScript程序性能
我们再来聊聊Function.apply() 在提升程序性能方面的技巧. 我们先从 Math.max() 函数说起, Math.max后面可以接任意个参数,最后返回所有参数中的最大值. 比如 aler ...
- JN_0004：轻松解码类似eval(function(p,a,c,k,e,d){}))的JavaScript代码
百度访问统计代码JavaScript源码:红色加粗部分将是要修改的地方.eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"&qu ...
- JavaScript 之 解码类似eval(function(p,a,c,k,e,d){}))的JavaScript代码
这里以解码百度访问统计代码构造函数为示例: 以下为要统计JavaScript源码:红色加粗部分将是要修改的地方. eval(function(p,a,c,k,e,d){e=function(c){re ...
- Servo: The Embeddable Browser Engine
Embedding, in the context of this article, is the process of hosting a web rendering engine inside a ...
随机推荐
- while循环（break、continue）
while循环 流程:判断条件是否为真,如果条件为真,执行代码块,然后再次判断条件是否为真,如果为真,执行代码块,直到条件判断为假,结束循环 格式 while 条件: 代码块(循环体) else:- ...
- [BZOJ2120]:数颜色（分块？）
题目传送门 我感觉这种题没必要扯淡题目大意了,没啥用. 暴力过掉,擦了个边. 主要是讲一下这道题我用到的卡常. 首先,0,1标记我用的位运算,位运算符跑的要比正常的+,-,×,÷,true,false ...
- 「 HDOJ P2227 」 Find the nondecreasing subsequences
# 题目大意 就是找不下降子序列的个数. # 解题思路 一开始想着先离散化,然后再做个 $dp$,发现用 $dp$ 的话时间复杂度是 $\text{O}(n^2)$ 的,稳稳超时. 这里说说 $dp$ ...
- curl 模拟post请求
curl -H "Content-Type:application/json" -X POST --data '{"openId":"xxxxxxx& ...
- logging ，re 模块
一,复习 # random: random() randint() choice() sample() # 序列化:对象需要持久化存储或传送 对象 => 字符串 # json: 用于传输 # - ...
- iframe的操作switch_to_frame使用方法.
一.frame和iframe区别 Frame与Iframe两者可以实现的功能基本相同,不过Iframe比Frame具有更多的灵活性. frame是整个页面的框架,iframe是内嵌的网页元素,也可以说 ...
- python直接赋值、深浅拷贝实例剖析
根据数据类型分为两部分进行剖析: int.str类型 list.tuple.dict类型等 1. int.str类型 [int类型实例] >>> import copy ...
- 主题：学习Spring必学的Java基础知识(9)----HTTP报文
转: 引述要学习Spring框架的技术内幕,必须事先掌握一些基本的Java知识,正所谓“登高必自卑,涉远必自迩”.以下几项Java知识和Spring框架息息相关,不可不学(我将通过一个系列分别介绍这些 ...
- 【04】Firebug页面概况查看
Firebug页面概况查看 使用Firebug的概况,你可以测试Web页面导致延迟加载的文件. 通过打开页面 Firebug > Console(控制台)> Profile(概况). 你需 ...
- Laya Tween循环
Laya Tween循环 @author ixenos 需求:做一个循环的缓动动画 方案: 1)如果只是线性变化,那么直接使用timer或者frameLoop来变化 2)如果需要有非线性变化,那么使用 ...