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的更多相关文章

  1. [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 ...

  2. [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 ...

  3. Rust初步（四）：在rust中处理时间

    这个看起来是一个很小的问题,我们如果是在.NET里面的话,很简单地可以直接使用System.DateTime.Now获取到当前时间,还可以进行各种不同的计算或者输出.但是这样一个问题,在rust里面, ...

  4. Rust 1.31正式发布，首次引入Rust 2018新功能

    Rust 1.31是第一个实现了Rust 2018独有新功能并且不保证与现有代码库兼容的版本.Rust 2018相关工作正在进行中,而Rust 1.31只是整个三年开发周期的开始,这个开发周期将对这门 ...

  5. (function($, window, document) {}) jQuery 调用解决与其他javascript库冲突的写法

    将函数包在红色字体内部,可以解决$符号与其他插件的冲突. <script type="text/javascript"> (function($, window, do ...

  6. 用 Function.apply() 的参数数组化来提高 JavaScript程序性能

    我们再来聊聊Function.apply() 在提升程序性能方面的技巧. 我们先从 Math.max() 函数说起, Math.max后面可以接任意个参数,最后返回所有参数中的最大值. 比如 aler ...

  7. 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 ...

  8. JavaScript 之 解码类似eval(function(p,a,c,k,e,d){}))的JavaScript代码

    这里以解码百度访问统计代码构造函数为示例: 以下为要统计JavaScript源码:红色加粗部分将是要修改的地方. eval(function(p,a,c,k,e,d){e=function(c){re ...

  9. Servo: The Embeddable Browser Engine

    Embedding, in the context of this article, is the process of hosting a web rendering engine inside a ...

随机推荐

  1. C-基础：函数返回局部变量

    一般的来说,函数是可以返回局部变量的. 局部变量的作用域只在函数内部,在函数返回后,局部变量的内存已经释放了.因此,如果函数返回的是局部变量的值,不涉及地址,程序不会出错.但是如果返回的是局部变量的地 ...

  2. js模块化入门与commonjs解析与应用

    JS模块化的基本原理 commonjs规范 commonjs在前端模块化中的基本使用 AMD与CMD规范剖析博客链接 一.JS模块化基本原理 在JS没有提出来模块化的时候,开发JS项目比较简单,同时也 ...

  3. sftp ftp文件同步方案

    sftp ftp文件同步方案 1. 需求 1.1实现网关服务器的ftp服务器的/batchFileRequest目录下文件向徽商所使用的sftp服务器的/batchFileRequest目录同步文件 ...

  4. Centos 7安装Mysql5.7

    1.下载(国内镜像,比搜狐的快一点):http://mirrors.ustc.edu.cn/mysql-ftp/Downloads/MySQL-5.7/mysql-5.7.22-linux-glibc ...

  5. java基础之switch

    switch 语句由一个控制表达式和多个case标签组成. switch 控制表达式支持的类型有byte.short.char.int.enum(Java 5).String(Java 7). swi ...

  6. 用python写自定义模板

    模板语法有点像php !/usr/bin/env python """ #demo.py.html <html> <?py include head.p ...

  7. 大数据学习——flume拦截器

    flume 拦截器(interceptor)1.flume拦截器介绍拦截器是简单的插件式组件,设置在source和channel之间.source接收到的事件event,在写入channel之前,拦截 ...

  8. 在java中获取Map集合中的key和value值

  9. Jmeter接口测试-正则表达式提取器-提取token

    在使用Jmeter过程中会有这样的场景, A接口执行后返回json字符串, 这个json中有B接口需要的某一个参数, 那如何来实现呢? 第一步:添加正则表达式 方法非常简单, 这就是我们今天要讲的正则 ...

  10. 四、SQL基础知识--约束和视图

    --创建约束的方式 --一.在字段创建时将约束添加到字段之后 CREATE TABLE ZYJ_YUESHU( ZYJ_ID VARCHAR(20) NOT NULL PRIMARY KEY, --创 ...