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>

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有吧？

没有，去死

有，我们继续