移植一个c项目到WebAssembly的体验

刚好碰到一个需求,就是将一个c开发的小的开源项目移植到WebAssembly,希望能够在浏览器中使用,花了一个周末时间进行了移植,这里说一下移植过程中碰到的坑,希望能帮助其他人避免.

整体体验

先说一下结论吧,emscripten是目前c/c项目移植到WebAssembly的首先工具,总的来说对于c/c语法层面的支持已经非常完善,但是c/c本身非常复杂. 老实说,成功编译一个复杂的c/c项目本身就是一个非常大的挑战,更不用说需要在Webassembly这种非posix系统上编译. 说一下我的几个感受:

1. 一般项目不做修改基本上是不可能直接编译成功的
1. 最大的优势是支持了文件系统,网络,图形化等操作,其中文件系统是可以说兼容posix,网络我没体验.
1. 可以无缝和JS进行交互,但是复杂数据结构的交互就很头疼.
1. 用户上传的超大文件,WORKERFS支持有bug ,具体参考这里 Prototype to test libzim compiled with emscripten

emscripten 基本使用

参考官方文档即可,找一下入门教程,练练手基本就明白了. 这里说一下交互的基本工具.

EM_JS

在c/c++中声明一个JS函数,可以直接用c调用. 比如

//js的初始化
EM_JS(void, initialize, (),{
    FS.mkdir("query");
    window.kglobal = {
        start:0, //文件默认开始为0
    }; //全局变量存储地方
});

如果需要传参数,这里是一个例子:

EM_ASYNC_JS(char *,myfgets,(int length),{
    return   await processFile(length);
});

返回一个字符串,传进去一个length参数.

C调用JS

除了声明函数,也可以直接调用一个片段,就用EM_ASM系列,一样可以传参数,可以获得返回值:


int myfeof() {
    int x=EM_ASM_INT({
        var x=processEof();
        return x;
    });
    return x;
}

踩的坑

一般文件上传处理问题

先说如果不是大文件,那么其实有完美的例子,直接用MEMFS,c程序几乎就不用修改,例子在emscripten-projects. 可以说完美. 这里看一下关键代码:

  // Add the selected files to the emscripten virtual file system.
  function handleFiles() {
    // Wrap the C++ functions as JavaScript so that they can be called
    // https://emscripten.org/docs/porting/connecting_cpp_and_javascript/Interacting-with-code.html#interacting-with-code-ccall-cwrap
    let addFile = Module["cwrap"]("addFile", null, ["string"]);
    let processFiles = Module["cwrap"]("processFiles", null, []);
    
    let completedCount = 0;
    let files = this.files;

    for (let file of files) {
      let reader = new FileReader();
      reader.onerror = err;
      
      reader.onloadend = () => {
        // Add the file to the list
       // addFileToList(file.name, file.type);
      
        // A new file is created on the emscripten virtual file system.
        // This is part of the private file system API
        // https://emscripten.org/docs/api_reference/advanced-apis.html#advanced-file-system-api
        Module["FS_createDataFile"](
          ".", // directory on the virtual file system to place the file in
          file.name, // name of the file
          new Uint8Array(reader.result), // data to file the file with
          true, // Allow C++ to read the file
          true // Allow C++ to write the file
        );
        
        // Tell C++ that the file is accessible
        addFile(file.name);
        
        // Tell C++ that all files are accessible after creating all the files
        ++completedCount;
        if (completedCount == files.length) {
          processFiles();
        }
      };
      
      // reader.result will be an ArrayBuffer
      reader.readAsArrayBuffer(file);
    }
  }

通过Module["FS_createDataFile"]这个底层的api,就把用户上传的文件暴露在了MEMFS中,可以在c++系统中通过posix API进行处理了. 当然他的问题就是他必须一次性全部读进去 reader.readAsArrayBuffer(file).

c++中的代码是:

cpp


