编译wasm Web应用

刚学完WebAssembly的入门课,卖弄一点入门知识。

首先我们知道wasm是目标语言,是一种新的V-ISA标准,所以编写wasm应用,正常来说不会直接使用WAT可读文本格式,更不会用wasm字节码;而是使用其他高级语言编写源代码,经过编译后得到wasm应用。课程中使用了C++来编写源代码,所以这里我也用C++来编写demo。

wasm的运行环境主要分为两类,一类是Web浏览器,另一类就是out-of-web环境,运行于Web浏览器的wasm应用主要使用Emscripten来编译得到,因为它会在编译过程中,为所编译代码在Web平台的功能适配性进行一定的调整。

针对Web平台的编译

对于功能适配性的调整,可以从下面这个例子中得到体现。

编码

首先我们编写一段功能简单的C++源代码:

#include 

extern "C" {
  // 防止Name Mangling
  int add(int x, int y) {
    return x + y;
  }
}

int main(int argc, char **argv) {
  std::cout << add(10, 20) << std::endl;
  return 0;
}

这段代码里,声明了一个函数“add”,它的定义被放置在“extern "C" {}”结构中,以防止函数名被C++的Name Mangling机制更改,从而确保在宿主环境中调用该函数时,可以用与C++源码中保持一致的函数名,来直接调用这个函数。

这段代码中还定义了主函数main,其内部调用了add函数,并且通过std::cout 来将该函数的调用结果输出到stdout

编译

现在我们可以用Emscripten这个工具集中最为重要的编译器组件emcc,来编译这段源代码。命令如下所示:

emcc main.cc -s WASM=1 -O3 -o main.html

通过“-s”参数,为emcc指定了编译时选项“WASM=1”,这样emcc就会将输入的源代码编译为wasm格式目标代码,“-o”参数则指定了产出文件的格式为“.html”,这样Emscripten就会生成一个可以直接在浏览器中使用的Web应用。

这个自动生成的应用中,包含了wasm模块代码、JavaScript代码以及HTML代码。

运行

现在我们可以尝试在本地运行这个简单的Web应用。首先自行准备一个简单的Web服务器:

const http = require('http');
const url = require('url');
const fs = require('fs');
const path = require('path');

const PORT = 8888;
const mime = {
  "html": "text/html;charset=UTF-8",
  "wasm": "application/wasm" // 遇到".wasm"格式文件的请求时,返回特定的MIME
}

http.createServer((req, res) => {
  let realPath = path.join(__dirname, `.${url.parse(req.url).pathname}`);
  // 检查所访问文件是否存在并且可读
  fs.access(realPath, fs.constants.R_OK, err => {
    if (err) {
      res.writeHead(404, { 'Content-Type': 'text/plain' });
      res.end();
    } else {
      fs.readFile(realPath, "binary", (err, file) => {
        if (err) {
          // 文件读取失败时返回500
          res.writeHead(500, { 'Content-Type': 'text/plain' });
          end();
        } else {
          // 根据请求的文件返回相应的文件内容
          let ext = path.extname(realPath);
          ext = ext ? ext.slice(1) : 'unknow';
          let contentType = mime[ext] || 'text/plain';
          res.writeHead(200, { 'Content-Type', contentType });
          res.write(file, "binary");
          res.end();
        }
      });
    }
  });
}).listen(PORT);
console.log("Server is running at port: " + PORT + ".");

这段代码中最为重要的一个地方,就是对wasm格式文件请求的处理。

通过返回特殊的MIME类型“application/wasm”,我们明确告诉浏览器,这是一个wasm格式的文件,这样浏览器就可以允许应用使用针对wasm文件的“流式编译”方式,来加载和解析该文件。

现在我们通过8888端口来访问刚刚编译生成的main.html文件。

编译wasm Web应用_第1张图片

可以看到,Emscripten将C++源码中使用std::cout将数据输出到stdout,模拟为输出到页面上指定的textarea区域。这就是Emscripten针对Web平台的功能适配性调整。

再继续看,Emscripten自动生成的完整wasm Web应用,不管是js文件还是html文件,体积都偏大,这是因为Emscripten自动生成的“胶水代码”中,包含有通过JavaScript模拟出的POSIX运行时环境的完整代码,而大多数情况下,我们不需要这些。

仅生成wasm模块

那怎样可以使得Emscripten仅生成wasm模块,而js胶水代码和Web API这两部分的代码由我们自己编写呢?

答案就是调整编译时的命令行参数。那么我们要如何去编写JS来调用wasm模块导出的函数呢?

课程里有个图像处理的例子,这里就来整个小例子。

首先编写我们的HTML页面:




    
        
        
        DEMO
    
    
        

Counter:

0

