zoukankan      html  css  js  c++  java
  • 尝试 WebAssembly

    wasm 为浏览器应用开辟了一个全新的领域。意义非凡,并不是一句两句说的清的,今天正好有点空做些实验。

    1. emsdk 的安装

    Emscripten 可以直接将 C/C++ 编译为 wasm,让用 C 写的代码可以在浏览器中运行,还是看不见代码那种 :)

    没有过多纠结他怎么打包的,反正直接从 github 上下了最新的源码包过来就可以用了:

    download emsdk-master.zip

    unzip emsdk-master.zip

    cd emsdk-master

    ( emsdk-master update )

    emsdk install latest

    emsdk activate latest

    然后添加 emsdk 的环境变量,我这里直接追加在了 ~/.bashrc 的最后:

    . (前面解压的路径)/emsdk-master/emsdk_env.sh

    或者你可以把 env.sh 里面的内容直接拷贝到 .bashrc 里面去。

    ------

    到此 emsdk 安装完成。

    ------

    如果中间出什么问题,估计是你系统的编译工具啥的安装不完整导致的:

    sudo apt update
    sudo apt install python2.7 nodejs build-essential cmake git-core default-jre

    2. hello_world.html

    是的,emsdk 支持直接把你的 C 代码编译成一个 html 文件。主要是因为 wasm 没法直接在浏览器运行,需要 js 将其载入,再调用啥的。直接使用官方的编译为 *.html 的方法,可以降低入门门槛。

    使用的 C 代码:

    #include <stdio.h>
    int main(int argc, char ** argv) {
      printf("Hello, world!
    ");
    }

    编译指令:

    emcc hello.c -o hello.html

    因为这里没法直接点解 hello.html 来运行 wasm,所以,需要起个 web 服务器。所幸是 emsdk 还带了个服务器:

    emrun --no_browser --port 8800 .

    或者你也可以直接使用 python3 的 web 服务器:

    python3 -m http.server 8800

    然后,在你的浏览器里面就可以看到这结果了。

    2. 自己写加载器

    官方的这个 html 真的是有点丑,我们也可以自己写个加载器,将 wasm 中的函数加载过来。

    测试的 C 函数:

     1 int fib(int n) {
      2     int i;
      3     int t;
      4     int a = 0;
      5     int b = 1;
      6 
      7     for(i = 0; i < n; i++) {
      8         t = a + b;
      9         a = b;
     10         b = t;
     11     }
     12 
     13     return b;
     14 }

    将其编译为 wasm 模块(别问我为什么,官方说的,我也没研究为啥):

    emcc fib.c -Os -s WASM=1 -s SIDE_MODULE=1 -o fib.wasm

    然后我们就可以自己写个网页来加载它了:

    <html>
    <body>
      <script>
        fetch('fib.wasm').then(response =>
          response.arrayBuffer()
        ).then(bytes =>
          WebAssembly.instantiate(bytes, {imports: {}})
        ).then(results => {
          window.fib = results.instance.exports.fib;
        });
      </script>
    </body>
    </html>

    开启 web 服务器,然后打开浏览器试试看。

    因为上面的代码只是引入 wasm 中的函数到 javascript,所以我们要执行这个函数需要打开调试 console:

  • 相关阅读:
    ASP.NET MVC 5
    Web Components是不是Web的未来
    如何选择高性价比的控件产品
    ASP.NET MVC 5
    ubuntu系统安装
    Ubuntu linux安装完成后隐藏linux磁盘挂载点
    win10 查看本机的激活秘钥
    windows cmd下列出当前目录下的所有文件
    error LNK2005: “找到一个或多个多重定义的符号” 已经在 xxxx.obj 中定义 的解决方法
    架构设计:负载均衡层设计方案(3)——Nginx进阶
  • 原文地址:https://www.cnblogs.com/pied/p/11819291.html
Copyright © 2011-2022 走看看