您当前的位置:首页 > 计算机 > 编程开发 > WebAssembly

WASM 初体验: Hello, World

时间:09-28来源:作者:点击数:

JavaScript 又迎来了新的对手:WASM。

这一次,JavaScript会被取代吗?

从JavaScript的历史来看,恐怕不会……

不过,了解一下WASM倒是未尝不可。

官方网站:https://webassembly.org/

最近,在MacOS上尝试了一下WASM。

官方上手教程:https://webassembly.org/getting-started/developers-guide/

1. 安装emsdk

emsdk = Emscripten SDK,是一个工具库,用来编译输出wasm。

mac上安装非常简单:

$ git clone https://github.com/emscripten-core/emsdk.git
$ cd emsdk
$ ./emsdk install latest
$ ./emsdk activate latest

2. 设置环境变量

完成后,设置一下环境变量。

$ source ./emsdk_env.sh --build=Release

3. Hello,World

  1. 用c语言写一个Hello World,然后编译成wasm
$ mkdir hello
$ cd hello
$ cat << EOF > hello.c
#include <stdio.h>
int main(int argc, char ** argv) {
  printf("Hello, world!\n");
}
EOF
  1. 用emcc编译输出为 hello.html
$ emcc hello.c -o hello.html

这会在当前目录下生成3个文件

  • hello.html
  • hello.js
  • hello.wasm
wasm_compile_result
  1. 运行

注意:如果直接用浏览器打开hello.html的话,会无法正常运行。

官方说法
Finally, to actually run the program, we cannot simply open the HTML file in a web browser because cross-origin requests are not supported for the file protocol scheme. We have to actually serve the output files over HTTP.

wasm_html_downloading
wasm_html_downloading.png_error

正确的姿势是启动一个web server。

如果你没有自己的webserver,emsdk已经集成了这个服务,方便测试。

命令

$ emrun --no_browser --port 8080 .

看到这个输出,就表示一切正常了。

wasm_emrun_web_service

然后用浏览器打开:

wasm_html_view_correct

4. 如果你想看看编译结果的话...

hello.html

wasm_hello_html

hello.js

wasm_hello_js

hello.wasm

wasm_hello_wasm
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
上一篇:智能合约WASM语言 概述 下一篇:很抱歉没有了
推荐内容
相关内容
栏目更新
栏目热门