乐趣区

关于webassembly:初识WebAssembly

作者：

jiezi

在

近期线上收实验报告的时候，学生们上传的图片乌七八糟的。前期提醒应用 扫描王 等软件解决后再上传成果好了很多。但无疑这给学生了带来了相应的繁琐。于是：如何在WEB能疾速的解决图片，并实时的显示成果成为了新的需要。

首先，咱们能够点击demo感受一下它的魅力。

而解决图片往往都在后端执行，间接在 WEB 解决则须要一个叫WebAssembly的常识，简略来说就是浏览器容许运行二进制的文件，而这个二进制的文件则是各种原后端语言通过编译器编译进去的。

所以能够用C++来写一个图片处理程序，并应用WebAssembly把它利用到浏览器中便成了解决方案。

本文在macos下，演示如何把Hello world运行在浏览器中。

Emscripten

要想把C++源码编译成浏览器能够运行的 WebAssembly , 则须要一些编译器，而Emscripten则属于其中的一个。

docker（举荐）

docker无疑是最简略的装置形式，官网image提供了多个版本供咱们抉择。

咱们在应用前仅仅须要下载相应的image即可，比方咱们下载最新的版本：

 % docker  pull emscripten/emsdk

而后咱们进行文件夹映射，并执行容器中的emcc命令即可，比方：

docker run --rm -v $(pwd):/src -u $(id -u):$(id -g) \
  emscripten/emsdk emcc helloworld.cpp -o helloworld.js

则示意将以后门路下的helloworld.cpp编译成helloworld.js

macos

装置 Emscripten 须要从github下载相当的代码，并执行相应的操作，

环境要求：

  1. macOS 10.14 Mojave及以上
  2. 装置 Xcode Command Line Tools
  3. 装置git
  4. 装置cmake

命令如下：

# 下载代码
$ git clone https://github.com/emscripten-core/emsdk.git --depth=1
# 进入下载的文件夹
$ cd emsdk
# 执行装置命令，因为这个操作会从网下下载相应的第三方安装包，所以这可能须要一个比拟敌对的网络
$ ./emsdk install latest
# 源活咱们刚刚装置的 latest 版本
$ ./emsdk activate latest
# 源活环境变量，每启动一新的shell，都要执行一次
$ source ./emsdk_env.sh

验证：

创立以下文件：

#include <stdio.h>

int main() {
    printf("Hello World\n");
    return 0;
}

验证

咱们新建hello.c文件

#include <stdio.h>

int main() {
    printf("Hello World\n");
    return 0;
}

而后执行emcc hello.c -o hello.html

panjie@panjies-Mac-Pro src $ emcc hello.c -o hello.html
shared:INFO: (Emscripten: Running sanity checks)
cache:INFO: generating system asset: symbol_lists/ed436b369ffc02205671a0a9df422f9da2cf641b.txt... (this will be cached in "/Users/panjie/github/emscripten-core/emsdk/upstream/emscripten/cache/symbol_lists/ed436b369ffc02205671a0a9df422f9da2cf641b.txt" for subsequent builds)
cache:INFO:  - ok

而后咱们就失去了 一个 html 文件，一个js文件以及一个wasm文件：

panjie@panjies-Mac-Pro src % ls
hello.c        hello.html    hello.js    hello.wasm

接着咱们起一个http-server，并在浏览器中查看成果：

panjie@panjies-Mac-Pro src % http-server
Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8081
  http://192.168.0.242:8081
Hit CTRL-C to stop the server

如果你是用的docker，则能够如下执行：

panjie@panjies-Mac-Pro src % docker run --rm -v $(pwd):/src -u $(id -u):$(id -g) emscripten/emsdk emcc hello.c -o hello.html      
cache:INFO: generating system asset: symbol_lists/ed436b369ffc02205671a0a9df422f9da2cf641b.txt... (this will be cached in "/emsdk/upstream/emscripten/cache/symbol_lists/ed436b369ffc02205671a0a9df422f9da2cf641b.txt" for subsequent builds)
cache:INFO:  - ok

最初的成果是统一的。

剖析

