精华内容
下载资源
问答
  • 在上一篇文章里,我们介绍了学习 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 程序进行交互。

    相关阅读

    展开全文
  • Mozilla正在使用基于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

    展开全文
  • 在 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 入门教程
    系列教程

    1. WebAssembly 快问快答
    2. Rust 的 Hello world

    在本教程中,我们将创建一个非常简单但很完整的 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 示例。

    展开全文
  • 文中所有的代码都可以在 ...在之前的教程中,我们讨论了如何从 Web 浏览器中的 JavaScript 应用程序访问 WebAssembly 函数。 WebAssembly 快问快答 Rust 的 Hello world | WebAssembl...

    node.js + WebAssembly

    文中所有的代码都可以在 https://github.com/second-state/wasm-learning/tree/master/nodejs/hello 中找到

    在之前的教程中,我们讨论了如何从 Web 浏览器中的 JavaScript 应用程序访问 WebAssembly 函数。

    1. WebAssembly 快问快答
    2. Rust 的 Hello world | WebAssembly 入门教程
    3. 5分钟实现一个简单的 WebAssembly 应用|WebAssembly 入门教程
    4. 如何将字符串从 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 参数,并用“ hello name”进行响应。

    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 中。 我相信,将有更多用例将会出现。 敬请期待!

    展开全文
  • 在之前的教程中,我们讨论了如何从 Web 浏览器中的 JavaScript 应用程序访问 WebAssembly 函数。然而,或许你已经注意到,服务器端的 WebAssembly 有很多很好的用例,尤其是人工智能、区块链和大数据应用方向。在这...
  • qt for webassembly环境搭建图文教程

    千次阅读 2021-01-22 15:55:11
    从Qt5.14开始,官方的在线安装提供了qt for webassembly构建套件,这对很多小白来说绝对是个好消息,也绝对是个好东西,好消息是不用再去交叉编译自己生成qt for webassembly的qt库,在线安装版本直接就给你安装好,...
  • 原标题:The world’s easiest introduction to WebAssembly???? 原文链接:The world’s easiest introduction...
  • 文中所有的代码都可以在 https://github.com/second-state/wasm-learning/tree/master/nodejs/hello 中找到在之前的教程中,我们讨论了如何从 Web 浏览器中的 JavaScript 应用程序访问 WebAssembly 函数。...
  • 欢迎来到WebAssembly教程系列的第一篇。 WebAssembly是什么? JavaScript已成为浏览器可以理解的唯一语言。它经历了时间的考验,可以满足大多数web应用的性能需求。但是,当遇到3D游戏、VR、AR以及图像编辑等应用...
  • 欢迎来到WebAssembly教程系列的第二篇。 在本教程系列的第一篇中,我们用Go创建并暴露了一个函数给JavaScript来调用。如果你还没有看过第一篇,强烈建议先看一下再回来。 在本篇中,我们将为我们的应用开发一个UI...
  • WebAssembly 不用多说懂的都懂,将运算函数通过 c++ 等编译为二进制的 .wasm 文件后,再通过 JavaScript 的 WebAssembly Api 调用即可进行光速计算。 下面快速上手体验一把,不使用 c++ 等编译 .wasm 文件。 ...
  • qt界面嵌入web 当我第一次听说WebAssembly以及使用Qt创建Web用户界面的可能性时(就像在... 因此,这个最小化,简单易懂的WebAssembly教程在后端使用Python,在前端使用C ++ Qt WebAssembly。 它针对像我一样不熟悉...
  • javascript 这门语言的性能无法与原生的C/C++代码相媲美,为了进一步提高网页的性能,业界推出了WebAssembly技术:将C语言编译成了浏览器可以执行的wasm文件。WebAssembly不仅提高了网页的性能,而且还可以完成原来...
  • QT for webassembly 技术探索

    万次阅读 热门讨论 2018-09-14 14:21:03
    前几日,接到上级任务——在不改动C++客户端的基础上,实现在浏览器中打开C++客户端,...在下查资料时,不禁感叹教程寥寥,故作此文供大家参考。 1.技术简介  首先介绍一下webassembly技术,官网的解释为:WebAss...
  • 优质视频教程福利一:http://www.longstudy.club/tuiguan/js.html 服务器如何搭建博客:http://www.longstudy.club/tuiguan/t1/index.html 点赞再看,微信搜索 【大迁世界】 关注这个没有大厂背景,但有着一股向上...
  • 最近一直在捣鼓webassembly 的东西,趁着还有个印象,赶紧记下来。 老规矩,上官网,https://emscripten.org/,按照官网教程一步步来(强烈建议挂梯子)。 git clone ...
  • 说明:从今天开始,本订阅号开始转载《C/C++面向wasm编程——Emscripten工程实践》系列教程(名字太长,转载以《WebAssembly编程实践》为题)。本教程原文地址:htt...
  • 前端每周清单专注前端领域内容,以对外文资料的搜集...本文则是对于半年来发布的前端每周清单中的 WebAssembly 相关的教程实践与开源项目的盘点,可以查看这里获得往期清单或者其他盘点篇。 教程实践 《对比探秘 W...

空空如也

空空如也

1 2 3 4
收藏数 77
精华内容 30
关键字:

webassembly教程