这里想要实现一个功能,点击按钮后,span内的数字加1,当然这个功能JavaScript也能做,但现在作为练习,我们要通过调用wasm函数来实现。

然后就是重要的JavaScript代码,如下:

// index.js
document.addEventListener('DOMContentLoaded',  async () => {
    let response = await fetch('./index.wasm');
    let bytes = await response.arrayBuffer();
    let {instance} = await WebAssembly.instantiate(bytes);
    let {
        increase
    } = instance.exports;

    const span = document.querySelector('span');
    const button = document.querySelector('#increaseButton');
    let count = 0;
    button.addEventListener('click', () => {
        count = increase(count);
        span.innerText = count;
    });
});

首先,通过fetch获取wasm模块,并获取fetch方法返回的Response对象;

然后,调用response对象上的arrayBuffer()方法,将内容解析为ArrayBuffer的形式,这个ArrayBuffer将作为WebAssembly.instantiate方法的实际调用参数;这是一个用于实例化wasm模块的方法。

接着,WebAssembly.instantiate将实例化对应的wasm模块,我们就可以获得模块的实例对象,在instance变量中,可以获得从wasm模块导出的所有方法。

此时,我们就可以调用wasm模块的方法了,假设instance上有个increase方法,就可以这样调用。

现在,我们编写对应的C++代码并进行编译。

// index.cc
#include 

extern "C" {
    EMSCRIPTEN_KEEPALIVE int increase(int x) {
        return x+1;
    }
}

此处我们需要引入,因为需要使用其中定义的宏EMSCRIPTEN_KEEPALIVE,因为这个文件中我们不声明主函数main,也不在文件内部调用这个increase函数,为了防止在编译过程中被DCE(Dead Code Elimination)处理掉,需要使用这个宏来标记函数。

现在我们来编译这个文件。

$ emcc index.cc -s WASM=1 -O3 --no-entry -o index.wasm

仅生成wasm模块文件的编译方式,通常称为”standalone模式”。

“-o”参数为我们指定了输出的文件格式为“.wasm”,这就是告诉Emscripten以“standalone”的方式来编译C++源码。

“--no-entry”参数则告诉编译器,这个wasm模块没有声明“main”函数。

上述命令执行完毕后,就会得到一个名为“index.wasm”的二进制模块文件。

此时我们就可以尝试去运行这个Web应用,可以看到和期待的效果一致。

编译wasm Web应用_第2张图片

当然这个demo很简单,目前要发挥wasm的优势,更适合将其应用在计算密集的功能。

调试应用

当我们编写完应用时,少不了要调试。那么如何针对wasm应用进行调试呢,Emscripten也提供了一些方式。

编译阶段

首先是针对编译阶段,当使用emcc编译项目时,可以通过为命令添加“EMCC_DEBUG”环境变量的方式,来让emcc以“调试模式”来编译项目。

$ EMCC_DEBUG=1 emcc index.cc \
> -s WASM=1 \
> -O3 \
> --no-entry -o index.wasm

可以看到编译时输出了很多的信息,这是因为我们将EMCC_DEBUG这个环境变量的值设置为1,EMCC_DEBUG的值可以设置为3个值,分别是0、1、2。

0表示关闭调试模式,这和不加这个环境变量是一样的效果;1表示输出编译时的调试性信息,同时生成包含有编译器各个阶段运行信息的中间文件;可用于编译流程的调试。

可以通过ls命令查看生成了哪些文件;调试性信息中包含了各个编译阶段所实际调用的命令行信息,通过对这些信息分析,能够辅助开发者查找编译失败的原因。

当EMCC_DEBUG的值设置为2时,可以得到更多的调试性信息。

运行阶段

当我们成功地编译了wasm应用,但在实际运行时发生了错误,就需要在运行时进行调试。Emscripten也提供了一定的支持,我们可以在编译时设定参数“-g“以保留与调试相关的信息。

当设置为”-gsource-map“时,emcc会生成可用于在Web浏览器中进行“源码级”调试的特殊DWARF信息;通过这些特殊格式的信息,使我们可以直接在浏览器中对wasm模块编译之前的源代码进行诸如“设置断点”、“单步跟踪”等调试手段。

这里我们尝试调试之前编写的index.cc。

$ emcc index.cc -gsource-map -s WASM=1 -O3 --no-entry -o index.wasm

此时重新加载Web应用并打开“开发者面板”的“sources”Tab,就可以通过“操作”C++源代码的方式,来为应用所使用的wasm模块设置断点。(wasm模块的加载方式需要改为“流式编译”)。

编译wasm Web应用_第3张图片

通过这种方式,开发者就可以方便地在wasm Web应用的运行过程中,调试发生在wasm模块内部的“源码级”错误。

WebAssembly作为一种相对较新的技术,可以先保持一点了解。

你可能感兴趣的:(编译wasm Web应用)