WebAssembly之使用JS调用C/C++接口
时间:2022-07-24
本文章向大家介绍WebAssembly之使用JS调用C/C++接口,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
image.png
如果想在C/C++代码中定义一个需要从JavaScript调用的函数,可以使用Emscripten 的ccall()函数并使用EMSCRIPTEN_KEEPALIVE声明(它将添加函数到导出函数列表)来完成。
代码创建
创建一个test.c文件:
#include <stdio.h>
#include <emscripten/emscripten.h>
int main(int argc, char ** argv)
{
printf("Hello Worldn");
}
#ifdef __cplusplus
extern "C"
{
#endif
void EMSCRIPTEN_KEEPALIVE add(int a, int b)
{
printf("a+b=%dn", a+b);
}
#ifdef __cplusplus
}
#endif
默认情况下,Emscripten生成的代码总是只调用该main()函数,其他函数作为死代码被删除。
将EMSCRIPTEN_KEEPALIVE放在函数名称之前可以阻止这种情况发生。 还需要导入emscripten.h库来使用EMSCRIPTEN_KEEPALIVE。
添加模板文件HTML
在上一级新建html_template目录,并将shell_minimal.html复制到目录中。
其余步骤和上一章节相同。
运行实例
执行编译:
emcc -o test.html test.c -O3 -s WASM=1 --shell-file ../html_template/shell_minimal.html -s NO_EXIT_RUNTIME=1 -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall']"
编译成功后执:
emrun --no_browser --port 8080 .
image.png
在浏览器中执行:http://127.0.0.1:8080/ 进入test.html:
image.png
但是并没有调用我们的函数,下面就要修改html文件调用我们的函数。
在html文件中添加按钮和对应的回调函数:
<button class="mybutton">Run myFunction</button>
document.querySelector('.mybutton')
.addEventListener('click', function(){
alert('check console');
var result = Module.ccall(
'add',
null,
['number', 'number'],
[13, 40]
);
})
image.png
ccall函数语法解释:
var result = Module.ccall(ident, returnType, argTypes, args);
参数:
- ident :C导出函数的函数名(不含“_”下划线前缀);
- returnType :C导出函数的返回值类型,可以为'boolean'、'number'、'string'、'null',分别表示函数返回值为布尔值、数值、字符串、无返回值;
- argTypes :C导出函数的参数类型的数组。参数类型可以为'number'、'string'、'array',分别代表数值、字符串、数组;
- args :参数数组。 使用例子:
var result = Module.ccall('add', 'number', ['number', 'number'], [13.0, 42]);
执行的效果:
image.png
- 使用Beego+Swagger构建更好的API服务
- ASM无法启动的问题分析(二)(r7笔记第88天)
- 43. 等价二叉树 | 厚土Go学习笔记
- 51. Socket服务端和客户端使用TCP协议通讯 | 厚土Go学习笔记
- 50. RESTful API的简单实现 | 厚土Go学习笔记
- go实现西瓜视频花椒直播等平台智能答题
- 主备切换的准备工作(二) (r7笔记第85天)
- 49. 访问PostgreSQL数据库增删改查 | 厚土Go学习笔记
- Golang中Interface类型详解
- Go语言的网络编程简介
- 一条关于swap争用的报警邮件分析(二)(r8笔记第4天)
- Golang泛型编程初体验
- 厚土Go学习笔记 | 14. switch 的条件写的有点灵活,不过风格还是go的一贯风格
- Go语言·我的性能我做主
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JS破解初探,折腾到头秃的美拍视频采集下载
- 去哪儿景点信息爬取并使用Django框架网页展示
- Kubernetes v1.15.3 升级到 v1.18.5 心得
- 结巴分词seo应用,Python jieba库基本用法及案例参考
- nali一个可以查询IP归属和CDN的命令
- 图片采集,python多线程采集头像图片源码附exe程序及资源包
- Python json数据爬取处理,红点官网大奖设计作品爬取
- 斗图狂魔必备沙雕表情包,python多线程爬取斗图啦表情图片
- 5个基本Linux命令行工具的现代化替代品
- Chrome 84 正式发布,支持私有方法、用户空闲检测!
- 类及数据库的应用,G-MARK网站数据Python爬虫系统的构建
- 获取素材图无忧,Pixabay图库网Python多线程采集下载
- Python关键词数据采集案例,5118查询网站关键词数据采集
- Python结巴分词,字符串余弦相似度算法实现关键词筛选及整理
- git的分支远程连接和远程分支的拉取推送及冲突处理