.c文件编译后生成了3个新的文件，html文件用于展现页面并且调用js文件，js文件则充当获取二进制文件，装载二进制文件，调用二进制文件并获取返回值的目标，而wasm则是浏览器间接执行的二进制文件。该文件由c语言编译而来，能够兼顾性能与效率，重要的是本来一些只能反对在应用程序中的性能，能够被移植到浏览器中来了。

编译至指定模板

Emscripten的github源码中，为咱们提供了自定义的html模板，上面咱们将 HelloWorld输出到这个自定义的模板中。

首先咱们在以后文件夹中建设子文件夹html_template，并将位于Emscripten的github源码文件夹中的 /upstream/emscripten/src/shell_minimal.html复制到html_template文件夹。

panjie@panjies-Mac-Pro src % tree
.
├── hello.c
├── hello.html
├── hello.js
├── hello.wasm
└── html_template
    └── shell_minimal.html

1 directory, 5 files

接着咱们执行如下命令：

panjie@panjies-Mac-Pro src %  docker run --rm -v $(pwd):/src -u $(id -u):$(id -g) emscripten/emsdk emcc  -o hello1.html hello.c -O3 --shell-file html_template/shell_minimal.html
cache:INFO: generating system asset: symbol_lists/812dbbffa7488aec7a503446fae422688638f439.txt... (this will be cached in "/emsdk/upstream/emscripten/cache/symbol_lists/812dbbffa7488aec7a503446fae422688638f439.txt" for subsequent builds)
cache:INFO:  - ok

留神，下面的命令中O3不是03.

此时，便会应用模模板html_template/shell_minimal.html来生成hello1.html，应用http-server起个服务后查看后果如下：

如果咱们将以后的网络模仿成慢速3G:

则会发下如下启动过程：

先下载

再筹备

最初才是出现后果

申请的时序如下：

如果咱们开启缓存，那么整体申请将会敌对的多：

自定义模板

学习 DEMO

通过 shell_minimal.html 模板的学习，咱们简略的把要害的信息拿进去学习一下。首先是 CSS 款式局部，该部门次要用于管制页面显示，咱们临时略过。

上图这个html基本上能够分为两个局部，第一局部是图像UI输入，第三局部是sheel控制台输入。比方咱们的hello.c，并没有输入任何图像，而是间接打印了 Hello World，所以上述图像就输入了一个黑框框。

在模板中，用于输入图像的标签是canvas:

<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>

而用于输入shell信息的是textarea

<textarea class="emscripten" id="output" rows="8"></textarea>