extern "C" void processFiles() {
  std::cout << "Processing files\n";
  for (const std::string &name : fileNames) {
    // Do whatever you need to do...
    std::cout << "Processing file " << name << '\n';
    
    addFileToList(name.c_str(), ""); // adds extra for testing shows how to do js calls

    // You can do whatever you want with the file.
    std::ifstream file{name};
    if (file.is_open()) {
      std::cout << "First byte of the file is: " << file.get() << '\n';
    }

  }
extern "C" void addFile(const char *name) {
  fileNames.push_back(name);
  std::cout << "Added file " << name << '\n';
}

可以看到jsstring和c++string进行了自动转换,还挺方便的.

这里的编译方式为:

bash

emcc displayInfo.cpp -std=c++11 -s 'EXPORTED_FUNCTIONS=["_addFile","_processFiles","_main","_readdata"]' -s 'EXTRA_EXPORTED_RUNTIME_METHODS=["cwrap"]' -s FORCE_FILESYSTEM=1  -o display.html

超大文件上传处理

但是对于超大文件,比如10个G,这种内存中肯定放不下了,那么这时候就要纠结怎么办了? 首先我找到了Prototype to test libzim compiled with emscripten,这里说直接将BLOB暴露给WORKERFS,超过2g有问题,所以我就直接放起来走WORKERFS, 转而走自己封装的道路.

基本思路就是:

在js中将file保存到全局变量中
修改代码,读上传文件时,封装myfgets,通过js一次读取指定的块
其他相关的封装.

下面是完整的js代码:

html

<input type="file" id="fileinput" name="files[]"  onchange="handleFiles()"  style="display: none" />
<button onclick="upload()" id="upload">start upload</button>
<button onclick="startprocess()"> start process </button>
<div id="progress">
    0%
</div>
<output id="list"></output>
<script src="result.js"></script>

<script>
    function upload(){
        console.log("upload");
        document.getElementById("fileinput").click();
    }
    function handleFiles(arg1,arg2,arg3) {
        var input=document.getElementById("fileinput");
        console.log("file changed",input.files);
        if(input.files) {
            window.kglobal.file=input.files[0];
            startprocess();
        }
    }
    function startprocess() {
        console.log("call cmd_dist2");
        Module._cmd_dist2();
        console.log("call cmd_dist2 end");
    }
    var last=0;
    function updateProgress(start){
        var p=start/kglobal.file.size;
        if(p-last>0.01) {
            document.getElementById("progress").innerText=start/kglobal.file.size*100+"%";
            last=p;
        }
    }
    function readFileAsync(file,start,length) {
        return new Promise((resolve, reject) => {
            let reader = new FileReader();
            reader.onload = () => {
                resolve(reader.result);
            };
            reader.onerror = () => {
                console.log("reader error");
                reject();
            };
            var fileslice=file.slice(start,start+length);
            // reader.result will be an ArrayBuffer
            reader.readAsArrayBuffer(fileslice);
            updateProgress(start);
        })
    }
    function ab2str(buf) {
        return String.fromCharCode.apply(null, new Uint16Array(buf));
    }
    var  heapSpace = null;  // 1
    function transferToHeap(arr) {
        if(!heapSpace) {
            heapSpace =  Module._malloc(40*1024);
        }
        // console.log("arr=",arr);
        Module.HEAPU8.set(arr,heapSpace); // 2
        return heapSpace;
    }
    window.processFile=async function(length) {
        try {
            let start=kglobal.start;
            console.log("start=",start,"length=",length);
            let file = kglobal.file;
            let contentBuffer=await readFileAsync(file,start+length,length);
            kglobal.start+=length;
            console.log("jsstring=",contentBuffer.length);
            return  transferToHeap(new Uint8Array(contentBuffer))
        } catch(err) {
            console.log(err);
        }
    }
    window.processEof=function (){
        console.log("call feof start=",kglobal.start,"file size=",kglobal.file.size);
        if(kglobal.start>=kglobal.file.size) {
            alert("complete");
            return 1;
        }
        return 0;
    }
    document.addEventListener("DOMContentLoaded", (event) => {
      console.log("dom content loaded");

  });
</script>

说一下调用流程:

handleFiles将file保存到全局变量中
调用_cmd_dist2,这个是c函数,是c处理的流程
c中读取这个文件时,用myfgets,而myfgets真正读取调用的是processFile
processFile是一个async的js函数,每次读取都要这么一遍,效率肯定低.
processFile返回char* ,供c函数消费.

Uint8Array在c和JS中的交互

首先是c调用js,返回一个char的做法,其实这里是一个uint8Array,当做char处理了而已.

    var  heapSpace = null;  // 1
    function transferToHeap(arr) {
        if(!heapSpace) {
            heapSpace =  Module._malloc(40*1024);
        }
        // console.log("arr=",arr);
        Module.HEAPU8.set(arr,heapSpace); // 2
        return heapSpace;
    }
    return  transferToHeap(new Uint8Array(contentBuffer))

关键是transferToHeap函数,首先Module._malloc在c中分配一块内存,这个其实就是malloc,然后用Module.HEAPU8.set将Uint8Array的内容复制到这个内存中. 这里用了一个小技巧,因为我每次只会处理一个文件,并且是严格单线程的,所以并不需要每次都分配内存,也就不需要每次都释放,只需要一次性分配即可.

JS调用操作c中的数组

这是c的导出函数

cpp

extern "C" {
  void readdata(char vals[], int size);
}
void readdata(char vals[], int size) {
  char data[4000]={0};
  int i=0;
  for(;i<size;i++){
    data[i]=vals[i];
    // printf("data[%d]=%d",i,vals[i]);
  }
  data[i]=0;
  printf("read vals len=%d,data=%s\n",size,data);
}

js中则是类似:

var arr=new Uint8Array(); //内容填充忽略...
arrayOnHeap = transferToHeap(arr);
Module._readdata(arrayOnHeap, arr.length);

其他小坑

原来程序中用了popen,还调用了shell命令,这种只能重写了.
原程序用了zlib,一开始尝试用官方的zlib进行编译,发现根本过不了,幸好emscripten官方就有这个lib的移植. emscripten zlib
原程序用了openmp,还未找到合适的编译方法,幸好只影响性能,不影响功能
EM_ASYNC_JS使用,编译时要加上: -s ASYNCIFY
因为了用malloc,编译时要加上-s ALLOW_MEMORY_GROWTH=1

整体体验 ​

emscripten 基本使用 ​

EM_JS ​

C调用JS ​

踩的坑 ​

一般文件上传处理问题 ​

超大文件上传处理 ​

Uint8Array在c和JS中的交互 ​

JS调用操作c中的数组 ​

其他小坑 ​

参考文章 ​