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

浏览器中能调用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. Steeltoe之Circuit Breaker篇

    在分布式系统中,服务发生异常是很正常的现象.为了处理这类"例外",可以采取不同的应对策略,断路器模式即是其中一种方法.这个模式的主要特点是其可以阻断失败的级联影响,不会因为一个服务 ...

  2. 扒来的lstdc++.6.0.9有效解决方案

    找到了Xcode10模拟器和真机运行的办法了1.将libstdc++_sim.zip解压,放到目录 /Applications/Xcode.app/Contents/Developer/Platfor ...

  3. C常用的字符串函数实现

    /** 查找字符串 source 中 是否有指定的子串出现,如果有返回第一个匹配的字符 @param source 源 @param chars 目标 @return 返回值 */ char *fin ...

  4. php之函数

    scope(空间) unpack (解压) Traversable (穿越) performance(性能) experiment (检验) properties (属性) trailing (尾随) ...

  5. [skill][https][ssl/tls] HTTPS相关知识汇总

    结论前置: A 身份验证 证书, 服务器证书 B 密钥协商 RSA   DHE / ECDHE   PSK C 加密通信 加密通信采用对称加密,使用B阶段协商出来的密钥. B 阶段如果使用 RSA 协 ...

  6. Flink – process watermark

    WindowOperator.processElement 主要的工作,将当前的element的value加到对应的window中, windowState.setCurrentNamespace(w ...

  7. Chromimu与JS交互的测试

    CHROMIMU与JS交互的测试 好东西 谷歌浏览器 学习 研究  http://blog.csdn.net/grassdragon/article/details/51659798 Chromimu ...

  8. MonkeyRunner_运行脚本(一)

    前提:环境已部署, 使用数据线连接上真机  一.使用cmd窗口单步执行monkeyrunner命令 打开cmd窗口,输入monkeyrunner (前提设置好环境变量):然后按照monkeyrunne ...

  9. 简单的document操作

    1.新增商品:新建文档,建立索引PUT /index/type/id{ "json数据"}例如:PUT /ecommerce/product/1{ "name" ...

  10. dba工作内容

    一.数据库管理员的工作内容 关键词:dba工作内容 转自:http://blog.sina.com.cn/s/blog_44e0d0490102won1.html 1.规划与建设: 1.数据库服务器环 ...