而以下的script代码的作用起的是连接的作用：加载.c，运行.c，输入.c的后果。

    <script type='text/javascript'>
      // 获取三个dom，别离用于显示 状态、进度，以及 loading时转圈圈
      var statusElement = document.getElementById('status');
      var progressElement = document.getElementById('progress');
      var spinnerElement = document.getElementById('spinner');

      // 订义一个对象，该对象的各个属性办法都是WebAssembly规定好的
      var Module = {
        // 运行前执行的
        preRun: [],
        // 运行后执行的
        postRun: [],
        // 输入后果
        print: (function() {
          // 获取用于输入后果的 textarea DOM
          var element = document.getElementById('output');
          if (element) element.value = ''; // 清空textarea中的内容
          // 返回function供hello.js调用，hello.js会在执行hello.c后调用该函数，并把执行hello.c后果做为参考text传入
          return function(text) {
            // arguments的上下文位于hello.js中，字段意思看是 调用参数. 如果调用的参数大于1，则重写 text 的为arguments数组
            if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
            // 上面这几行就给出的示例，次要是用于替换html中的关键字，比方 < 应用 &lt; 来替换
            //text = text.replace(/&/g, "&amp;");
            //text = text.replace(/</g, "&lt;");
            //text = text.replace(/>/g, "&gt;");
            //text = text.replace('\n', '<br>', 'g');
            console.log(text);
            // 向 textarea 中输入内容，并调焦点设置为textarea的底部
            if (element) {
              element.value += text + "\n";
              element.scrollTop = element.scrollHeight; // focus on bottom
            }
          };
        })(),
        // 输入图像
        canvas: (function() {
          // 获取 canvas
          var canvas = document.getElementById('canvas');

          // 浏览器对图像的渲染基于webgl，所以做一个默认的初始化选项，
          // 为了保障程序的健壮性，咱们应该在webgl上下文失落时，揭示用户从新刷新界面
          // 原文如下：
          // As a default initial behavior, pop up an alert when webgl context is lost. To make your
          // application robust, you may want to override this behavior before shipping!
          // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
          canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);

          // 将这个 canvas 返回给hello.js，hello.js则会将图像输入到这个 canvas 上
          return canvas;
        })(),
        // 设置状态(比方开始下载、下载的百分比，筹备结束)，这个应该不是WebAssembly的官网接口，而是自定义的
        setStatus: function(text) {
          // 设置个最初更新工夫
          if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
          // 如果更新内容与最初的更新内容雷同，则什么也不做
          if (text === Module.setStatus.last.text) return;
          // 判断传入的是否为下载的百分比（进度）
          var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
          var now = Date.now();
          // 如果传入的是下载百分比，而且间隔上次传入的工夫小于30ms，则什么也不做。
          if (m && now - Module.setStatus.last.time < 30) return; // if this is a progress update, skip it if too soon
          // 设置最初的工夫及最初的文本
          Module.setStatus.last.time = now;
          Module.setStatus.last.text = text;

          if (m) {
            // 传入的是下载百分比，则格式化
            text = m[1];
            progressElement.value = parseInt(m[2])*100;
            progressElement.max = parseInt(m[4])*100;
            progressElement.hidden = false;
            spinnerElement.hidden = false;
          } else {
            // 不是百分比，则清空进度值
            progressElement.value = null;
            progressElement.max = null;
            progressElement.hidden = true;

            // 当text为空时，暗藏掉spinner
            if (!text) spinnerElement.hidden = true;
          }
          // 最初设置状态元素的内容
          statusElement.innerHTML = text;
        },
        // 总依赖数
        totalDependencies: 0,
        // 监督运行依赖项，该办法会被距离调用，用于告诉以后加载的进度
        // @param left 残余依赖项
        monitorRunDependencies: function(left) {
          // 未加载结束，则设置状态为 Preparing... (已加载数/未加载数)；否则显示 All downloads complete
          this.totalDependencies = Math.max(this.totalDependencies, left);
          Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
        }
      };

      // 设置起始状态
      Module.setStatus('Downloading...');
      // 设置下异样的回调
      window.onerror = function() {
        Module.setStatus('Exception thrown, see JavaScript console');
        spinnerElement.style.display = 'none';
        Module.setStatus = function(text) {
          if (text) console.error('[post-exception status] ' + text);
        };
      };
    </script>

模板最初存在的{{{ SCRIPT }}}则用于替换为 js 文件的援用。如此，咱们先申明了合乎 WebAssembly 接口的对象 Module，而后引入了 js 文件，而js文件则会利用这个刚刚申明的Module。这样一来，WebAssembly的 JS 文件更与以后页面联合起来了。

自定义模板

为了验证后面的假如，咱们上面来如下自定义模板并命名为sample.html，同是样存到html_template文件夹中：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>WebAssembly</title>
</head>
<body>
    <div style="margin-left: auto; margin-right: auto; width: 400px; margin-top:10em; text-align: center;">
        <p id="output">这里是输入的内容</p>
    </div>
    <script type="text/javascript">
      // 订义一个对象，该对象的各个属性办法都是WebAssembly规定好的
      var Module = {
        preRun: [],
        postRun: [],
        // 输入后果
        print: (function() {
          // 获取用于输入后果的 textarea DOM
          var element = document.getElementById('output');
          if (element) element.innerHTML = '';
          return function(text) {
            if (element) {
              element.innerHTML += text;
            }
          };
        })(),
        totalDependencies: 0,
        monitorRunDependencies: function(left) {
            console.log(left);
        }
      };

      // 设置下异样的回调
      window.onerror = function() {
        alert('error');
      };
    </script>
    {{{ SCRIPT }}}
