WebAssembly 浏览器中运行c/c++模块
今天,要给前端造点儿福利
浏览器中能调用javascript,曾经我们以为够用了,够强大了,但是事实上是完全不够
还好,mozilla的工程师提出了webassembly,目前是利用emsctripten把c/c++代码编译为wasm(web汇编)文件,供javascript调用。
哈哈,想一想,你在历史上的C模块要在web浏览器上运行了,兴奋吧!
*********************************************************************************************************************************
因为浏览器前端自然windows为主战场,所以,以下过程我都是在windows上来做的。
1. 安装WebAssembly SDK
这个,网上都说麻烦,都没有按步骤细说,哈哈,我也不细说,因为也不是很懂啦,但我会给你详细的步骤,比
他们厚道多了。哈哈哈哈
1.1 下载windows git
https://git-scm.com/
单击这个图标去下载吧,然后就是安装了,这只要不是班上最后那个拉稀的家伙,我想都应该会吧,哈
1.2 下载windows CMake
https://cmake.org/download/
下载,安装,没问题吧,哈哈哈
1.3 下载windows python
https://www.python.org/downloads/windows/
你还行吧?
行
那好,我们继续
2. 编译器安装
2.1 Emscripten
按网上说的,我也曾经安装包安装过,但我的经验告诉你,让他见鬼去吧
下面,我们源码安装
git clone https://github.com/juj/emsdk.git
cd emsdk
emsdk install sdk-incoming-64bit binaryen-master-64bit
2.2 配置编译环境变量
好吧,网上说的和管网上的说教,嘿嘿,那对对Linux的啦
Windows上的环境就是保存不了啦,对了,也不叫保存不了,就是配置项太多了,没必要往长久环境里
写了,我认为,编译前,先配置它一下,又有何妨
所以,我给你提供了env.bat文件,你把它放到你的emsdk目录下吧
//env.bat
emsdk activate sdk-incoming-64bit binaryen-master-64bit
emsdk_env.bat
记住,编译前,先env.bat一下,当然,你要不退出,下次编译就免了
2.3 开始我们的编程之旅
我噻,你有环境了耶!
嘻嘻!
2.3.1
一个网上的C代码
// math.c
int add (int x, int y){
return x + y;
}
int square (int x) {
return x * x;
}
编译吧
emcc math.c -Os -s WASM=1 -s SIDE_MODULE=1 -o math.wasm
没错吧?
没有
那就好,我们继续
下面是web端的东西了,你离成功好近了,哈哈哈
2.3.2
一个js文件
//loader.js
function loadWebAssembly (path, imports = {}) {
return fetch(path)
.then(response => response.arrayBuffer())
.then(buffer => WebAssembly.compile(buffer))
.then(module => {
imports.env = imports.env || {}
// 开辟内存空间
imports.env.memoryBase = imports.env.memoryBase || 0
if (!imports.env.memory) {
imports.env.memory = new WebAssembly.Memory({ initial: 256 })
}
// 创建变量映射表
imports.env.tableBase = imports.env.tableBase || 0
if (!imports.env.table) {
// 在 MVP 版本中 element 只能是 "anyfunc"
imports.env.table = new WebAssembly.Table({ initial: 0, element: 'anyfunc' })
}
// 创建 WebAssembly 实例
return new WebAssembly.Instance(module, imports)
})
}
一个html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Compile C to WebAssembly</title>
<script src="loader.js"></script>
</head>
<body>
<h1>Compile C to WebAssembly</h1>
<p>The test result can be found in console.</p>
<script>
loadWebAssembly('math.wasm')
.then(instance => {
const square = instance.exports._square
console.log('2^2 =', square(2))
console.log('3^2 =', square(3))
console.log('(2 + 5)^2 =', square(2 + 5))
})
</script>
</body>
</html>
2.3.3 执行
2.3.3.1 web服务器
你的有web服务器,好了,不多说了,tomcat有吧?
没有,去死
有,我们继续
把math.wasm, loader.js, index.html都拷贝到tomcat工作目录下
2.3.3.2
下载最新的chrome浏览器,我下的是ChromeStandalone_60.0.3112.113_Setup.exe,我噻,名字够长啊,看来本事够大,哈哈
然后,在地址栏里输入http://localhost:8080/math/index.html
好了,我把结果给你看吧,哈哈哈
以上,就是你想要的吧,哈哈
Finally:
这世界变化快啊,我要说的是这是一个非常非常新的技术,你值得拥有。
你要是看不出这个技术有个球用,那就当我没说这件事,再会!
WebAssembly 浏览器中运行c/c++模块的更多相关文章
- Ooui:在浏览器中运行.NET应用 Ooui.Wasm:浏览器中的.NET
在过去数年中,桌面应用开发人员一直处境艰难,因为人们的主要关注点聚焦于Web和移动应用.由于Microsoft未来Windows平台的计划未定,并且UWP应用也没有突破性进展,因此技术落伍的责任也不应 ...
- 在浏览器中运行java applet
最近在看java applet,在eclipse中可以正常运行,于是想试试在浏览器中运行.但途中遇到很多问题,网上很多解答也不全面,于是想把自己的解决过程记录下来. [1]首先,编写的applet程序 ...
- Windows 配置Apache以便在浏览器中运行Python script的CGI模式
打开httpd.conf,找到”#ScriptInterpreterSource Registry “,移除前面的注释# (如果找不到这行,就自己添加进去) 找到“Options Indexes Fo ...
- 如何在浏览器中运行 VS Code?
摘要: WEB IDE新时代! 作者:SHUHARI 的博客 原文:有趣的项目 - 在浏览器中运行 Visual Studio Code Fundebug按照原文要求转载,版权归原作者所有. 众所周知 ...
- JS规则 编程练习 考考大家的数学,计算以下计算公式的结果。然后在浏览器中运行一下,看看结果是否跟你的结果一致。
编程练习 考考大家的数学,计算以下计算公式的结果.然后在浏览器中运行一下,看看结果是否跟你的结果一致. 任务 第一步: 在 ? 处填写你的答案. 第二步: 填写完成后,运行一下,看看是不是跟你填写的 ...
- Unity生成的WebGL如何在浏览器中运行
前言:以为在学完了COMP30019后,应该不会再接触Unity了,没想到之后实习让我去做把一个Unity项目转到WebGL,而关于Unity的WebGL资料很少,基本除了Unity的Manual就只 ...
- 在浏览器中使用ES6的模块功能 import 及 export
感谢英文原作者 Jake Archibald 的技术分享 各个浏览器对于ES6模块 import . export的支持情况 Safari 10.1. Chrome 61. Firefox 54 – ...
- 从高德采集最新的省市区三级坐标和行政区域边界,用js在浏览器中运行
本文描述的是对国家统计局于2019-01-31发布的<2018年统计用区划代码和城乡划分代码(截止2018年10月31日)>中省市区三级的坐标和行政区域边界的采集. 本文更新(移步查阅): ...
- 从统计局采集最新的省市区镇数据,用js在浏览器中运行 V2
本文描述的是对国家统计局于2019-01-31发布的<2018年统计用区划代码和城乡划分代码(截止2018年10月31日)>的采集. 相对于用于和采集2016版.2017版的js代码做了比 ...
随机推荐
- org.apache.jasper.JasperException:Unable to read TLD "META-INF/c-1_0-rt.tld" from JAR file jstl-1.2.jar
前两天把项目从eclipse EE版搬到MyEclipse中了.配置好jdk,确定build path中没有报错后,在tomcat中运行.结果,报错: org.apache.jasper.Jasper ...
- ML.NET教程之出租车车费预测(回归问题)
理解问题 出租车的车费不仅与距离有关,还涉及乘客数量,是否使用信用卡等因素(这是的出租车是指纽约市的).所以并不是一个简单的一元方程问题. 准备数据 建立一控制台应用程序工程,新建Data文件夹,在其 ...
- MySQL之视图、触发器、事务、存储过程、函数 流程控制
MySQL之视图.触发器.事务.存储过程.函数 阅读目录 一 视图 二 触发器 三 事务 四 存储过程 五 函数 六 流程控制 MySQL这个软件想将数据处理的所有事情,能够在mysql这个层面上全部 ...
- python-爬虫:取qq号中各分组成员信息存入数据库,并将qq头像下载保存到文件夹,图片命名为qq号(实例3)
import requestsimport pymongoimport requestsimport os class QqGroup:#三个接口url 获取 qq组号 获取每组成员信息 获取qq头像 ...
- mysql学习【第3篇】:使用DQL查询数据
狂神声明 : 文章均为自己的学习笔记 , 转载一定注明出处 ; 编辑不易 , 防君子不防小人~共勉 ! mysql学习[第3篇]:使用DQL查询数据 DQL语言 DQL( Data Query Lan ...
- mysql存储引擎的简介
前言 数据库存储引擎是数据库底层软件组织,数据库管理系统(DBMS)使用数据引擎进行创建.查询.更新和删除数据.不同的存储引擎提供不同的存储机制.索引技巧.锁定水平等功能,使用不同的存储引擎,还可以 ...
- linux read()和write
参考http://www.cnblogs.com/xiehongfeng100/p/4619451.html 1. read总是在接收缓冲区有数据时立即返回,而不是等到给定的read buffer填满 ...
- 重读《深入理解Java虚拟机》六、Java泛型 VS C#泛型 (伪泛型 VS 真泛型)
一.泛型的本质 泛型是参数化类型的应用,操作的数据类型不限定于特定类型,可以根据实际需要设置不同的数据类型,以实现代码复用. 二.Java泛型 Java 泛型是Java1.5新增的特性,JVM并不支持 ...
- Vue双向数据绑定原理分析(转)
add by zhj: 目前组里使用的是前端技术是jQuery + Bootstrap,后端使用的Django,Flask等,模板是在后端渲染的.前后端没有分离,这种做法有几个缺点 1. 模板一般是由 ...
- python 版Faster Rcnn
直接按照官网https://github.com/rbgirshick/py-faster-rcnn上的教程对faster Rcnn进行编译的时候,会发有一些层由于cudnn版本的更新,会报错如下: ...