WebAssembly编译之(3)-WASM编译实战之C/C++导出asm.js及wasm库

news2025/1/13 2:37:45

引言

上一节我们介绍了Ubuntu下的WASM的编译环境快速搭建。这一节我们继续WASM编译相关的介绍——如何导出C/C++编写的函数库

WASM 相关文档：
WebAssembly编译之(1)-asm.js及WebAssembly原理介绍
WebAssembly编译之(2)-Ubuntu搭建WASM编译环境

单个C++文件(*.cpp)的导出

我们首先介绍一个文件(*.cpp)如何导出进行Emscripten编译成asm.js或wasm。我们还是先直接上c++代码

// HelloTools.cpp
#include <iostream>

class HelloTools{
    public:
    void print(int a, int b);
    int add(int a, int b);
};

void HelloTools::print(int a, int b){
    std::cout<<"a+b="<<a<<"+"<<b<<"="<<a+b<<std::endl;
}

int HelloTools::add(int a, int b){
    int c = 0;
    c = a+b;
    print(a , b);
    return c;
}

这是个HelloTools.cpp是我们前面介绍c++时用写的一个HelloTools类文件。里面主要有一个add的方法；如何导出这个库如何编译成一个web前端可调用的js库呢？

我们首先用emcc命令编译一下看看什么结果

# 注意，首次执行我们需要激活一下环境变量，找到emsdk的源码路径，进入emsdk目录，激活环境变量
source ./emsdk_env.sh
# 进入项目
cd 1.singleCPP
# 开始编译
emcc HelloTools.cpp -o HelloTools.js

编译成功，生成了HelloTools.js及HelloTools.wasm，如何检查编译的结果呢，我们继续

node环境下测试wasm

我们首先简单写一段测试test.js脚本

// test.js
var em_module = require('./HelloTools.js');
console.log(em_module);
var toolObj = new em_module();
var sum = toolObj.add(10,20);
console.log(sum);

使用node命令执行该js

node test.js

注意，需要安装好预先安装好nodejs

结果如下：

{
  inspect: [Function (anonymous)],
  FS_createDataFile: [Function: createDataFile],
  FS_createPreloadedFile: [Function: createPreloadedFile],
  ___wasm_call_ctors: [Function (anonymous)],
  ___errno_location: [Function (anonymous)],
  _fflush: [Function (anonymous)],
  _emscripten_stack_init: [Function (anonymous)],
  _emscripten_stack_get_free: [Function (anonymous)],
  _emscripten_stack_get_base: [Function (anonymous)],
  _emscripten_stack_get_end: [Function (anonymous)],
  stackSave: [Function (anonymous)],
  stackRestore: [Function (anonymous)],
  stackAlloc: [Function (anonymous)],
  dynCall_jiji: [Function (anonymous)]
}
/home/1.singleCPP/test-node/HelloTools.js:147
      throw ex;
      ^

TypeError: em_module is not a constructor
    at Object.<anonymous> (/home/1.singleCPP/test-node/test.js:3:15)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
    at internal/main/run_main_module.js:17:47

正常加载，但是后面无法创建实例，报了一堆错误，用法不对，这显然不是我们期待的；而前面打印的Module模块信息来看，视乎也没发现与我们HelloTools.cpp中类相关的任何标识。

浏览器中html测试wasm

为了方便调试测试，我们采用在chrome浏览器中进行测试（后续都在这个环境下测试讲解）。我们先创建一个html测试文件，html如下所示

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Emscripten:HelloTools Class Test</title>
  </head>
  <body>
    <script>
    Module = {};
    Module.onRuntimeInitialized = function() { //此时才能获得完整Module对象
      console.log(Module)
    }
    </script>
    <script src="./HelloTools.js"></script>
  </body>
</html>

启动一个web服务，这里emsdk考虑得比较周到，已经提供一个快速启动的web服务命令emrun

首先我们看一下整个项目的文件解构

- 1.singleCPP
  - test-html // html测试文件夹
    - HelloTools.js
  	- HelloTools.wasm
  	- index.html // html测试文件
  - test-node // node测试文件夹
    - HelloTools.js
    - HelloTools.wasm
    - test.js // node测试文件
	- HelloTools.cpp // c++ 源码

