[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 ...
随机推荐
- mysql数据库比较，各数据库不同之处
和mysql数据库比较,各数据库不同之处: Oracle数据库:字段类型不同 postgresql数据库:show tables不同; SQL语句需要前面加上 模式名 Mongodb数据库:文档存储, ...
- 设计模式：命令模式（Command Pattern）
问题 某个类中需要定义一个方法,该方法要实现的功能不确定的,需要等到程序执行该方法的时候才确定下来. 例如:定义一个计算数组的方法,可能需要遍历输出数组,也有可能是需要对数组中元素求和. 解决方案 按 ...
- EBS oracle 批量导入更新MOQ（最小拆分量、采购提前期、最小订购量、最小包装量）
EXCEL的列:组织id,供应商编号,供应商地点,料号,最小拆分量.采购提前期.最小订购量.最小包装量 --采购导入更新MOQ四个值,若有为空的那列,会保留原来的值,不会去更新那列的值 PROCEDU ...
- js实现返回上一页功能
大家在做 "返回上一页" 这个功能的时候 都是用history.go(-1);来实现的 但这段代码只是简单的使用浏览器的后退功能 从浏览器缓存中取出页面来显示 但我们绝大部分情况都 ...
- Could not find conduit initiator for address:xxxxxxxxx and transport: http://schemas.xmlsoap.org/soap/http
<properties> <cxf.version>3.1.12</cxf.version> </properties> <dependencie ...
- 数据结构实验6：C++实现二叉树类
实验6 学号: 姓名: 专业: 6.1 实验目的 掌握二叉树的动态链表存储结构及表示. 掌握二叉树的三种遍历算法(递归和非递归两类). 运用二叉树三种遍历的方法求解有关问题. 6 ...
- 3.3.2 使用 cut 选定字段
cut 命令是用来剪下文本文件里的数据,文本文件可以是字段类型或是字符类型.后一种数据类型在遇到需要从文件里剪下特定的列时,特别方便.请注意:一个制表字符在此被视为单个字符. ...
- centos7.4下搭建JDK+Tomcat+Nginx+Mysql+redis+Mongodb+maven+Git+Jenkins
先干两件大事!先干两件大事!先干两件大事! 1.关闭selinux [root@mycentos ~]# vi /etc/selinux/config SELINUX=disabled 2.关闭防火墙 ...
- Kubernetes集群中修复状态为NotReady的节点
度个假回来发现自己集群中的节点都挂了,全部是NotReady状态 但是除了.10节点外,其他主机并没有挂,可以远程连接上, 那就考虑是kubernetes系统的问题 解决的方法是重启kube-prox ...
- Linux怎么读? Linux读音考古一日游
Linux怎么读? Linux读音考古一日游/*凡是准备踏入Linux大门的叉子们(N年不关注了,不知道这个称呼是否还有),都必须经历疑问 那就是linux到底怎么读? 也许有些人很容易 什么里纽克 ...