当前位置: 首页 > news >正文

C语言转WebAssembly的全流程,及Web端调用测试

第一步:安装环境

参考网址:https://emscripten.org/docs/getting_started/downloads.html

具体过程:

  1. 克隆代码:git clone https://github.com/emscripten-core/emsdk.git
  2. 进入代码目录:cd emsdk
  3. 获取最新远端代码:git pull
  4. 下载最新sdk:./emsdk install latest
  5. 激活:./emsdk activate latest
  6. 激活路径和使环境变量生效:source ./emsdk_env.sh

说明:若在Windows系统中

  • 请使用emsdk.bat代替上列的./emsdk,使用emsdk_env.bat代替./emsdk_env.sh,即所执行的命令分别为(第1、2、3步相同):
    • emsdk.bat install latest
    • emsdk.bat activate latest
    • source ./emsdk_env.sh
    • source emsdk_env.bat
  • 在所有系统中,安装工具的步骤同上。

第二步:编写C语言代码

#include <stdio.h>
#include <emscripten/emscripten.h>int main() {printf("Hello World\n");return 0;
}#ifdef __cplusplus
#define EXTERN extern "C"
#else
#define EXTERN
#endifEXTERN EMSCRIPTEN_KEEPALIVE void myFunction(int argc, char ** argv) {printf("MyFunction Called\n");
}EXTERN EMSCRIPTEN_KEEPALIVE void myMaxFunc(int argc, char ** argv) {printf("11111 -----  myMaxFunc Called\n");
}

说明:

  • 我对C语言不太会,参考官方文档编写了上述代码,具体的内容后续再做深究。
  • 重要的是后面两段;
EXTERN EMSCRIPTEN_KEEPALIVE void myFunction(int argc, char ** argv) {printf("MyFunction Called\n");
}EXTERN EMSCRIPTEN_KEEPALIVE void myMaxFunc(int argc, char ** argv) {printf("11111 -----  myMaxFunc Called\n");
}

后面在web端调用的时候,就是调用的myFunctionmyMaxFunc方法。

第三步:进行代码编译

C语言的代码编译命令:

emcc -o web_assembly_test.html hello3.c --shell-file html_template/shell_minimal.html -s NO_EXIT_RUNTIME=1 -s "EXPORTED_RUNTIME_METHODS=['ccall']"

可能看不懂,但是你记下就好了。

说明:

  • hello3.c就是我们编写的C语言的文件
  • web_assembly_test.html是编译后输出的文件。

在执行完上述命令行语句后,会生成三个文件,分别是:

  • web_assembly_test.html 用于进行测试的html文件
  • web_assembly_test.js.wasm文件进行调用的一系列js文件,不要动就是了。改该改的地方就行
  • web_assembly_test.wasm 打包后的.wasm文件

第四步:修改web_assembly_test.js文件

还记得我们在.c文件中的那两个特殊的方法吗:myFunctionmyMaxFunc

打开web_assembly_test.js文件,找到var wasmExports = createWasm();代码的位置。添加以下代码:

var wasmExports = createWasm();
var _myFunction = Module['_myFunction'] = createExportWrapper('myFunction');
var _myMaxFunc = Module['_myMaxFunc'] = createExportWrapper('myMaxFunc');

这一段可能有很多的方法,你只需要将你自己需要的写进去就行,不用改其他的。

第五步:JavaScript调用

在html文件中添加代码,并执行测试。

  1. 添加一个button按钮
<button id="mybutton">测试按钮</button>
  1. 调用方法
document.getElementById("mybutton").addEventListener("click", () => {// alert("check console");const result = Module.ccall("myFunction", // name of C functionnull, // return typenull, // argument typesnull, // arguments);const result2 = Module.ccall("myMaxFunc", // name of C functionNumber, // return type[Number, Number], // argument types[10,11], // arguments);console.log('result = ', result2)
});

可以看到,我们将两个方法都调用了。下面我们看控制台的输出(因为我们的方法里只写了输出,没有写其它的。因为我不会!!!o(╥﹏╥)o)

