• 首页
  • 云服务器
  • 虚拟主机
  • 物理服务器
  • 大带宽
  • 跨境电商
  • 保障
    信任中心 >>
    • 基础设施与网络
    • 服务保障能力
    • 数据安全
    • 合规资质
    数据中心 >>
    • 中国洛阳国际数据中心
    • 中国香港多线数据中心
    VIP会员服务 >>
    • 7*24小时服务支持
    • 0元快速备案
    • 100倍故障赔偿
    • 5天无理由退款
会员登录 免费注册

帮助中心 / 怎么在WebAssembly中写 “Hello World”

怎么在WebAssembly中写 “Hello World”



来源:辰迅云编辑:chenxun时间:2021-06-14 23:03:32



这篇文章主要介绍了怎么在WebAssembly中写 “Hello World”,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

通过这个分步教程,开始用人类可读的文本编写 WebAssembly。

WebAssembly 是一种字节码格式,几乎所有的浏览器 都可以将它编译成其宿主操作系统的机器代码。除了  JavaScript 和 WebGL 之外,WebAssembly 还满足了将应用移植到浏览器中以实现平台独立的需求。作为 C++ 和  Rust 的编译目标,WebAssembly 使 Web 浏览器能够以接近原生的速度执行代码。

当谈论 WebAssembly 应用时,你必须区分三种状态:

  1. 源码(如 C++ 或 Rust): 你有一个用兼容语言编写的应用,你想把它在浏览器中执行。

  2. WebAssembly 字节码: 你选择 WebAssembly 字节码作为编译目标。最后,你得到一个 .wasm 文件。

  3. 机器码(opcode): 浏览器加载 .wasm 文件,并将其编译成主机系统的相应机器码。

WebAssembly 还有一种文本格式,用人类可读的文本表示二进制格式。为了简单起见,我将其称为 WASM-text。WASM-text 可以比作高级汇编语言。当然,你不会基于 WASM-text 来编写一个完整的应用,但了解它的底层工作原理是很好的(特别是对于调试和性能优化)。

本文将指导你在 WASM-text 中创建经典的 “Hello World” 程序。

创建 .wat 文件

WASM-text 文件通常以 .wat 结尾。第一步创建一个名为 helloworld.wat 的空文本文件,用你最喜欢的文本编辑器打开它,然后粘贴进去:

(module    ;; 从 JavaScript 命名空间导入    (import  "console"  "log" (func  $log (param  i32  i32))) ;; 导入 log 函数    (import  "js"  "mem" (memory  1)) ;; 导入 1 页 内存(64kb)       ;; 我们的模块的数据段    (data (i32.const 0) "Hello World from WebAssembly!")       ;; 函数声明:导出 helloWorld(),无参数    (func (export  "helloWorld")        i32.const 0  ;; 传递偏移 0 到 log        i32.const 29  ;; 传递长度 29 到 log(示例文本的字符串长度)        call  $log        ))

WASM-text 格式是基于 S 表达式的。为了实现交互,JavaScript 函数用 import 语句导入,WebAssembly 函数用 export 语句导出。在这个例子中,从 console 模块中导入 log 函数,它需要两个类型为 i32 的参数作为输入,以及一页内存(64KB)来存储字符串。

字符串将被写入偏移量 为 0 的数据段。数据段是你的内存的叠加投影overlay,内存是在 JavaScript 部分分配的。

函数用关键字 func 标记。当进入函数时,栈是空的。在调用另一个函数之前,函数参数会被压入栈中(这里是偏移量和长度)(见 call $log)。当一个函数返回一个 f32 类型时(例如),当离开函数时,一个 f32 变量必须保留在栈中(但在本例中不是这样)。

创建 .wasm 文件

WASM-text 和 WebAssembly 字节码是 1:1 对应的,这意味着你可以将 WASM-text 转换成字节码(反之亦然)。你已经有了 WASM-text,现在将创建字节码。

转换可以通过 WebAssembly Binary Toolkit(WABT)来完成。从该链接克隆仓库,并按照安装说明进行安装。

建立工具链后,打开控制台并输入以下内容,将 WASM-text 转换为字节码:

