今天，要给前端造点儿福利

浏览器中能调用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++模块的更多相关文章

  1. Ooui：在浏览器中运行.NET应用 Ooui.Wasm：浏览器中的.NET

    在过去数年中,桌面应用开发人员一直处境艰难,因为人们的主要关注点聚焦于Web和移动应用.由于Microsoft未来Windows平台的计划未定,并且UWP应用也没有突破性进展,因此技术落伍的责任也不应 ...

  2. 在浏览器中运行java applet

    最近在看java applet,在eclipse中可以正常运行,于是想试试在浏览器中运行.但途中遇到很多问题,网上很多解答也不全面,于是想把自己的解决过程记录下来. [1]首先,编写的applet程序 ...

  3. Windows 配置Apache以便在浏览器中运行Python script的CGI模式

    打开httpd.conf,找到”#ScriptInterpreterSource Registry “,移除前面的注释# (如果找不到这行,就自己添加进去) 找到“Options Indexes Fo ...

  4. 如何在浏览器中运行 VS Code？

    摘要: WEB IDE新时代! 作者:SHUHARI 的博客 原文:有趣的项目 - 在浏览器中运行 Visual Studio Code Fundebug按照原文要求转载,版权归原作者所有. 众所周知 ...

  5. JS规则 编程练习 考考大家的数学，计算以下计算公式的结果。然后在浏览器中运行一下，看看结果是否跟你的结果一致。

    编程练习 考考大家的数学,计算以下计算公式的结果.然后在浏览器中运行一下,看看结果是否跟你的结果一致. 任务 第一步: 在  ? 处填写你的答案. 第二步: 填写完成后,运行一下,看看是不是跟你填写的 ...

  6. Unity生成的WebGL如何在浏览器中运行

    前言:以为在学完了COMP30019后,应该不会再接触Unity了,没想到之后实习让我去做把一个Unity项目转到WebGL,而关于Unity的WebGL资料很少,基本除了Unity的Manual就只 ...

  7. 在浏览器中使用ES6的模块功能 import 及 export

    感谢英文原作者 Jake Archibald 的技术分享 各个浏览器对于ES6模块 import . export的支持情况 Safari 10.1. Chrome 61. Firefox 54 – ...

  8. 从高德采集最新的省市区三级坐标和行政区域边界，用js在浏览器中运行

    本文描述的是对国家统计局于2019-01-31发布的<2018年统计用区划代码和城乡划分代码(截止2018年10月31日)>中省市区三级的坐标和行政区域边界的采集. 本文更新(移步查阅): ...

  9. 从统计局采集最新的省市区镇数据，用js在浏览器中运行 V2

    本文描述的是对国家统计局于2019-01-31发布的<2018年统计用区划代码和城乡划分代码(截止2018年10月31日)>的采集. 相对于用于和采集2016版.2017版的js代码做了比 ...

随机推荐

  1. shell特殊变量，记录一下

    $0 当前脚本的文件名 $n 传递给脚本或函数的参数.n 是一个数字,表示第几个参数.例如,第一个参数是$1,第二个参数是$2. $# 传递给脚本或函数的参数个数. $* 传递给脚本或函数的所有参数. ...

  2. php后台对接ios，安卓，API接口设计和实践完全攻略，涨薪必备技能

    2016年12月29日13:45:27    关于接口设计要说的东西很多,可能写一个系列都可以,vsd图都得画很多张,但是由于个人时间和精力有限,所有有些东西后面再补充   说道接口设计第一反应就是r ...

  3. yum install 下载后保存rpm包

    keepcache=0 更改为1下载RPM包 不会自动删除 vi /etc/yum.conf [main] cachedir=/var/cache/yum/$basearch/$releasever ...

  4. [No0000166]CPU的组成结构及其原理

    中央处理器(Central Processing Unit, CPU) CPU的基本架构和工作原理其实百科上讲得已经相当清楚了,不过我觉得有些事情呢还是给个例子出来比较方便学习.本文会先从内存地址,计 ...

  5. [adminstrative][CentOS] CentOS 7 常用操作笔记

    CentOS从6换到7, 还没有系统的学习.虽然主要用的是systemd,但还是有一下特有的区别,会逐步整理如下: 官网文档索引:https://access.redhat.com/documenta ...

  6. Flink - StreamJob

      先看最简单的例子, final StreamExecutionEnvironment env = StreamExecutionEnvironment.getExecutionEnvironmen ...

  7. Flink - TypeInformation

    Flink 自己创建一套独立的类型系统, 参考, https://ci.apache.org/projects/flink/flink-docs-release-0.10/internals/type ...

  8. 图->存储结构->邻接多重表

    文字描述 邻接多重表是无向图的另一种链式存储结构. 虽然邻接表是无向图的一种很有效的存储结构,在邻接表中容易求得顶点和边的各种信息. 但是,在邻接表中每一条边(vi,vj)有两个结点,分别在第i个和第 ...

  9. DATAPUMP进程查询

    SELECT * FROM DBA_DATAPUMP_SESSIONS; SELECT * FROM DBA_DATAPUMP_JOBS; 例如: SYS@orclasm > SELECT * ...

  10. 【PyQt5-Qt Designer】QProgressBar() 进度条

    QProgressBar() 进度条 QProgressBar简介 QProgressBar小部件提供了一个水平或垂直的进度条. 进度条用于向用户指示操作的进度,并向他们保证应用程序仍在运行. 进度条 ...