让C代码在浏览器中运行——WebAssembly入门介绍

WebAssembly作为一种新兴的Web技术，相关的资料和社区还不够丰富，但其为web开发提供了一种崭新的思路和工作方式，未来是很有可能大放光彩的。

使用WebAssembly，我们可以在浏览器中运行一些高性能、低级别的编程语言，可用它将大型的C和C++代码库比如游戏、物理引擎甚至是桌面应用程序导入Web平台。

截至目前为止，我们已经可以在Chrome、Firefox中使用WebAssembly，Edge和Safari对它的支持也基本完成。这意味着很快，就能在所有流行的浏览器中运行wasm了。

在这篇文章中，我们将会演示如何将简单的C代码编译为wasm，并将其包含在网页中。在此之前，我们先来直观的了解下WebAssembly是如何工作的。

WebAssembly是如何工作的？

这里不涉及过多技术性的问题。我们知道，在今天的浏览器中，JavaScript是在虚拟机（VM）中执行的，该虚拟机能够最大化地优化代码并压榨每一丝的性能，这也使得JavaScript称为速度最快的动态语言之一。但尽管如此，它还是无法与原生的C/C++代码相媲美。所以，WebAssembly就出现了。

Wasm同样在JavaScript虚拟机中运行，但是它表现得更好。两者可以自由交互、互不排斥，这样你就同时拥有了两者最大的优势——JavaScript巨大的生态系统和有好的语法，WebAssembly接近原生的表现性能。

大多数程序员会选择使用C语言来编写WebAssembly模块，并将其编译成.wasm文件。这些.wasm文件并不能直接被浏览器识别，所以它们需要一种称为JavaScript胶接代码（glue code，用于连接相互不兼容的软件组件，详见：http://whatis.techtarget.com/definition/glue-code）的东西来加载。

WebAssembly工作原理

随着未来WebAssembly框架和本地wasm模块支持的发展，这一过程可能会有所缩短。

开发前准备

编写WebAssembly需要不少的工具，但作为一个程序员，下面的工具你应该大部分都已经有了。

1、支持WebAssembly的浏览器，新版的Chrome或者Firefox均可（可以在此查看各个浏览器对某项内容的支持情况：http://caniuse.com/#feat=wasm）。

2、C到WebAssembly的编译器，推荐使用Emscripten（https://kripken.github.io/emscripten-site/docs/getting_started/downloads.html），安装这个工具费时费力费空间，但没办法，这是目前为止最好的选择，请仔细阅读安装说明，需占用约1GB的硬盘空间。

3、一个C编译器/开发环境，比如Linux下的GCC，OS X下的Xcode，Windows下的Visual Studio。

4、一个简单的本地web服务器，Linux/OS X下使用python -m SimpleHTTPServer 9000命令即可，Windows下可安装IIS服务。

一、编写C代码

下面我们编写一个非常简单的C语言例子，它将会返回1-6的随机数，在你所使用的工作目录下，创建一个dice-roll.c文件。

#include <stdio.h>
#include <stdlib.h>
#include <time.h>
#include <emscripten/emscripten.h>// 一旦WASM模块被加载，main()中的代码就会执行
int main(int argc, char ** argv) {printf("WebAssembly module loaded\n");
}// 返回1-6之间的一随机数
int EMSCRIPTEN_KEEPALIVE roll_dice() {srand ( time(NULL) );return rand() % 6 + 1;
}

当我们将其编译为wasm并且在浏览器中加载时，main函数会自动执行，其中的printf将会被翻译成console.log。

我们想要roll_dice函数能够在JavaScript中随时调用，为此，我们需要在函数名前添加EMSCRIPTEN_KEEPALIVE标记以告诉Emscripten我们的意图。

二、将C编译为WebAssembly

现在我们已经有了C代码，接下来需要将它编译成wasm，不仅如此，我们还需要生成相应的JavaScript胶接代码以便能够真正运行起来。

