WebAssembly第三章 JavaScript调用C\C++

• 系列文章目录
• 前言
• 我的环境
• 一、码代码
• • JavaScript载入并运行WASM
  • • 目标
    • 先用C++写个hello world
    • 编译
    • 游览器查看结果
  • JavaScript调用C++函数
  • • C++代码
    • 编译sayhello.cpp
    • 编辑helloworld2.html
    • • ccall函数签名

      本篇是WebAssembly系列文章的第三章，我会在本文介绍在几个常用场景下JavaScript调用C++函数所需要用到的操作步骤，编译命令，和具体的代码。

      组件	版本
      CentOS	7
      Docker	20.10.7
      emscripten/emsdk	3.1.14
      nginx	1.18.0
      chrome	102.0.5005.115

      一、码代码

      JavaScript载入并运行WASM

      在Emscripten提供的迷你HTML模板页面上通过运行C++生成的wasm显示helloworld字样。
      载入wasm的话，如果源文件有main函数就会自动运行。

      先用C++写个hello world

      sayhello.cpp

      #include <stdio.h>
      #include <iostream>
      using namespace std;
      int main(int argc, char ** argv) {
        printf("我是printf: Hello World\n");
        cout<<"我是C++的cout "<<"你好，世界"<<endl;
      return 0;
       docker run --rm -v $(pwd):/src -u $(id -u):$(id -g)   emscripten/emsdk emcc sayhello.cpp -s WASM=1  --shell-file templates/shell_minimal.html -o helloworld.html
      将生成的js，wasm，html文件发布到部署到web服务器。
       
      游览器查看结果
       
      JavaScript调用C++函数
       
      这里我们用C++写一个无参函数和一个有两个参数的函数，来展示下如果在JavaScript端使用它们。
       
      C++代码
       
      代码如下（示例）：
       sayhello.cpp
       
      #include <stdio.h>
      #include <iostream>
      #include <emscripten/emscripten.h>
      using namespace std;
      int main(int argc, char ** argv) {
        printf("我是printf: Hello World\n");
        cout<<"我是C++的cout "<<"你好，世界"<<endl;
      return 0;
      #ifdef __cplusplus
      extern "C" {
      #endif
      void EMSCRIPTEN_KEEPALIVE myFunc1()
        printf("我的函数已被调用\n");
        return;
      int EMSCRIPTEN_KEEPALIVE myFunc2(int a, int b)
        printf("a+b=%d\n", a+b);
        return a+b;
      #ifdef __cplusplus
      #endif
      __cplusplus用于探测是否C++环境
       EMSCRIPTEN_KEEPALIVE是Emscripten特有的宏，用于告知编译器后续函数在优化时必须保留，并且该函数将被导出至JavaScript
       
      编译sayhello.cpp
       
      docker run --rm -v $(pwd):/src -u $(id -u):$(id -g)   emscripten/emsdk emcc --std=c++11 sayhello.cpp -s WASM=1 -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall']" --shell-file templates/shell_minimal.html -o helloworld2.html
      编辑helloworld2.html
       
      给页面增加个按钮来手动触发调用函数。
       在body标签内加入
       
      <button class="mybutton">运行我的函数</button>
      在script段加入按钮click事件监听。
       
      document.querySelector('.mybutton').addEventListener('click', function(){
        alert('检查控制台');
        var result = Module.ccall('myFunc1', // name of C function
                                   null, // return type
                                   null, // argument types
                                   null); // arguments
        let myfuncResult = Module.ccall('myFunc2', 'number', ['number', 'number'],
      [1,2]);
      console.log('myFunc2 result = '+myfuncResult);
      });
      ccall函数签名
       
      var result = Module.ccall(ident, returnType, argTypes, args);
       
      ident ：C导出函数的函数名（不含“_”下划线前缀）；
       returnType ：C导出函数的返回值类型，可以为’boolean’、‘number’、‘string’、‘null’，分别表示函数返回值为布尔值、数值、字符串、无返回值；
       argTypes ：C导出函数的参数类型的数组。参数类型可以为’number’、‘string’、‘array’，分别代表数值、字符串、数组；
       args ：参数数组。
       
      以上就是今天要讲的内容，本文仅仅简单介绍了JavaScript调用C++ WASM的使用，而关于Emscripten一些更详细的内容在系列文章其它章节提供（例如：module，编译命令详解，C++调用web api等）。
      准备好本地编译环境Emscripten，使用emcc命令编译的.wasm文件在js里面调用时报这个错误：
      CompileError: Wasm decoding failedResult = expected magic word 00 61 73 6d, found 42 43 c0 ……
      没找到处理办法，但是找到了一种更简单的方法–使用WebAssembly Studio在线编译。
      1、如果只是需要一个.wasm文件，创建Empty C Project
      				
      一、Emscripten实现把C/C++文件转成wasm，wast（wasm的可读形式）,llvm字节码（bc格式），ll格式（llvm字节码的可读形式）的步骤。
      extern.cc文件
      extern "C" 
        int add(int x, int y) 
          int a=333;
          return x + y+ a;
        int min(int x, int...
      				
      这个错误通常表示 WebAssembly 的内存已经用完了。WebAssembly 是一种轻量级的虚拟机，它有一个固定的内存大小。当你的程序需要更多的内存时，你可能会遇到这个错误。
      解决这个问题的方法有几种：
      1. 优化你的代码：检查你的代码，确保没有不必要的内存分配或者内存泄漏。尽量减少对内存的使用。
      2. 增加 WebAssembly 的内存大小：你可以尝试增加 WebAssembly 的内存限制。这可以通过增加 `--max-old-space-size` 参数来实现（具体命令行参数可能因运行环境而异）。
      3. 调整算法或数据结构：尽量选择更高效的算法和数据结构，减少内存的使用量。
      4. 分块加载数据：如果你的数据量很大，可以考虑将数据分块加载，而不是一次性加载到内存中。
      希望这些方法可以帮助你解决问题！如果还有其他疑问，请随时提问。
                      java11 使用ParameterizedTypeImpl 程序包sun.reflect.generics.reflectiveObjects不存在 maven编译失败
                          spum: 
                          引用「private <T> ParameterizedTypeReference<ApiResultDt」
      private 后面的<T> 是什么？？
                      spring security实现authorization code模式，自定义登录页面，自动授权，自定义密码编码，跳转登录页面http转https
                          CSDN-Ada助手: 
                          恭喜你这篇博客进入【CSDN月度精选】榜单，全部的排名请看 https://bbs.csdn.net/topics/615647796。