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：

　　这世界变化快啊，我要说的是这是一个非常非常新的技术，你值得拥有。

　　你要是看不出这个技术有个球用，那就当我没说这件事，再会！

转载于:https://www.cnblogs.com/woodzcl/p/7478792.html

WebAssembly 浏览器中运行c/c++模块相关推荐

《WebAssembly 权威指南》（6）在浏览器中运行遗留代码
译者注:这篇文章是<WebAssembly 权威指南>一书的第六章,介绍了如何使用 WebAssembly 在浏览器中运行遗留代码,即已经存在的 C/C++ 代码库.文章以一个实际的例子, ...
c 浏览器语言,让C代码在浏览器中运行
WebAssembly作为一种新兴的Web技术,相关的资料和社区还不够丰富,但其为web开发提供了一种崭新的思路和工作方式,未来是很有可能大放光彩的. 使用WebAssembly,我们可以在浏览器中运 ...
关于某些 Visual Studio Code 扩展程序无法在浏览器中运行的原因
只有一部分扩展程序可以在浏览器中运行. 您可以使用"扩展"视图在 Web 中安装扩展,无法安装的扩展将显示警告图标和"了解原因"链接. 安装扩展程序时,它会保存 ...
Wasm 玩出花？在浏览器中运行虚拟机！
最近在 Github 上看到了一个挺有意思的项目:运行在浏览器环境中的虚拟机:WebVM. 传统意义上的虚拟机(VM)是一种创建于物理硬件系统(位于外部或内部).充当虚拟计算机系统的虚拟环境,它模拟出 ...
OpenCV在浏览器中运行深度网络
OpenCV在浏览器中运行深度网络在浏览器中运行深度网络介绍人脸检测人脸识别样本运行人脸检测网络以检测输入图像上的人脸. 运行人脸识别网络,128通过输入人脸图像接收三维单位特征向量. 执 ...
在浏览器中运行java applet
最近在看java applet,在eclipse中可以正常运行,于是想试试在浏览器中运行.但途中遇到很多问题,网上很多解答也不全面,于是想把自己的解决过程记录下来. [1]首先,编写的applet程序 ...
如何在浏览器中运行Linux程序,如何在Chromebook的浏览器标签中运行完整的Linux桌面 | MOS86...
Crouton是在Chromebook上运行Linux操作系统的最佳方法.现在吧这是它工作原理相关文章图片1tupian购买适用于Linux的Chromebook时,需要牢记4件事这种方法需要一 ...
微信支持手机温度监控；苹果、谷歌和微软扩大对无密码登录的支持；可在浏览器中运行Python应用的框架发布 | EA周报...
EA周报 2022年5月7日每个星期7分钟,元宝带你喝一杯IT人的浓缩咖啡,了解天下事.掌握IT核心技术. 周报看点 1.硬核新功能!微信支持手机温度监控 2.IP代理畸形产业爆火最低6元可更改 ...
微软发布轻量级 VS Code 工具，可完全在浏览器中运行
整理 | 祝涛出品 | CSDN(ID:CSDNnews) 10 月 21 日消息,微软现已推出了可完全在浏览器中运行的轻量级 VS Code 网页预览版,该程序可以允许开发者直接使用浏览器中的 V ...

WebAssembly 浏览器中运行c/c++模块

WebAssembly 浏览器中运行c/c++模块相关推荐

最新文章

热门文章