启动web服务

# 进入文件夹
cd test-node
# 启动web服务
emrun --no_browser --port 8080 .

打开chrome浏览器，按下F12开的调试面板，浏览http://localhost:8080，正常加载，并打印出如下内容

在这里插入图片描述
同样，我们还是未发现任何与HelloTools.cpp相关的标识、属性或方法；我们展开Module.asm属性，如下所示：
在这里插入图片描述

正确的C导出及Javascript调用姿势

我们先从简单的开始，看看C语言下的Emscripten编译器是如何导出接口的，而Javascirpt是又如何调用的导出的C的。先上一段C代码

// HelloToolFuns.c
#include  <stdio.h>

int myAdd(int a,int b){
    int res = a+b;
    return res;
}

int myMutilp(int a, int b){
    int s = a * b;
    return s;
}

void sayHello() {
      printf("Hello World!(HelloToolFuns.c)\n");
}

我们使用emcc进行编译一下

emcc HelloToolFuns.c -o ./test-html/HelloToolFuns.js

注意，记得在index.html中修改一下js引用<script src="./HelloToolFuns.js"></script>

浏览器重新加载一下，然后在Console面板直接测试javascirpt如何调用c导出的wasm接口

Javascirpt调用C接口

cwrap及ccall是wasm提供的两个在javascript下调用c接口的方法，我们以HelloToolFuns.c为例介绍调用方式：

1）通过Module.cwrap调用C接口
// Module.cwrap
var myMutilp = Module.cwrap('myMutilp', 'number', ['number','number'])
var s = myMutilp(10,20)
console.log(s);

Module.cwrap的第一个参数是函数名，第二个参数是函数返回类型，第三个是参数类型；返回类型和参数类型中可以用类型有三个，分别是：number，string和array。