</body>
</html>

而后咱们运行以下命令来将hello.c渲染进来：

docker run --rm -v $(pwd):/src -u $(id -u):$(id -g) emscripten/emsdk emcc  -o sample.html hello.c -O3 --shell-file html_template/sample.html

最初咱们将失去以sample打头的js html 以及 wasm 文件，运行http-server并查看：

函数

最初咱们再看看如何调用.cpp文件中的函数，咱们简略用c++语言写个求开平方，并把它利用html页面中。官网文档指出调用 C 语言中function最简略的办法便是应用 ccall以及cwrap.

ccall() 应用指定的参数来调用一个编译后的 C 函数，而cwrap()则是把 C 中的函数包裹成js的函数，而后再像调用一般的js函数一样来进行调用。所以如果咱们只想调用一次，那么用ccall就好了，如果咱们想屡次调用，则建设应用cwarp来封装一下。

创立一个 sqrt.cpp 文件并退出以下代码：

#include <math.h>

// 兼容 C++
extern "C" {
    int int_sqrt(int x) {
      return sqrt(x);
    }
}

接下来咱们将其编译为 js wasm文件，须要留神的是:

  1. 本次咱们是先编译，而后再写模板，所以咱们把指标文件设置为sqrt.js，而非sqrt.html
  2. 咱们须要指定编译的办法，并以_打头
  3. 咱们须要指定ccall、cwarp
docker run --rm -v $(pwd):/src -u $(id -u):$(id -g) emscripten/emsdk emcc sqrt.cpp -o sqrt.js -sEXPORTED_FUNCTIONS=_int_sqrt -sEXPORTED_RUNTIME_METHODS=ccall,cwrap

最终将生成 js 及 wasm 两种类型的文件。

最初，咱们写个html代码来尝试调用一下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>加法器</title>
</head>
<body style="margin-left:auto; margin-right:auto; width: 800px;">
    <div>请输出:<input type="number" id="num"/></div>
    <div>后果：<p id="output"></p></div>
    <button onclick="sqrt()">运算</button>

    <script type="text/javascript">
        // 订义一个对象，该对象的各个属性办法都是WebAssembly规定好的
        var Module = {};

        // 设置下异样的回调
        window.onerror = function() {
            alert('error');
        };

        // 获取输出、输入
        var num = document.getElementById("num");
        var output = document.getElementById("output");

        // 定义开平方办法
        var sqrt = function() {
            // 调用c++中的int_sqrt办法
            const result = Module.ccall(
                "int_sqrt",     // 办法名
                "number",       // 返回值类型
                ["number"],     // 参数类型，这是个数组，因为可能是多参数
                [+num.value]    // 参数值，也是个数组，因为可能是多参数
              );
            // 最初将后果给html元素
            output.innerHTML = result;
        }
    </script>
    <!-- 手动援用js文件 -->
    <script async src=sqrt.js></script>
</body>
</html>

最初咱们再测试下 cwrap :

<script type="text/javascript">
        let intSqrt;
        // 订义一个对象，该对象的各个属性办法都是WebAssembly规定好的
        var Module = {
            monitorRunDependencies: function(left) {
                // 加载结束后初始化iniSqrt办法
                if (left === 0 && !intSqrt) {
                    intSqrt = Module.cwrap('int_sqrt', 'number', ['number'])
                }
            }
        };

        // 设置下异样的回调
        window.onerror = function() {
            alert('error');
        };

        // 获取输出、输入
        var num = document.getElementById("num");
        var output = document.getElementById("output");

        // 定义开平方办法
        var sqrt = function() {
            // 间接调用intSqrt办法
            output.innerHTML = intSqrt ? intSqrt(+num.value) : '';
        }
    </script>

最终实现成果雷同。

总结

WebAssembly是个变革性的货色，有人说它将引领下一代WEB开发，它的呈现使得本来仅能装置客户端能力实现在性能，当下能够间接在 WEB 端来应用了。同时因为其编译为2进制的个性，在保障了性能的同时能提供了足够的安全性。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章