在这里插入图片描述

最后

WebAssembly对于调用C/C++库都是挺有用的,它可以提高效率。本篇将C语言进行汇编的流程梳理通了,但是要写一些具体的方法不会。下面就是调用一些大的C语言库了,后续测评和使用技巧不断输出。

相关文章:

C语言转WebAssembly的全流程,及Web端调用测试

第一步&#xff1a;安装环境 参考网址&#xff1a;https://emscripten.org/docs/getting_started/downloads.html 具体过程&#xff1a; 克隆代码&#xff1a;git clone https://github.com/emscripten-core/emsdk.git进入代码目录&#xff1a;cd emsdk获取最新远端代码&…...

前端--基础 目录文件夹和根目录 VScode打开目录文件夹

目录 目录文件夹和根目录 &#xff1a; 目录文件夹 &#xff1a; 根目录 &#xff1a; VScode 打开目录文件夹 &#xff1a; VScode 打开文件夹 &#xff1a; 拖拽目录文件夹 &#xff1a; 目录文件夹和根目录 &#xff1a; 我们都清楚&#xff0c;在实际的工作中会…...

传感器原理与应用复习--超声波、微波、红外及热电偶传感器

文章目录 上一篇超声波传感器微波传感器红外传感器热电偶传感器下一篇 上一篇 传感器原理与应用复习–光电式与半导体式传感器 超声波传感器 超过2万赫兹以上的波称为超声波 压电式超声波探头常用材料是压电晶体和压电陶瓷。它是利用压电材料的压电效应来工作的。 逆压电效…...

matlab概率论例子

高斯概率模型&#xff1a; [f,xi] ksdensity(x): returns a probability density estimate, f, for the sample in the vector x. The estimate is based on a normal kernel function, and is evaluated at 100 equally spaced points, xi, that cover the range of the da…...

Appium+python自动化(一)- 环境搭建—上(超详解)

简介 今天是高考各地由于降水&#xff0c;特别糟糕&#xff0c;各位考生高考加油&#xff0c;全国人民端午节快乐。最近整理了一下自动化的东西&#xff0c;先前整理的python接口自动化已经接近尾声。即将要开启新的征程和篇章&#xff08;Appium&python&#xff09;。那么…...

基于SpringBoot的精简博客系统

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于SpringBoot的精简博客系统,java项目…...

STM32的在线升级(IAP)实现方法:BOOT+APP原理详解

0 工具准备 Keil uVision5 Cortex M3权威指南&#xff08;中文&#xff09; STM32参考手册 1 在线升级&#xff08;IAP&#xff09;设计思路 为了实现STM32的在线升级&#xff08;IAP&#xff09;功能&#xff0c;通常会将STM32的FLASH划分为BOOT和APP两个部分&#xff0c;BOO…...

【芯片DFX】Arm调试架构篇

【芯片DFX】万字长文带你搞懂JTAG的门门道道【芯片DFX】ARM:CoreSight、ETM、PTM、ITM、HTM、ETB等常用术语解析...

ES应用_ES实战

依靠知识库使用es总结一些使用技巧。 1 快速入门 ES是将查询语句写成类似json的形式&#xff0c;通过关键字进行查询和调用。 1.1 创建 下面创建了一个主分片为5&#xff0c;副本分片为1的ES结构。ES本身是一种noschema的结构&#xff0c;但是可以通过指定mapping编程schema的…...

Ubuntu上如何找到设备,打印串口日志

dmesg 找设备 sudo mincom -s 配置minicom mincom 打印串口日志 PS: Windows上使用MobaXterm / putty / Xshell / SecureCRT等 ubuntu串口的安装和使用&#xff08;usb转串口&#xff09;_ubuntu上如何把usb设备映射到tty-CSDN博客...

本地映射测试环境域名,解决登录测试环境后,也可以使用本地域名访问,可以正常跑本地项目

