-
从用Rust 写 Hello world 入门WebAssembly | WebAssembly 教程
2020-03-04 20:47:33在上一篇文章里,我们介绍了学习 WebAssembly 的常见问题。 现在先从 Rust 开始动手实践吧。 Rust 是当今编写 WebAssembly 应用程序的最佳语言。 本文所用到的源代码Repo请点击:...在上一篇文章里,我们介绍了学习 WebAssembly 的常见问题。
现在先从 Rust 开始动手实践吧。 Rust 是当今编写 WebAssembly 应用程序的最佳语言。
本文所用到的源代码Repo请点击:https://github.com/second-state/wasm-learning/tree/master/rust
虽然 WebAssembly 支持多种编程语言,但迄今为止, Rust 拥有最好的工具。 在过去的4年里,Rust 被 StackOverflow 用户评选为最受喜爱的编程语言,是增长最快的编程语言之一。
Rust 像 C 一样通用和高效,但是由于它的编译器设计,Rust 比 C 安全得多。 像 C 语言一样,Rust 有一个学习曲线。 在本教程中,我将帮助您开始使用 Rust 编程语言。你可以通过在线资源,比如这本书了解更多有关 Rust 语言的信息。
安装Rust
在典型的 Linux 系统里,运行下面的指令安装 Rust 编译器和 cargo工具来创建管理。
$ sudo apt-get update $ sudo apt-get -y upgrade $ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh $ source $HOME/.cargo/env
Hello World
此演示应用程序的源代码可以点击:https://github.com/second-state/wasm-learning/blob/master/rust/hello.md
首先,让我们使用
cargo
创建一个新项目。$ cargo new hello Created binary (application) `hello` package $ cd hello
在
src/main.rs
中的main ()
函数,是执行 Rust 应用程序时的入口点。Src / main. Rs
文件内容如下。该代码只是将一个字符串“ helloworld”打印到标准输出。fn main() { println!(“Hello, world!”); }
接下来为你的机器创建二进制可执行文件。
$ cargo build --release Compiling hello v0.1.0 (/home/ubuntu/wasm-learning/rust/hello) Finished release [optimized] target(s) in 0.22s
你现在可以运行你的第一个 Rust 程序并查看 console 上的“Hello World”
$ target/release/hello Hello, world!
互动
这个演示的源代码可以在这里找到 https://github.com/second-state/wasm-learning/blob/master/rust/cli.md。
同样,让我们使用 cargo 创建一个新项目。
$ cargo new cli Created binary (application) `cli` package $ cd cli
Src / main.Rs
文件的内容如下。env::args()
会保存我们执行程序时从命令行传递的字符串值。 这里还要注意到,我们先创建一个 Rust 字符串,然后将更多的字符串引用附加给它。 为什么我们必须连接字符串引用而不是字符串值? 这就是 Rust 让程序变得安全的原因。 点击这里了解更多。use std::env; fn main() { let args: Vec<String> = env::args().collect(); println!("{}", String::from("Hello ") + &args[1]); }
接下来,为你的机器创建二维码可执行文件。
$ cargo build --release
你可以运行程序,并传入一段命令行代码
$ target/release/cli Rust Hello Rust
WebAssembly 呢?
现在我们已经了解了如何从 Rust 源代码创建本地可执行的程序。 可执行的程序只能在生成计算机上运行,可能不安全。 在接下来的教程中,将展示:
- 如何从 Rust 源代码构建 WebAssembly 字节码程序而不是本地可执行文件。
- 如何通过 web 浏览器而不是繁琐的命令行与 WebAssembly 程序进行交互。
相关阅读
-
WebAssembly 教程:如何提高浏览器的安全性
2020-05-20 05:53:54Mozilla正在使用基于WebAssembly的内存沙箱技术来提高Firefox浏览器的安全性。 称为RLBox的技术使Mozilla可以快速将Firefox组件转换为在WebAssembly沙箱中运行。 RLBox由大学研究人员开发,是用于沙盒化第三方库的...Mozilla正在使用基于WebAssembly的内存沙箱技术来提高Firefox浏览器的安全性。 称为RLBox的技术使Mozilla可以快速将Firefox组件转换为在WebAssembly沙箱中运行。
RLBox由大学研究人员开发,是用于沙盒化第三方库的工具包。 它结合了基于WebAssembly的沙箱和API,以改进现有的应用程序代码以与沙箱库进行交互。 RLBox提供的隔离计划包括在Linux上的Firefox 74和macOS上的Firefox 75中,很快将提供Windows支持。 Firefox 74和Firefox 75分别计划于3月和4月上市。
WebAssembly是一种可移植的代码格式 ,已经吸引了人们的注意,它是为Web应用程序提供近乎原生的性能的一种方式。 WebAssembly(又名Wasm)充当多种语言(包括C / C ++和Rust)的编译目标,允许这些语言在浏览器中运行。
WebAssembly沙箱背后的原理是C / C ++可以编译为Wasm代码,然后可以将其编译为主机的本机代码。 Firefox已经拥有Wasm沙箱的“核心基础结构”。 Mozilla现在计划增加其在Firefox代码库中的影响力。 最初的工作集中在对与浏览器捆绑在一起的第三方库进行沙箱处理。 该技术也将应用于第一方代码。
Wasm沙箱将加入Firefox代码库中使用的其他内存安全技术: 消除内存危害 , 以降低的特权将代码分为多个沙箱进程 ; 并用安全语言(如Rust) 重写代码 。 进程级沙箱可很好地用于大型的,预先存在的组件,但会占用大量系统资源,因此只能少量使用。
From: https://www.infoworld.com/article/3529950/mozilla-taps-webassembly-for-browser-security.html
-
5分钟实现一个简单的 WebAssembly 应用|WebAssembly 入门教程
2020-03-10 18:21:40在 Rust 中创建一个简单的 WebAssembly 应用程序,然后从 JavaScript 调用这个程序 本文所涉及的所有代码可以在 https://github.com/second-state/wasm-learning/tree/master/browser/triple 中找到。 系列教程 ...在 Rust 中创建一个简单的 WebAssembly 应用程序,然后从 JavaScript 调用这个程序
本文所涉及的所有代码可以在 https://github.com/second-state/wasm-learning/tree/master/browser/triple 中找到。
系列教程在本教程中,我们将创建一个非常简单但很完整的 WebAssembly 应用程序。
Webassembly 应用程序通常由两部分组成。
-
运行在 WebAssembly 虚拟机内部以执行计算任务的字节码程序
-
提供 UI、networking、数据库,以及调用 WebAssembly 程序以执行关键计算任务或业务逻辑的主机应用程序
在本教程中,主机应用程序是用 JavaScript 编写的,并在 web 浏览器中运行。 Webassembly 字节码程序是用 Rust 编写的。
现在,先让我们看看 Rust 程序是如何编写的。
在 Rust 中的 WebAssembly 程序
在这个例子中,Rust 程序将输入数字简单地增加了三倍并返回结果。 首先将 WebAssembly 工具安装到 Rust 编译器。
# Install Rust $ sudo apt-get update $ sudo apt-get -y upgrade $ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh $ source $HOME/.cargo/env
# Install WebAssembly tools $ rustup target add wasm32-wasi $ rustup override set nightly $ rustup target add wasm32-wasi --toolchain nightly
接下来,创建一个新的
cargo
项目。
由于这个程序是从主机应用程序调用的,而不是作为独立的可执行文件运行,因此我们将创建一个lib
项目。$ cargo new --lib triple $ cd triple
编辑
Cargo.toml
文件以添加[lib]
节。 它会告诉编译器在哪里可以找到库的源代码,以及如何生成字节码输出。[lib] name = "triple_lib" path = "src/lib.rs" crate-type =["cdylib"]
下面是 Rust 程序
src/lib.rs
的内容. 实际上,你可以在这个库文件中定义多个外部函数,并且所有这些函数都可以通过 WebAssembly 在 JaveScript 主机上使用。#[no_mangle] pub extern fn triple(x: i32) -> i32 { return 3 * x; }
接下来你可以用下面的命令行编译 Rust 的源代码到WebAssembly的字节码中。
$ cargo +nightly build --target wasm32-wasi --release
WebAssembly 字节码文件是
target/wasm32-wasi/release/triple_lib.wasm
JavaScript 主机
我们使用 JavaScript 加载 WebAssembly 字节码程序并调用它的函数。 由于大多数浏览器已经支持 WebAssembly, JavaScript 实际上可以作为一个网页运行。
无须赘述,下面是 JavaScript 模块的相关部分,用于加载、导出和调用 WebAssembly 函数。 完整的网页源文件在这里。
<script> if (!('WebAssembly' in window)) { alert('you need a browser with wasm support enabled :('); } (async () => { const response = await fetch('triple_lib.wasm'); const buffer = await response.arrayBuffer(); const module = await WebAssembly.compile(buffer); const instance = await WebAssembly.instantiate(module); const exports = instance.exports; const triple = exports.triple; var buttonOne = document.getElementById('buttonOne'); buttonOne.value = 'Triple the number'; buttonOne.addEventListener('click', function() { var input = $("#numberInput").val(); alert(input + ' tripled equals ' + triple(input)); }, false); })(); </script>
可以看到 JavaScript 代码加载了 WebAssembly 虚拟机的
triple_lib.wasm
文件, 导出其外部函数,然后根据需要调用这些函数。将这个 HTML 文件和
triple_lib.wasm
文件放在web 服务器上,你就可以访问网页,在网页上输入的任何数字会自动乘以三。那么字符串呢
现在你注意到了,这个例子并不是一个 hello world。 WebAssembly函数计算数字,但不会像 hello world 那样操作字符串。
这是为什么呢? 我们将在下一个教程中回答这个问题,并给出一个真实的 hello world 示例。
-
-
从 node.js Web 应用中调用 WebAssembly 函数 | WebAssembly 入门教程
2020-03-20 20:33:08文中所有的代码都可以在 ...在之前的教程中,我们讨论了如何从 Web 浏览器中的 JavaScript 应用程序访问 WebAssembly 函数。 WebAssembly 快问快答 Rust 的 Hello world | WebAssembl...文中所有的代码都可以在 https://github.com/second-state/wasm-learning/tree/master/nodejs/hello 中找到
在之前的教程中,我们讨论了如何从 Web 浏览器中的 JavaScript 应用程序访问 WebAssembly 函数。
- WebAssembly 快问快答
- Rust 的 Hello world | WebAssembly 入门教程
- 5分钟实现一个简单的 WebAssembly 应用|WebAssembly 入门教程
- 如何将字符串从 JavaScript 传入 Wasm/Rust | WebAssembly 入门教程
然而,或许你已经注意到,服务器端的 WebAssembly 有很多很好的用例,尤其是人工智能、区块链和大数据应用方向。
在这个例子中,将展示如何将 Rust 中编写的 WebAssembly 函数集成到服务器上的 node.js 应用程序中。
我们以微服务的方式提供 WebAssembly 函数。
演示应用程序的结构如下:
- 主机应用程序是一个用 JavaScript 编写的 node.js web 应用程序,调用 WebAssembly 函数
- WebAssembly 字节码程序是用 Rust 编写的,由 node.js 的 web 应用程序调用。
[查看源代码和教程]((https://github.com/second-state/wasm-learning/blob/master/nodejs/hello.md)
设置
与前面的教程一样,我们使用
wasm-pack
工具编译 Rust 源代码并生成相应的 JavaScript 模块。这种模块使得在 JavaScript 和 Rust 函数之间传递复杂的动态数据变得非常容易。想要深入了解的同学,可以阅读《WebAssembly 中的字符串》。接下来,按照下面的步骤安装Rust和wasm-pack 工具。
# Install Rust $ sudo apt-get update $ sudo apt-get -y upgrade $ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh $ source $HOME/.cargo/env # Install wasm-pack tools $ curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
Rust 写的 WebAssembly 程序
在这个示例中,Rust 程序在“hello” 后面追加输入字符串。
创建一个新的
cargo
项目。注意:由于这个程序是从主机应用程序调用的,而不是作为独立的可执行文件运行,因此我们将创建一个
hello
项目。··· $ cargo new --lib hello $ cd hello
编辑
Cargo.toml
文件添加[lib]
部分. 它告诉编译器在哪能找到库的源代码,以及如何生成字节码输出。同时,我们也需要在这添加wasm-bindgen
的依赖项。这是使用wasm-pack
的用途,生成绑定 JavaScript 的 rust webassembly程序[lib] name = "hello_lib" path = "src/lib.rs" crate-type =["cdylib"] [dependencies] wasm-bindgen = "0.2.50"
下面是Rust 程序
src/lib.rs
的内容。实际上,我们可以在这个库文件中定义多个外部函数,并且所有这些函数都可以通过 WebAssembly 在主机 JavaScript 应用程序中使用。use wasm_bindgen::prelude::*; #[wasm_bindgen] pub fn say(s: String) -> String { let r = String::from("hello "); return r + &s; }
接下来,您可以将 Rust 源代码编译成 WebAssembly 字节码,并为 node.js 主机环境生成相应的 JavaScript 模块。
$ wasm-pack build --target nodejs
结果是以下三个文件.
.wasm
文件是 WebAssembly 字节码程序;
.js
文件用于 JavaScript 模块;Pkg / hello lib bg. wasm Pkg / hello lib bg. js Pkg / hello lib.js
Node.Js 主机应用程序
接下来,让我们为 node.js web 应用程序创建一个节点文件夹,复制生成的 JavaScript 模块文件。
$mkdir node $cp pkg / hello lib bg. wasm node / $cp pkg / hello lib bg. js node / $cp pkg / hello lib.js node /
使用生成的
hello_lib.js
, 在 JavaScript 中调用 WebAssembly 函数是非常容易的。下面是节点应用程序
app.js
。 它只是从生成的模块中导入say ()
函数。 节点应用程序从传入的 httpget 请求中获取name
参数,并用“ helloname
”进行响应。const { say } = require('./hello_lib.js'); const http = require('http'); const url = require('url'); const hostname = '127.0.0.1'; const port = 8080; const server = http.createServer((req, res) => { const queryObject = url.parse(req.url,true).query; res.statusCode = 200; res.setHeader('Content-Type', 'text/plain'); res.end(say(queryObject['name'])); }); server.listen(port, hostname, () => { console.log(`Server running at http://${hostname}:${port}/`); });
按照以下方式启动 node.js 应用服务器。
$ node app.js Server running at http://127.0.0.1:8080/
然后,就可以测试了。
$ curl http://127.0.0.1:8080/?name=Wasm hello Wasm
下一步是什么呢?
现在 Web 服务可以将计算量大、不安全和新颖的硬件访问任务转移到 WebAssembly 中。 我相信,将有更多用例将会出现。 敬请期待!
-
js怎么调用wasm_从 node.js Web 应用中调用 WebAssembly 函数 | WebAssembly 入门教程
2020-12-24 13:43:48在之前的教程中,我们讨论了如何从 Web 浏览器中的 JavaScript 应用程序访问 WebAssembly 函数。然而,或许你已经注意到,服务器端的 WebAssembly 有很多很好的用例,尤其是人工智能、区块链和大数据应用方向。在这... -
qt for webassembly环境搭建图文教程
2021-01-22 15:55:11从Qt5.14开始,官方的在线安装提供了qt for webassembly构建套件,这对很多小白来说绝对是个好消息,也绝对是个好东西,好消息是不用再去交叉编译自己生成qt for webassembly的qt库,在线安装版本直接就给你安装好,... -
可能是世界上最简单的用 Go 来写 WebAssembly 的教程
2020-06-28 18:00:00原标题:The world’s easiest introduction to WebAssembly???? 原文链接:The world’s easiest introduction... -
js怎么调用wasm_从 node.js Web应用中调用 WASM 函数 | WebAssembly 入门教程
2021-01-10 04:26:45文中所有的代码都可以在 https://github.com/second-state/wasm-learning/tree/master/nodejs/hello 中找到在之前的教程中,我们讨论了如何从 Web 浏览器中的 JavaScript 应用程序访问 WebAssembly 函数。... -
用Go来开发WebAssembly入门(1)
2021-01-06 15:50:47欢迎来到WebAssembly教程系列的第一篇。 WebAssembly是什么? JavaScript已成为浏览器可以理解的唯一语言。它经历了时间的考验,可以满足大多数web应用的性能需求。但是,当遇到3D游戏、VR、AR以及图像编辑等应用... -
用Go来开发WebAssembly入门(2)
2021-01-07 09:38:29欢迎来到WebAssembly教程系列的第二篇。 在本教程系列的第一篇中,我们用Go创建并暴露了一个函数给JavaScript来调用。如果你还没有看过第一篇,强烈建议先看一下再回来。 在本篇中,我们将为我们的应用开发一个UI... -
WebAssembly体验之编码base64(AssemblyScript使用教程)
2020-11-29 06:11:21WebAssembly 不用多说懂的都懂,将运算函数通过 c++ 等编译为二进制的 .wasm 文件后,再通过 JavaScript 的 WebAssembly Api 调用即可进行光速计算。 下面快速上手体验一把,不使用 c++ 等编译 .wasm 文件。 ... -
qt界面嵌入web_使用Qt WebAssembly而不是JavaScript创建Web用户界面
2020-07-15 12:25:19qt界面嵌入web 当我第一次听说WebAssembly以及使用Qt创建Web用户界面的可能性时(就像在... 因此,这个最小化,简单易懂的WebAssembly教程在后端使用Python,在前端使用C ++ Qt WebAssembly。 它针对像我一样不熟悉... -
Emscripten编译器安装教程,亲测成功编译出第一个WebAssembly
2018-04-06 04:37:32javascript 这门语言的性能无法与原生的C/C++代码相媲美,为了进一步提高网页的性能,业界推出了WebAssembly技术:将C语言编译成了浏览器可以执行的wasm文件。WebAssembly不仅提高了网页的性能,而且还可以完成原来... -
QT for webassembly 技术探索
2018-09-14 14:21:03前几日,接到上级任务——在不改动C++客户端的基础上,实现在浏览器中打开C++客户端,...在下查资料时,不禁感叹教程寥寥,故作此文供大家参考。 1.技术简介 首先介绍一下webassembly技术,官网的解释为:WebAss... -
WebAssembly及其 API 的完整介绍
2020-11-05 07:58:09优质视频教程福利一:http://www.longstudy.club/tuiguan/js.html 服务器如何搭建博客:http://www.longstudy.club/tuiguan/t1/index.html 点赞再看,微信搜索 【大迁世界】 关注这个没有大厂背景,但有着一股向上... -
Webassembly 学习1 -- 环境搭建
2021-01-07 16:41:00最近一直在捣鼓webassembly 的东西,趁着还有个印象,赶紧记下来。 老规矩,上官网,https://emscripten.org/,按照官网教程一步步来(强烈建议挂梯子)。 git clone ... -
WebAssembly编程实践(1.1)安装Emscripten
2018-11-02 20:41:14说明:从今天开始,本订阅号开始转载《C/C++面向wasm编程——Emscripten工程实践》系列教程(名字太长,转载以《WebAssembly编程实践》为题)。本教程原文地址:htt... -
前端每周清单半年盘点之 WebAssembly 篇
2017-09-14 11:30:09前端每周清单专注前端领域内容,以对外文资料的搜集...本文则是对于半年来发布的前端每周清单中的 WebAssembly 相关的教程实践与开源项目的盘点,可以查看这里获得往期清单或者其他盘点篇。 教程实践 《对比探秘 W...