这里我们必须使用Emscripten编译器，你会发现有大量的命令行参数和编译方法可选，经过实践，我们找到了下面这个最友好最实用的组合：

emcc dice-roll.c -s WASM=1 -O3 -o index.js

各个参数含义如下：

emcc——代表Emscripten编译器；
dice-roll.c——包含C代码的文件；
-s WASM=1——指定使用WebAssembly；
-O3——代码优化级别，3已经是很高的级别了；
-o index.js——指定生成包含wasm模块所需的全部胶接代码的JS文件；

需要注意的是，尽管上面的emcc选项能够很好地应对我们这个例子，但在更复杂的情况下，好需要使用不同的方法，可查看官方文档了解更多内容：http://kripken.github.io/emscripten-site/docs/tools_reference/emcc.html#emccdoc。

三、在浏览器中加载WebAssembly代码

现在我们将回到熟悉的web开发领域，在当前文件夹创建index.html文件，引入相关的js文件与CSS文件。

<!DOCTYPE html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>WebAssembly 示例</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="CSS/styles.css"><link rel="stylesheet" href="CSS/dice-1.0.min.css"></head><body><div class="dice dice-6"></div><span>点击以摇动筛子</span>    <!-- 引入JavaScript胶节文件 --><!-- 这将会加载WebAssembly模块并运行其main函数 --> <script src="index.js"></script></body>
</html>

至此，项目结构已经完整，如下：

WebAssembly项目结构

style.css简单设置一下页面样式：

body {padding: 40px;font: normal 16px sans-serif;display: flex;flex-direction: column;
}.dice {display: block !important;font-size: 80px;margin: 0 auto 20px;cursor: pointer;
}span {display: block;margin: 0 auto;color: #333;
}

dice-1.0.min.js是来自Github（https://github.com/diafygi/dice-css）的一个微型CSS骰子样式库，包括了1-6的SVG矢量图，可作为内联图标使用，用法与font-awesome和glyphicons相同。其代码如下：