问题&#xff1a;单点登录进入系统不使用token&#xff0c;是将token携带在cookie中&#xff0c;登录成功后每次调用接口&#xff0c;都会在cookie中自动携带&#xff0c;这样导致即使在本地使用proxy代理解决了跨域&#xff0c;但由于本地域名不一致&#xff0c;也无法进行本地…...

VSCode使用Remote SSH远程连接Windows 7

结论 VSCode Server不能启动&#xff0c;无法建立连接。 原因 .vscode-server 目录中的 node.exe 无法运行。 原因是Node.js仅在Windows 8.1、Windows Server 2012 R2或更高版本上受支持。 由于vscode基于node.js v14&#xff0c;不支持Windows 7操作系统。 另&#xff…...

uniapp中uview组件库丰富的Calendar 日历用法

目录 基本使用 #日历模式 #单个日期模式 #多个日期模式 #日期范围模式 #自定义主题颜色 #自定义文案 #日期最大范围 #是否显示农历 #默认日期 基本使用 通过show绑定一个布尔变量用于打开或收起日历弹窗。通过mode参数指定选择日期模式&#xff0c;包含单选/多选/范围…...

云原生Kubernetes:K8S集群实现容器运行时迁移(docker → containerd) 与 版本升级(v1.23.14 → v1.24.1)

目录 一、理论 1.K8S集群升级 2.环境 3.升级策略 4.master1节点迁移容器运行时(docker → containerd) 5.master2节点迁移容器运行时(docker → containerd) 6.node1节点容器运行时迁移(docker → containerd) 7.升级集群计划&#xff08;v1.23.14 → v1.24.1&#…...

Redis 数据结构和常用命令

* 代表多个&#xff0c;&#xff1f;代表一个 &#xff08;不用全部敲出来&#xff0c;按住tab可以自动补全&#xff09; -2是无效&#xff0c;-1是永久有效 &#xff1b;贴心小提示&#xff1a;内存非常宝贵&#xff0c;对于一些数据&#xff0c;我们应当给他一些过期时间&a…...

Docker 容器命令总汇

目录 1、创建Docker容器&#xff08;不启动&#xff09; 2、创建Docker容器&#xff08;启动&#xff09; 3、列出正在运行的容器 4、停止和启动容器 5、重启容器 6、进入容器 7、查看容器信息 8、查看容器日志 9、删除容器和镜像 10、重命名容器 11、从旧容器复制数…...

react + redux 之 美团案例

1.案例展示 2.环境搭建 克隆项目到本地&#xff08;内置了基础静态组件和模版&#xff09; git clone http://git.itcast.cn/heimaqianduan/redux-meituan.git 安装所有依赖 npm i 启动mock服务&#xff08;内置了json-server&#xff09; npm run serve 启动前端服务 npm…...

【形式语言与自动机/编译原理】CFG-->Greibach-->NPDA(2)

本文将详细讲解《形式语言与自动机》&#xff08;研究生课程&#xff09;或《编译原理》&#xff08;本科生课程&#xff09;中的上下文无关文法&#xff08;CFG&#xff09;转换成Greibach范式&#xff0c;再转成下推自动机&#xff08;NPDA&#xff09;识别语言是否可以被接受…...

14.用户管理

目录 1、权限表 1、user表 1.用户列 2.权限列 3.安全列 4.资源控制列 2、db表和host 表 1.用户列 2.权限列 3. tables_priv 表和 columns _priv 表 4.procs_priv 表 2、账户管理 1. 登录和退出MySQL服务器 2、创建普通用户&#xff1a; 1.使用CREATE USER语创建…...

【交叉编译环境】安装arm-linux交叉编译环境到虚拟机教程(简洁版本)

就是看到了好些教程有些繁琐&#xff0c;我就写了一个 我这个解压安装的交叉编译环境是Linaro GCC的一个版本&#xff0c;可以用于在x86_64的主机上编译arm-linux-gnueabihf的目标代码 步骤来了 在你的Ubuntu系统中创建一个目录&#xff0c;例如/usr/local/arm&#xff0c;然后…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...