number -（是js中的number，对应着C中的整型，浮点型，一般指针）
string - (是JavaScript中的string，对应着C中的char,C中char表示一个字符串)
array - (是js中的数组或类型数组，对应C中的数组；如果是类型数组，必须为Uint8Array或者Int8Array）。

2）通过Module.ccall调用C接口
// Module.ccall
var s = Module.ccall('myMutilp', 'number', ['number','number'],[10,20])
console.log(s);

Module.ccall的用于与前面Module.cwrap略有不同，Module.ccall它的参数有四个，前面三个与Module.cwrap含义及类型相同，第四个为实际传入参数。且Module.ccall是直接调用执行需要的函数，而`Module.cwarp``只是返回了具体的函数实例。

我们选择第一种方式，在console面板中测试一下

const sayHello = Module.cwrap('sayHello')

在这里插入图片描述
遗憾的发现报错了，原来默认EMCC编译器是不会把这两个函数导出的，所以我们需要在编译时指定这导出这两个函数

emcc -s EXPORTED_RUNTIME_METHODS=['cwrap','ccall'] HelloToolFuns.c -o ./test-html/HelloToolFuns.js

注意：EXTRA_EXPORTED_RUNTIME_METHODS已经被废弃，应使用EXPORTED_RUNTIME_METHODS参数

但我们再次在浏览器中测试时，又有新的错误，如下所示：

const sayHello = Module.cwrap('sayHello')
sayHello()

在这里插入图片描述
无法调用sayHello方法，提示需要导出这个方法，如何导出呢？

我们在编译时，需要使用EXPORTED_FUNCTIONS指定导出的方法

emcc -s -EXPORTED_RUNTIME_METHODS=['cwrap','ccall'] -s EXPORTED_FUNCTIONS=['_sayHello'] HelloToolFuns.c -o ./test-html/HelloToolFuns.js

这里需要注意EXPORTED_FUNCTIONS中,导出时给函数名前加下划线“_”，如上命令参数：
sayHello的导出格式，需要写成_sayHello

我们再次进行测试：

const sayHello = Module.cwrap('sayHello')
sayHello()

在这里插入图片描述
成功调取HelloToolFuns.c的中的sayHello方法！

3）通过Module._<FunctionName>直接调用（推荐）

而实际上，当我们在编译时，设置了-s EXPORTED_FUNCTIONS=['_sayHello']后，可以直接通过Module._sayHello()，进行调用，而不不需要用Module.ccall或Module.cwrap调用。

Module._sayHello()

在这里插入图片描述

显然是因为EMCC编译器在Module中帮我们自动注入HelloToolFuns.c中的了sayHello()这个方法。我们可以在HelloToolFuns.js这个胶水代码中，搜索一下sayHello；

// 部分代码
/** @type {function(...*):?} */
var _sayHello = Module["_sayHello"] = createExportWrapper("sayHello"); // createExportWrapper这个方法即用来创建C代码中导出的接口

通常，我们更推荐用户使用这种直接用Module._sayHello()方法进行进行调用

4）通过Module.asm.<FunctionName>直接调用

实际上我们查看HelloToolFuns.js的源码，还发现了wasm加载完成后，把整个asm的实例挂着到了Module.asm中，Module['asm']中保存了WebAssembly实例的导出对象——而导出函数恰是WebAssembly实例供外部调用最主要的入口。
所以，我们也可直接通过Module.asm中找到我们导出的sayHello方法

Module.asm.sayHello()

在这里插入图片描述
最后，我们可以总结一下以上四种方法，最便捷的，其实是后面两种，视乎更符合Javascript的开发方法；而通过胶水代码的分析，第三种与第四种的区别并不大，第三种只是对第四经过包裹之后挂着在Module下的。

关于HelloToolFuns.js这个胶水代码的解析我们另外再花时间分析介绍源码。这里我们只要知道，它最核心的工作就帮我们做了异步加载了HelloToolFuns.wasm并实例化，且暴露了一些接口给我们使用；如何你愿意的话，完全自己写这个js甚至是可以不需要这个js，自己在js中` WebAssembly.instantiate(binary, info)，然后直接调用相关C导出的接口；

正确的C++导出及Javascirpt调用姿势（重点）

（待续）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/181907.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

每日学术速递1.28

每日学术速递1.28

CV - 计算机视觉 | ML - 机器学习 | RL - 强化学习 | NLP 自然语言处理 今天带来的arXiv上最新发表的3篇AI论文。 Subjects: cs.AI、cs.Cv 1.Revisiting Temporal Modeling for CLIP-based Image-to-Video Knowledge Transferring 标题&#xff1a;重新审视基于CLIP的图像-视…
阅读更多...
计讯物联5G工业级路由器在智慧消防的功能解析

计讯物联5G工业级路由器在智慧消防的功能解析

据悉&#xff0c;国务院安全生产委员会印发《“十四五”国家消防工作规划》&#xff08;以下简称《规划》&#xff09;&#xff0c;对“十四五”时期消防改革发展作出全面部署。《规划》提出&#xff0c;坚持防消一体、防救并重&#xff1b;加强改革创新&#xff0c;加快消防“…
阅读更多...
11 Day ： 编写操作系统中断程序，加快时钟

11 Day ： 编写操作系统中断程序，加快时钟

前言&#xff1a;昨天学习了中断&#xff0c;今天就废话不多说&#xff0c;直接编写程序吧 内容更新&#xff1a;之前有朋友说看不太懂我的代码写的是啥&#xff0c;能不能详细讲讲&#xff0c;所以本期开始我会详细讲解代码&#xff0c;也会同步更新之前的博客&#xff0c;大多…
阅读更多...
java基础巩固-宇宙第一AiYWM：为了维持生计，做项目经验之~高速项目大数据及机器学习算法方面的思路总结~整起

java基础巩固-宇宙第一AiYWM：为了维持生计，做项目经验之~高速项目大数据及机器学习算法方面的思路总结~整起

原始项目可能主要的功能是接收下位机传送来的很多参数&#xff0c;然后将参数以不同形式表达出来&#xff0c;在此过程中会涉及到文件上传下载、excel表格导出…等&#xff0c;但是呢&#xff0c;这么多数据不玩一下岂不是太浪费。于是&#xff0c;额们决定这样来: 项目中有一个…
阅读更多...
Metasploit工具使用(上)

Metasploit工具使用(上)

Metasploit工具使用1.Metasploit简介1.1.Metasploit下载1.2.Metasploit框架结构1.2.1.框架路径1.2.2.框架内容介绍1.2.2.1.data目录文件1.2.2.2.modules目录文件1.2.2.3.scripts目录文件1.2.2.4.tools目录文件1.2.2.5.plugins目录文件1.3.Metasploit更新2.MSF中数据库设置2.1.数…
阅读更多...
动态与静态函数库的的使用 和 区别 及 优缺点

动态与静态函数库的的使用 和 区别 及 优缺点

这里写目录标题初识静态库与动态库静态函数库动态函数库初识静态库与动态库 静态函数库与动态函数库的使用中&#xff0c;有人也把他称为程序的静态链接及动态链接。 静态链接&#xff1a;指程序链接时使用静态库的链接方式&#xff0c;把所有需要的库函数加入&#xff08;拷贝…
阅读更多...
Vue3商店后台管理系统设计文稿篇（七）

Vue3商店后台管理系统设计文稿篇（七）

记录使用vscode构建Vue3商店后台管理系统&#xff0c;这是第七篇&#xff0c;主要记录系统登录页面的创建过程&#xff0c;包含完整vue登录页面代码&#xff1b;Vuex的相关知识以及具体的使用&#xff0c;对state中值得获取&#xff0c;修改&#xff0c;异步修改&#xff0c;分…
阅读更多...
Gradle学习笔记之Hook生命周期

Gradle学习笔记之Hook生命周期

简介 Gradle生命周期中的hook&#xff08;钩子&#xff09;函数是由gradle自动回调的&#xff0c;可以用来帮助我们实现一些功能&#xff1a; Gradle在生命周期各个阶段都提供了用于回调的钩子函数: Gradle初始化阶段: 在settings.gradle执行完后&#xff0c;会回调Gradle对…
阅读更多...
2022爱分析･智能客服厂商全景报告 | 爱分析报告

2022爱分析･智能客服厂商全景报告 | 爱分析报告

报告编委 张扬 爱分析联合创始人&首席分析师 文鸿伟 爱分析高级分析师 王鹏 爱分析分析师 目录 研究范围定义厂商全景地图市场分析与厂商评估入选厂商列表研究范围定义 研究范围 在数字化快速发展的大背景下&#xff0c;随着消费人群及其消费意识的转变&#xff0c;客户对…
阅读更多...
亚马逊云科技凭借多年云业务经验，协同合作伙伴快速展开生态化创新

亚马逊云科技凭借多年云业务经验，协同合作伙伴快速展开生态化创新

在过去的两周里&#xff0c;ChatGPT的热度居高不下&#xff0c;引发全网讨论。虽然AlphaGo这类AI产品也曾引起热议&#xff0c;但是在应用层面终究还是离用户太远了。而ChatGPT更像是「民用级」的产品&#xff0c;真正意义上让AI技术跨入广泛破圈应用时代。在当下&#xff0c;机…
阅读更多...
大数据-Hive

大数据-Hive

第1章 Hive入门 1.1 什么是Hive 1&#xff09;Hive简介 Hive是由Facebook开源&#xff0c;基于Hadoop的一个数据仓库工具&#xff0c;可以将结构化的数据文件映射为一张表&#xff0c;并提供类SQL查询功能。 2&#xff09;Hive本质 Hive是一个Hadoop客户端&#xff0c;用于…
阅读更多...
springboot项目解决@ResponseBody注解返回xml格式数据而不是json格式的问题

springboot项目解决@ResponseBody注解返回xml格式数据而不是json格式的问题

目录 1.说明 2.解决 1.说明 一般情况下&#xff0c;RestController中的接口默认响应数据格式都是 json 格式的数据&#xff0c;但有时候使用某些依赖包&#xff0c;会影响ResponseBody的响应数据类型为xml格式&#xff0c; 例&#xff1a; 2.解决 但我们希望响应数据格式是…
阅读更多...
使用腾讯云服务器+Nonebot2+go-cqhttp搭建QQ聊天机器人

使用腾讯云服务器+Nonebot2+go-cqhttp搭建QQ聊天机器人

文章目录一、查看conda版本二、查看系统版本三、配置go-cqhttp1.请切换至同一网络下扫码2.打包Docker镜像四、创建NoneBot环境安装脚手架一、查看conda版本 二、查看系统版本 uname -a arch getconf LONG_BIT三、配置go-cqhttp 下载go-cqhttp 这里有不同版本的cqhttp,并且对…
阅读更多...
【数据结构】——如何设计一个链表？（设计链表）

【数据结构】——如何设计一个链表？（设计链表）

本文主题&#xff1a;通过一道题目&#xff0c;学习链表的基本操作 更多算法&#xff1a;动态规划 ✔️ 边界控制 我的主页&#xff1a;蓝色学者的主页 文章目录一、前言二、题目信息三、解决方案3.0什么是链表&#xff1f;3.1节点的概念虚拟头节点3.2链表创建3.3头插/尾插3…
阅读更多...
JUC面试（十三）——锁膨胀

JUC面试（十三）——锁膨胀

锁膨胀 monitor概念 Monitor是 Java中用以实现线程之间的互斥与协作的主要手段&#xff0c;它可以看成是对象或者 Class的锁。每一个对象都有&#xff0c;也仅有一个 monitor。上面这个图&#xff0c;描述了线程和 Monitor之间关系&#xff0c;以及线程的状态转换图。 进入区…
阅读更多...
windows11 永久关闭windows defender的方法

windows11 永久关闭windows defender的方法

1、按键盘上的windows按键&#xff0c;再点【设置】选项。 2、点击左侧菜单的【隐私和安全性】&#xff0c;再点击列表的【Windows安全中心】选项。 3、点击界面的【病毒和威胁保护】设置项。 4、病毒保护的全部关闭 5、别人的图&#xff08;正常是都开着的&#xff09; 6、终极…
阅读更多...
为什么看上去很简单的智慧功能点要价上千万？

为什么看上去很简单的智慧功能点要价上千万？

人工智能&#xff08;Artificial Intelligence&#xff0c;AI&#xff09;已经不是什么新概念&#xff0c;第三次浪潮于2016年AlphaGo战胜李世石为标志正式开启&#xff0c;至今也已经走过6个年头。 发展至今&#xff0c;AI已经进入老百姓的日常生活&#xff0c;比如随处可见的…
阅读更多...
【C语言】从0到1带你学会文件版动态通讯录

【C语言】从0到1带你学会文件版动态通讯录

&#x1f307;个人主页&#xff1a;平凡的小苏 &#x1f4da;学习格言&#xff1a;别人可以拷贝我的模式&#xff0c;但不能拷贝我不断往前的激情 &#x1f6f8;C语言专栏&#xff1a;https://blog.csdn.net/vhhhbb/category_12174730.html 小苏希望大家能从这篇文章中收获到许…
阅读更多...
初学者试试，HarmonyOS应用开发者基础认证

初学者试试，HarmonyOS应用开发者基础认证

一些初学HarmonyOS应用开发的同学往往不知道如何开始&#xff0c;建议先试试《HarmonyOS应用开发者基础认证》&#xff0c;基础认证是华为进一步大范围布局推广“鸿蒙世界”的新举措。也是初学者开启鸿蒙世界的一把钥匙。 【说说鸿蒙世界】 相信大家已经对鸿蒙不陌生了&#x…
阅读更多...
IDEA新建js项目和执行js脚本

IDEA新建js项目和执行js脚本

一)、安装Node.js具体操作参考:https://blog.csdn.net/xijinno1/article/details/128774375二)、IDEA中新建js项目(hello world)1.按照下图&#xff0c;新建js项目2.选中示例代码文件后点击运行->运行3.选择【编辑配置】4.更新一下节点解释器(nodejs.exe)&#xff0c;点击运…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023