/** Dice.css v1.0* Code - MIT License - https://github.com/diafygi/dice-css* Images - Public Domain - https://openclipart.org/detail/105931/sixsided-dice-faces-lio-01*/
.dice{display:inline-block;min-height:1em;padding-left:1em;background-size:1em;background-repeat:no-repeat;}
.dice-1{background-image: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' version='1.1' viewBox='0 0 76.5 76.5' height='21.6' width='21.6'%3E%3Cg transform='translate(113.25%2C-494.1)'%3E%3Cg transform='matrix(0.5%2C0%2C0%2C0.5%2C-406.5%2C374.7)'%3E%3Crect x='588' y='240.4' width='150' height='150' ry='50' rx='50' style='fill%3A%23fff%3Bstroke-width%3A3%3Bstroke%3A%23000'%2F%3E%3Ccircle transform='translate(337.5%2C87.5)' cx='325' cy='227.4' r='12.5' style='fill%3A%23000%3Bstroke-width%3A3%3Bstroke%3A%23000'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E ");}
.dice-2{background-image: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' version='1.1' viewBox='0 0 76.5 76.5' height='21.6' width='21.6'%3E%3Cstyle%3E.s0%7Bfill%3A%23000%3Bstroke-width%3A3%3Bstroke%3A%23000%3B%7D%3C%2Fstyle%3E%3Cg transform='translate(109.9%2C-505.1)'%3E%3Cg transform='matrix(0.5%2C0%2C0%2C0.5%2C-415.6%2C485.6)'%3E%3Crect x='613' y='40.4' width='150' height='150' ry='50' rx='50' style='fill%3A%23fff%3Bstroke-width%3A3%3Bstroke%3A%23000'%2F%3E%3Ccircle transform='translate(326.5%2C-148.5)' cx='325' cy='227.4' r='12.5' class='s0'%2F%3E%3Ccircle transform='translate(398.5%2C-76.5)' cx='325' cy='227.4' r='12.5' class='s0'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E ");}
.dice-3{background-image: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' version='1.1' viewBox='0 0 76.5 76.5' height='21.6' width='21.6'%3E%3Cstyle%3E.s0%7Bfill%3A%23000%3Bstroke-width%3A3%3Bstroke%3A%23000%3B%7D%3C%2Fstyle%3E%3Cg transform='translate(84.9%2C-515.5)'%3E%3Cg transform='matrix(0.5%2C0%2C0%2C0.5%2C-290.6%2C514.9)'%3E%3Crect x='413' y='2.9' width='150' height='150' ry='50' rx='50' style='fill%3A%23fff%3Bstroke-width%3A3%3Bstroke%3A%23000'%2F%3E%3Ccircle transform='translate(126.5%2C-186)' cx='325' cy='227.4' r='12.5' class='s0'%2F%3E%3Ccircle transform='translate(198.5%2C-114)' cx='325' cy='227.4' r='12.5' class='s0'%2F%3E%3Ccircle transform='translate(162.5%2C-150)' cx='325' cy='227.4' r='12.5' class='s0'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E ");}
.dice-4{background-image: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' version='1.1' viewBox='0 0 76.5 76.5' height='21.6' width='21.6'%3E%3Cstyle%3E.s0%7Bfill%3A%23000%3Bstroke-width%3A3%3Bstroke%3A%23000%3B%7D%3C%2Fstyle%3E%3Cg transform='translate(90.7%2C-499.7)'%3E%3Cg transform='matrix(0.5%2C0%2C0%2C0.5%2C-302.7%2C367.8)'%3E%3Crect x='425.5' y='265.4' width='150' height='150' ry='50' rx='50' style='fill%3A%23fff%3Bstroke-width%3A3%3Bstroke%3A%23000'%2F%3E%3Ccircle transform='translate(139%2C76.5)' cx='325' cy='227.4' r='12.5' class='s0'%2F%3E%3Ccircle transform='translate(139%2C148.5)' cx='325' cy='227.4' r='12.5' class='s0'%2F%3E%3Ccircle transform='translate(211%2C76.5)' cx='325' cy='227.4' r='12.5' class='s0'%2F%3E%3Ccircle transform='translate(211%2C148.5)' cx='325' cy='227.4' r='12.5' class='s0'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E ");}
.dice-5{background-image: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' version='1.1' viewBox='0 0 76.5 76.5' height='21.6' width='21.6'%3E%3Cstyle%3E.s0%7Bfill%3A%23000%3Bstroke-width%3A3%3Bstroke%3A%23000%3B%7D%3C%2Fstyle%3E%3Cg transform='translate(89.2%2C-510.5)'%3E%3Cg transform='matrix(0.5%2C0%2C0%2C0.5%2C-194.9%2C372.3)'%3E%3Crect x='213' y='277.9' width='150' height='150' ry='50' rx='50' style='fill%3A%23fff%3Bstroke-width%3A3%3Bstroke%3A%23000'%2F%3E%3Ccircle transform='translate(-73.5%2C89)' cx='325' cy='227.4' r='12.5' class='s0'%2F%3E%3Ccircle transform='translate(-73.5%2C161)' cx='325' cy='227.4' r='12.5' class='s0'%2F%3E%3Ccircle transform='translate(-1.5%2C89)' cx='325' cy='227.4' r='12.5' class='s0'%2F%3E%3Ccircle transform='translate(-1.5%2C161)' cx='325' cy='227.4' r='12.5' class='s0'%2F%3E%3Ccircle transform='translate(-37.5%2C125)' cx='325' cy='227.4' r='12.5' class='s0'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E ");}
.dice-6{background-image: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' version='1.1' viewBox='0 0 76.5 76.5' height='21.6' width='21.6'%3E%3Cstyle%3E.s0%7Bfill%3A%23000%3Bstroke-width%3A3%3Bstroke%3A%23000%3B%7D%3C%2Fstyle%3E%3Cg transform='translate(86.2%2C-500.6)'%3E%3Cg transform='matrix(0.5%2C0%2C0%2C0.5%2C-98.2%2C356.2)'%3E%3Crect x='25.5' y='290.4' width='150' height='150' ry='50' rx='50' style='fill%3A%23fff%3Bstroke-width%3A3%3Bstroke%3A%23000'%2F%3E%3Ccircle transform='translate(-261%2C101.5)' cx='325' cy='227.4' r='12.5' class='s0'%2F%3E%3Ccircle transform='translate(-261%2C173.5)' cx='325' cy='227.4' r='12.5' class='s0'%2F%3E%3Ccircle transform='translate(-261%2C137.5)' cx='325' cy='227.4' r='12.5' class='s0'%2F%3E%3Ccircle transform='translate(-189%2C101.5)' cx='325' cy='227.4' r='12.5' class='s0'%2F%3E%3Ccircle transform='translate(-189%2C173.5)' cx='325' cy='227.4' r='12.5' class='s0'%2F%3E%3Ccircle transform='translate(-189%2C137.5)' cx='325' cy='227.4' r='12.5' class='s0'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");}

由于跨源问题的存在，我们需要一个本地服务器才能运行这个项目。在Linux/OS X系统中，可以在项目目录下运行如下命令：

python -m SimpleHTTPServer 9000

然后到浏览器中，打开localhost:9000以查看这个小应用。按F12打开控制台，即可看到我们在C代码中使用printf输出的问候语：

Chrome控制台

四、调用WebAssembly函数

最后一步是连接JavaScript与WebAssembly，由于胶接代码的存在（index.js），这项任务变得非常简单，它已经为我们处理好了所有的接线任务。

在浏览器中处理WebAssembly有一个非常强大的API可以使用，在此我们不会进行深入探讨因为这已经超出了入门的范畴，我们只需要Module接口及其ccall方法这部分即可。该方法允许我们通过函数名从C代码中调用一个函数，然后就向一般的JS函数一样使用就行了。

var result = Module.ccall('funcName',     // 函数名'number',       // 返回类型['number'],     // 参数类型[42]);          // 参数

调用此方法之后，result就将拥有对应C函数的所有功能，除函数名以外的所有参数都是可选的。

我们也可以使用缩写版：

// 通过在函数名前添加下划线来调用C函数
var result = _funcName();

roll_dice函数无需任何参数，在JavaScript代码中调用十分简单：

<script>// 当HTML dice元素被点击时，其值将会被改变var dice = document.querySelector('.dice');dice.addEventListener('click', function(){// 调用C代码中的roll_dice函数var result = _roll_dice();dice.className = "dice dice-" + result;                   });
</script>

将上面这段代码添加到index.html末尾，即</body>之前即可。

此时运行项目，即可看到结果：

总结

虽然现在WebAssembly还在发展的初期，但从公布的新标准来看，潜力巨大。在浏览器中运行低级语言的能力，将会带来全新的应用程序与web体验，而这，是仅仅通过JavaScript无法使用的。

诚然，使用WebAssembly在当前阶段还十分繁琐，文档需要分为多个部分，相应的工具也不容易使用，并且还需要JavaScript胶接代码才能使用wasm模块。但随着越来越多的人进入这个平台，所有这些问题都将会被解决。

令附一些参考资料：

WebAssembly官网（http://webassembly.org/）
WebAssembly on MDN（https://developer.mozilla.org/en-US/docs/WebAssembly）
Awesome WASM（https://github.com/mbasso/awesome-wasm）
Emscripten官网（https://kripken.github.io/emscripten-site/index.html）

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

运营商造势 CP、SP发力手机游戏
因3G而激发起来的无线互联网的朦胧愿景，正驱使几年前还是小众市场的手机游戏市场扩张为一个庞大的产业族群。尽管在商业模式、分成机制、平台开放、移动带宽等方面还存在诸多不确定性，但包括开发商、发行商、运营商、网络运营商、平台提供商、设备制造商在内，整个手机游戏产…...
2024/5/6 23:40:29
Axure RP 8 教程 - 查看原型
Axure小白的福利又来了，本教程主要讲述查看原型的一系列基础操作以及相关设置。希望大家边学边操作，学习效果更佳哦。Axure RP 8 教程 - 查看原型1.快速预览查看原型快速原型的快捷键为“F5”。或者，单击快捷键功能中的预览图标进行预览。导航菜单“发布”-“预览选项”中进…...
2024/4/19 22:59:57
2019本科se第一次作业-博客初体验
Deadline：2019-9-14 23:00，以博客发表日期为准评分标准:按时交 - 有分（满分100分），超期提交本次作业为0分，2周内未完成倒扣本次作业分数检查项目包括：完成任务1（10分）完成任务2（10分）完成任务3（70分）博文规范（行文清晰流畅）（10分）抄袭 - 倒扣本次作业分数任…...
2024/5/9 6:46:21
微信开发者工具无法打开界面的解决办法
遇到的问题:最近几天没关电脑,发现微信开发者工具非常卡顿,于是重启了一下开发者工具,这一重启不要紧,连续好几次都打不开了,查看任务管理器,发现有一大堆微信开发者工具的进程,所以程序是应该运行了,但是界面没打开..上网查了一下,重启系统,重装开发者工具一般是能解决该问题的…...
2024/4/18 3:37:32
最新浏览器速度测试
各种浏览器FireFox，IE，Opera，Safari都发布了新版本，都号称自己的是最快的浏览器。我们来测试一下，看看到底谁启动最快，谁使用更少的内存，谁支持动态界面比如Gmail更快。我们使用了一些不那么科学，但是快速有效的方式来测试。测试系统我们测试了各个浏览器的最新版本：…...
2024/5/6 6:15:47
201671010415+金生芳+作业互评与改进报告
任务一：从班级博客园的以下班级的软件工程第一次作业中各选一篇学生博文作业进行阅读并进行评论对2019级春季计算机学院软件工程（罗杰）（北京航空航天大学）素朴拉斯软件工程第0次作业进行阅读并进行评论。博客地址：https://www.cnblogs.com/zuoshun/p/10438399.html读完…...
2024/5/8 3:13:57
解决【微信开发者工具】调试【企业微信】自建应用网页出现未绑定企业号开发者
强调一下：微信开发者工具可以调试企业微信的自建应用，暂时还不支持调试第三方应用。调试第三方应用时同样也会提示未绑定企业号开发者。下面将针对如何调试自建应用出现的企业号未绑定问题。1、首先，将自己设置为企业微信的管理员。2、进入企业微信---我的企业---微工作台--…...
2024/5/7 0:45:25
Axure8.0基础教程（1-10）AxureRP8实战手册
本文转载自小楼老师博客：http://www.iaxure.com/3768.html Axure新手必须掌握的56个基础操作。基础操作篇本篇包含56种常见的基础操作，初学者应在掌握本篇内容后再进行实战案例篇的学习，以免产生学习障碍。同时，建议具备一定基础的读者学习本篇中相对生疏的内容，并加以掌握…...
2024/4/18 3:38:02
互联网人物点评之一
互联网人物点评之一文/飞天含雪 qq 543415188 一. 张朝阳----互联网界的"舞美师"--------搜狐公司董事局主席兼首席执行官如果要在互联网界找出谁能与张朝阳的"作秀"能力想匹敌,实为难矣!清华大学的本科生涯,麻省理工的留学背景,或多或少都给予张朝阳…...
2024/4/18 8:28:38
Axure 7.0教程_小楼作品（十六）多值单变量的页面传值
axure7.0教程_小楼作品（十六）多值单变量的页面传值作者: 小楼一夜听春语分类: Axure7.0教程时间: 2013-08-20 12:00 ė4,822 浏览数 62条评论今天这篇Axure教程，主要讲的是字符串函数的应用。在我们做一些Axure原型的时候，经常需要实现在两个或多个页面传递一些信息的效果…...
2024/5/9 0:42:02
【2012年终总结】之一 opencv + ds采集摄像头视频 MFC点点滴滴
1、MFC单文档多文档程序不让MFC来更新菜单 1 在CMainFrame::CMainFrame中添加 2 3 m_bAutoMenuEnable = FALSE; 标题栏图标的更改 1 //cuihao, 标题栏图标; 2 CCameraMonitorApp *pApp = (CCameraMonitorApp*)AfxGetApp(); 3 HICON hIcon = pApp->LoadIcon(IDI_ICON3); 4 …...
2024/4/12 0:27:09
微信开发者工具调试微信网页授权，点击‘登录’按钮无效
微信开发者工具调试微信网页授权，点击‘登录’按钮无效问题描述 h5页面需要获取微信用户信息，参考微信开发者文档，一步步走到用开发者工具调试页面，却发现点击登录按钮没有反应！如下看日志信息好吧，说这个图片路径是http，而应该是https，可是这是微信自己的页面啊，怎…...
2024/5/8 4:44:24
各大浏览器兼容性报告
IE、FF、Safari、OP不同浏览器兼容报告分类： UI前端設計2011-12-0517:01 323人阅读评论(0) 收藏举报 IE、FF、Safari、OP不同浏览器兼容报告1 浏览器内核简介 TridentIE浏览器(GreenBrowser绿色浏览器, 遨游浏览器....都是IE)GeckosFireFoxPrestoOperaWebkitSafari、…...
2024/4/18 3:47:38
网络营销策略
有一位小有名气的广告制片人名叫托尼查理，工作以外的业余时间，就是上网炒股，胜算多于失算，于是俨然以投资天才自居，到处炫耀。但始自4月4日的股灾无情地将他股市上的投资缩水30%多。这次他恍然大悟：“市场行情好的时候，总觉得自己是投资高手；现在市场跌了，才认识到我…...
2024/4/20 4:20:14
20145220韩旭飞第五周博客
20145220韩旭飞第五周博客敬爱的娄老师，我是20145220韩旭飞，经过这几周的学习，我认识到自己存在很大的问题，首先我没有认真完成您要求的博客，敷衍了事。所以导致我的每周成绩十分的低，通过您与我们的对话，我充分认识到了，我需要努力学习这门课程，每周的博客自己认真…...
2024/4/18 3:48:44
ubuntu20下使用微信开发者工具
发现一个可以在linux下使用的微信开发者工具，安装方法看官方文档，需要安装winelinux微信开发者工具...
2024/4/18 3:52:34
Axure PR的使用
1759139 王越Axure RP是美国Axure Software Solution公司旗舰产品，是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时…...
2024/4/18 3:47:51
C语言自学完备手册(19)——冒泡排序
自定义View系列教程00–推翻自己和过往，重学自定义View 自定义View系列教程01–常用工具介绍自定义View系列教程02–onMeasure源码详尽分析自定义View系列教程03–onLayout源码详尽分析自定义View系列教程04–Draw源码分析及其实践自定义View系列教程05–示例分析自定义V…...
2024/5/9 6:19:07
微信浏览器点击出现卡顿现象及解决方案
做的小游戏在手机微信中打开测试和在UC浏览器中测试，点击时候微信浏览器出现明显的卡顿现象，查阅发现是：主要是由于200ms超时导致内核不一定会一直处理touchmove事件，一旦超时会将后续所有的事件转交给UI处理，导致touchmove不会一直触发。系统浏览器也存在同样的问题，为…...
2024/4/19 8:41:48
MFC_0
NM_CLICK https://blog.csdn.net/pipi0714/article/details/23439861 cstring去除最后三个字符 https://zhidao.baidu.com/question/429840606514328332.html CString str1="asdfadsfasf"; str1.Left(str1.GetLength() - 1); //CString友好多方法时对字符串操作的，…...
2024/4/18 3:47:44