美文网首页
WebAssembly入门

WebAssembly入门

作者: 豪爵吸金ing | 来源:发表于2020-11-24 16:10 被阅读0次

    1.首先科学online,运行以下命令安装wasm

    # 下载Emscripten源码
    git clone https://github.com/juj/emsdk.git
    cd emsdk
    
    # 安装最新版本
    ./emsdk install latest
    
    # 使用最新版本
    ./emsdk activate latest
    
    # 添加环境变量
    source ./emsdk_env.sh
    

    2.HelloWorld
    写个HelloWorld:

    #include <stdio.h>
    int main(int argc, char** argv) {
        printf("Hello World!\n");
        return 0;
    }
    

    用下面的命令编译:

    注:最新版本的Emscripten默认就会生成.wasm,不需要像以前那样指定“-s WASM=1”了

    emcc hello.c -o index.html
    
    

    编译后的目录文件结构如下:


    需要注意的是,生成的index.html直接双击打开是无法运行的,必须运行一个本地的HTTP服务器。通过下面的命令安装http-server:

    npm install http-server -g
    
    

    然后,在当前目录下直接运行HTTP服务器:


    最后通过URL访问该网页:http://127.0.0.1:8080/index.html


    当然,如果你想把网页搞得更漂亮一点,还可以自定义HTML模版,在emsdk目录中有一个最小版本的HTML模版shell_minimal.html,可以在这个基础上进行修改,然后用下面的命令编译:
    emcc hello.c -o index.html --shell-file shell_minimal.html
    
    

    3.C代码调用Javascript

    C代码里可以通过Emscripten中的EM_ASM这个宏调用Javascript代码,注意Javascript代码要放进大括号里。我们把上面的代码改一改,让它蹦一个弹窗:

    #include <stdio.h>
    #include <emscripten.h>
    
    int main(int argc, char** argv) {
        EM_ASM({ alert("Hello!"); });
        return 0;
    }
    
    

    重新编译、运行的结果如下:


    如果运行后发现代码修改没有生效,清理一下浏览器的缓存再重新加载。

    4.Javascript调用C代码

    Javascript也可以直接调用WebAssembly中定义的函数,需要使用Emscripten中的ccall()函数以及EMSCRIPTEN_KEEPALIVE声明(将你的函数添加到导出的函数列表中,默认只导出main())。

    我们在前面的代码中增加一个自定义函数:

    #include <stdio.h>
    #include <emscripten.h>
    
    void EMSCRIPTEN_KEEPALIVE myFunction() {
        printf("Good Morning!\n");
    }
    
    int main(int argc, char** argv) {
        printf("Hello World!\n");
        return 0;
    }
    
    

    编译的时候要注意,由于ccall()函数默认是不导出的,需要加上一个编译选项:

    emcc hello.c -o index.html -s EXTRA_EXPORTED_RUNTIME_METHODS='["ccall"]'
    
    

    然后在生成的index.html中添加一个按钮,用来调用我们的自定义函数:

    <button class="mybutton">Run myFunction</button>
    
    

    最后在</script>标签之前添加以下代码,响应按钮点击事件:

    document.querySelector('.mybutton').addEventListener('click', function(){
      var result = Module.ccall('myFunction', // name of C function 
                                 null, // return type
                                 null, // argument types
                                 null); // arguments
    });
    
    

    最终运行结果:


    5.加入source-map调试

    还是上面的demo,执行以下命令

    emcc hello.c -o index2.html -s EXTRA_EXPORTED_RUNTIME_METHODS='["ccall"]' -g4 --source-map-base http://172.16.2.16:8080/ 
    

    注意source-map-base后面url最后一个字符必须为/
    然后在生成的index.html中添加一个按钮,用来调用我们的自定义函数:

    <button class="mybutton">Run myFunction</button>
    
    

    最后在</script>标签之前添加以下代码,响应按钮点击事件:

    document.querySelector('.mybutton').addEventListener('click', function(){
      var result = Module.ccall('myFunction', // name of C function 
                                 null, // return type
                                 null, // argument types
                                 null); // arguments
    });
    
    

    启动http-server后chrome打开页面,如下图,我们可以在前端看到c++代码,和运行堆栈,但是不能获取某个变量值,后续知道方法后回来结贴。


    本文参考 https://blog.csdn.net/turkeycock/article/details/83317935

    如果你也在研究WebAssembly技术,可以加我微信,EagleAndy,备注“wasm”,拉你入群,一起学习进步。
    也可以加入slack在线聊天室,一起聊聊wasm!


    相关文章

      网友评论

          本文标题:WebAssembly入门

          本文链接:https://www.haomeiwen.com/subject/qyniiktx.html