[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 ...
随机推荐
- js 时间戳 随机数 new Date().getTime()
一:时间转时间戳:javascript获得时间戳的方法有四种,都是通过实例化时间对象 new Date() 来进一步获取当前的时间戳 1.var timestamp1 = Date.parse(new ...
- PHP11 日期和时间
学习要点 UNIX时间戳 将其他格式的日期转成UNIX时间戳格式 基于UNIX时间戳的日期计算 获取并格式化输出日期 修改PHP的默认时间 微秒的使用 Unix时间戳 相关概念 Unix tim ...
- struct获取不到值的小错误
struct2 get set 这两个方法一定要用双骆驼命名法:getA() setA(), 而geta() seta()不行 我找了好久的错误,只能说框架这东西快捷方便,找起错误要人命
- RN传参的问题
RN父组件通过props属性给子组件传参,假设参数 target={target} 子组件在render函数里 let { target } = this.props; 如果子组件有个 FlatLis ...
- c++_方格填数（最新方法）
方格填数 如下的10个格子 +--+--+--+ | | | |+--+--+--+--+| | | | |+--+--+--+--+| | | |+--+--+--+ (如果显示有问题,也可以参 ...
- Python爬虫-Scrapy-CrawlSpider与ItemLoader
一.CrawlSpider 根据官方文档可以了解到, 虽然对于特定的网页来说不一定是最好的选择, 但是 CrwalSpider 是爬取规整的网页时最常用的 spider, 而且有很好的可塑性. 除了继 ...
- POJ 3259 Wormholes（负权环路）
题意: 农夫约翰农场里发现了很多虫洞,他是个超级冒险迷,想利用虫洞回到过去,看再回来的时候能不能看到没有离开之前的自己,农场里有N块地,M条路连接着两块地,W个虫洞,连接两块地的路是双向的,而虫洞是单 ...
- Insert or Merge
7-13 Insert or Merge(25 分) According to Wikipedia: Insertion sort iterates, consuming one input elem ...
- [mvc]MVC_Model
1,Model的职责: Model只负责与数据处理相关的工作. 2,开发Model的基本观念 采用ORM信息访问技术开发 ORM是将结构化的关系型数据,映射成面向对象模型.对于EF来说,就是关系型数据 ...
- python接口自动化-token参数关联登录（登录拉勾网）
前言 登录网站的时候,经常会遇到传token参数,token关联并不难,难的是找出服务器第一次返回token的值所在的位置,取出来后就可以动态关联了 登录拉勾网 1.先找到登录首页https://pa ...