wat2wasm helloworld.wat -o helloworld.wasm

你也可以用以下方法将字节码转换为 WASM-text:

wasm2wat helloworld.wasm -o helloworld_reverse.wat

一个从 .wasm 文件创建的 .wat 文件不包括任何函数或参数名称。默认情况下,WebAssembly 用它们的索引来识别函数和参数。

编译 .wasm 文件

目前,WebAssembly 只与 JavaScript 共存,所以你必须编写一个简短的脚本来加载和编译 .wasm 文件并进行函数调用。你还需要在 WebAssembly 模块中定义你要导入的函数。

创建一个空的文本文件,并将其命名为 helloworld.html,然后打开你喜欢的文本编辑器并粘贴进去:

<!DOCTYPE  html><html>  <head>    <meta  charset="utf-8">    <title>Simple template</title>  </head>  <body>    <script>         var memory = new  WebAssembly.Memory({initial:1});       function  consoleLogString(offset, length) {        var  bytes = new  Uint8Array(memory.buffer, offset, length);        var  string = new  TextDecoder('utf8').decode(bytes);        console.log(string);      };       var  importObject = {        console: {          log:  consoleLogString        },        js : {          mem:  memory        }      };           WebAssembly.instantiateStreaming(fetch('helloworld.wasm'), importObject)      .then(obj  => {        obj.instance.exports.helloWorld();      });         </script>  </body></html>

WebAssembly.Memory(...) 方法返回一个大小为 64KB 的内存页。函数 consoleLogString 根据长度和偏移量从该内存页读取一个字符串。这两个对象作为 importObject 的一部分传递给你的 WebAssembly 模块。

在你运行这个例子之前,你可能必须允许 Firefox 从这个目录中访问文件,在地址栏输入 about:config,并将 privacy.file_unique_origin 设置为 true:

怎么在WebAssembly中写 “Hello World”

Firefox setting

注意: 这样做会使你容易受到 CVE-2019-11730 安全问题的影响。

现在,在 Firefox 中打开 helloworld.html,按下 Ctrl+K 打开开发者控制台。

怎么在WebAssembly中写 “Hello World”

Debugger output

感谢你能够认真阅读完这篇文章,希望小编分享的“怎么在WebAssembly中写 “Hello World””这篇文章对大家有帮助,同时也希望大家多多支持辰讯云,关注辰讯云资讯频道,更多相关知识等着你来学习!






上一篇:Netty中异步模型的示例分析
下一篇:Linux中SYN攻击的原理是什么
相关阅读
  • ●香港服务器 CN2 中国直连线路是什么
  • ●测试新闻11111111
  • ●香港云服务器如何扩展你的IT基础架构
  • ●香港服务器IP地址更换注意事项
  • ●javascript中如何保留两位小数
  • ●国外云服务器建站选择哪个好?
  • ●香港服务器租用的关键:速度和性能
  • ●香港服务器怎样买?如何选择香港服务器
  • ●layui中如何设置checkbox勾选
  • ●C语言中怎么定义一个常量

    帮助中心

  • 云服务器类
  • 域名类
  • 虚拟主机类
  • 独立服务器
  • 付款类
  • 其他类
标签云
  • 香港服务器
  • 高防服务器
  • 海外服务器

现在注册,即刻为您提供最佳上云实践机会

立即注册
辰迅云

400-0666-318 (7*24小时热线)

Copyright 2013 - chenxunyun.com. All RightsReserved. 辰迅云 版权所有
  • 关于辰迅云

    关于我们 发展历程 资质荣誉 新闻公告 诚聘英才 联系我们
  • 辰迅云产品

    云服务器 服务器托管 服务器租用 >
  • 服务与支持

    域名知识 云服务器问题 SSL证书问题 虚拟主机问题 租用托管 网站备案问题
  • 快速通道

    独立控制面板 忘记密码
乐创云 ASP300源码 whmcs之家
  • 工信部备案号沪ICP备20007084号
  • 《中华人民共和国增值电信业务经营许可证》编号: B1-20194590号

在线客服

电话咨询

微信客服