欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

用WebAssembly与rust和c交互的demo 博客分类： emscriptenasm.js asm.jsemscripten 

程序员文章站 2024-03-05 22:04:43
...
32,263.98

入门教程
https://learnku.com/docs/rust-lang/2018/ch01-01-installation/4494

安装： 
curl https://sh.rustup.rs -sSf | sh
source $HOME/.cargo/env

linux 和mac 基本一样 
rustup toolchain install nightly-x86_64-unknown-linux-gnu
rustup target add wasm32-unknown-unknown --toolchain nightly
rustc +nightly --target=wasm32-unknown-unknown -O --crate-type=cdylib src/lib.rs -o build/hello.wasm

hello rust:
语法：https://learnku.com/docs/rust-lang/2018

https://www.hellorust.com/news/native-wasm-target.html

hexdump hello.wasm



###############
webassembly:

############
helloword1:

https://blog.csdn.net/weixin_34208283/article/details/88005347 

cargo new hello_world --lib


main.js 
//! hello world with WebAssembly
const imports = {
  env: {
    hello_insert_dom: () => {
      const h1 = document.createElement('h1');
      h1.innerHTML = 'Hello, world';
      const body = document.querySelector('body');
      body.appendChild(h1);
    }
  }
};

fetch('build/hello.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes, imports))
  .then(results => {
    console.log(results);
    const exports = results.instance.exports;
    exports.hello_call_js();
    // exports.hello_call_js_pass_data();
  });


vim src/lib.rs 
//! a WebAssembly module with Rust
extern {
  fn hello_insert_dom();
}

#[no_mangle]
pub extern fn hello_call_js() { // equal pub extern "C" fn ...
    unsafe {
        hello_insert_dom();
    }
}

index.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebAssembly</title>
</head>
<body>
<script src="main.js"></script>
</body>


mkdir build
rustc +nightly --target=wasm32-unknown-unknown -O --crate-type=cdylib src/lib.rs -o build/hello.wasm

生成hello.wasm
python2 -m SimpleHTTPServer 8000
localhost:8000
index.html--->main.js:WebAssembly---->hello.asm--->main.js:import


####################
helloworld2:

https://blog.csdn.net/teajs/article/details/78937865
部分代码比较老，修改如下
helloworld.c 
#include "helloworld.h"

void sayHi() {
    alert("hello,world!");
}

helloworld.h 
extern void alert(char* str);



emcc helloworld.c -s BINARYEN=1 -s SIDE_MODULE=1 -O3 -s 
"EXPORTED_FUNCTIONS=['_sayHi']"  -o helloworld.wasm


生成helloworld.wasm
index.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebAssembly</title>
</head>
<body>
<script src="main.js"></script>
</body>


main.js 中使用helloworld.wasm 
//! hello world with WebAssembly
let imports = {
  env: {
       // 'memoryBase':0,
        '__memory_base': 0,
        'tableBase': 0,
        'memory': new WebAssembly.Memory({initial: 256 }),
        'table': new WebAssembly.Table({initial: 256, element: "anyfunc" }),
        _alert: function (p) {
            // 这一块说明请看文章
            alert(utf8ToString(p));
        }
  }
};
function utf8ToString(p) {
    let h = new Uint8Array(imports.env.memory.buffer);
    let s = "";
    for (let i = p; h[i]; i++) {
        s += String.fromCharCode(h[i]);
    }
    return s;
}

fetch('helloworld.wasm').
       then(response => response.arrayBuffer()).
       then(bytes => WebAssembly.instantiate(bytes, imports)).
       then(mod => mod.instance).
       then(instance => {
           let exports = instance.exports;
           exports._sayHi();
       });


说明：
1.c通过 extern void alert定义接口，对应js的env里定义的_alert 用emcc生成helloworld.wasm
2.main.js 加载 helloworld.wasm，调用 c里定义的sayHi ,加个下划线_sayHi()


几张图让你看懂WebAssembly
https://www.jianshu.com/p/bff8aa23fe4d

############

demo:
https://yksoft1.github.io/dosboxxem-demo/



######################
emscripten调用文件系统:
mem,nodefs,idbfs
https://wasm.comptechs.cn/cppwasm/ch3-03-fs.html
memfile:
emcc packfile.cc -o packfile.js --preload-file hello.txt 
#include <stdio.h>
int main() {
    FILE* fp = fopen("hello.txt", "rt");
    if (fp) {
        while (!feof(fp)) {
            char c = fgetc(fp);
            if (c != EOF) {
                putchar(c);
            }
        }
        fclose(fp);
    }
    return 0;
}

index.html 
<html>
<head></head>
<body>
<script >
    Module={};
    Module.onRuntimeInitialized = function(){

    }
</script>

<script src="packfile.js"></script>
</body>
</html



packdir.cc
读写的例子 
#include <stdio.h>

void read_fs(const char* fname) {
    FILE* fp = fopen(fname, "rt");
    if (fp) {
        while (!feof(fp)) {
            char c = fgetc(fp);
            if (c != EOF) {
                putchar(c);
            }
        }
        fclose(fp);
    }
}

void write_fs() {
    FILE* fp = fopen("t3.txt", "wt");
    if (fp) {
        fprintf(fp, "This is t3.txt.wo ca...\n");
        fclose(fp);
    }
}

int main() {
    read_fs("dat_dir/t1.txt");
    read_fs("dat_dir/t2.txt");
    read_fs("dat_dir/sub_dir/t3.txt");

    write_fs();
    read_fs("t3.txt");
    return 0;
}



相同的c文件 ，file和执行js分开：
先给files打包
python /opt/mt/emsdk/emscripten/incoming/tools/file_packager.py fp.data --preload dat_dir --js-output=fp.js
再给
packdir.cc打包：注意参数FORCE_FILESYSTEM
emcc packdir.cc -o packdir_sep.js -s FORCE_FILESYSTEM=1

执行的html 
<html>
<head></head>
<body>
<script >
    Module={};
    Module.onRuntimeInitialized = function(){
    }
</script>
<script src="fp.js"></script>
<script src="packdir_sep.js"></script>
</body>
</html


使用nodefs，在node的环境下使用 
#include <stdio.h>
#include <emscripten.h>
//nodefs.cc
void setup_nodefs() {
    EM_ASM(
        FS.mkdir('/data');
        FS.mount(NODEFS, {root:'.'}, '/data');
    );
}

int main() {
    setup_nodefs();

    FILE* fp = fopen("/data/nodefs_data.txt", "r+t");
    if (fp == NULL) fp = fopen("/data/nodefs_data.txt", "w+t");
    int count = 0;
    if (fp) {
        fscanf(fp, "%d", &count);
        count++;
        fseek(fp, 0, SEEK_SET);
        fprintf(fp, "%d", count);
        fclose(fp);
        printf("count:%d\n", count);
    }
    else {
        printf("fopen failed.\n");
    }

    return 0;
}

注意需要加#include <emscripten.h> 这个头
emcc nodefs.cc -lnodefs.js -o nodefs.js

node nodefs.js多运行几次，发现写入的数字在自增


https://www.cntofu.com/book/150/zh/ch2-c-js/ch2-01-js-call-c.md
需要定义EM_PORT_API 

#include <stdio.h>
#include <emscripten.h>
#ifndef EM_PORT_API
#   if defined(__EMSCRIPTEN__)
#       include <emscripten.h>
#       if defined(__cplusplus)
#           define EM_PORT_API(rettype) extern "C" rettype EMSCRIPTEN_KEEPALIVE
#       else
#           define EM_PORT_API(rettype) rettype EMSCRIPTEN_KEEPALIVE
#       endif
#   else
#       if defined(__cplusplus)
#           define EM_PORT_API(rettype) extern "C" rettype
#       else
#           define EM_PORT_API(rettype) rettype
#       endif
#   endif
#endif
void sync_idbfs() {
    EM_ASM(
        FS.syncfs(function (err) {});
    );
}

EM_PORT_API(void) test() {
    FILE* fp = fopen("/data/nodefs_data.txt", "r+t");
    if (fp == NULL) fp = fopen("/data/nodefs_data.txt", "w+t");
    int count = 0;
    if (fp) {
        fscanf(fp, "%d", &count);
        count++;
        fseek(fp, 0, SEEK_SET);
        fprintf(fp, "%d", count);
        fclose(fp);
        printf("count:%d\n", count);

        sync_idbfs();
    }
    else {
        printf("fopen failed.\n");
    }
}

int main() {
    EM_ASM(
        FS.mkdir('/data');
        FS.mount(IDBFS, {}, '/data');
        FS.syncfs(true, function (err) {
            assert(!err);
            ccall('test', 'v');
        });
    );

    return 0;
}

emcc idbfs.cc -lidbfs.js -o idbfs.js

idbfs.html 
<html>
<head></head>
<body>
<script >
    Module={};
    Module.onRuntimeInitialized = function(){
    }
</script>
<script src="idbfs.js"></script>
</body>
</html



indexedDB的基本使用：
http://www.ruanyifeng.com/blog/2018/07/indexeddb.html
indexeddb.html 

<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input type="button" value="add" onclick="add()" />
<input type="button" value="read" onclick="read()" />
<input type="button" value="readAll" onclick="readAll()" />
<input type="button" value="update" onclick="update()" />
<input type="button" value="remove" onclick="remove()" />
<script >
var db;
    var request = window.indexedDB.open("test", 2);
    request.onerror = function (event) {
      console.log('数据库打开报错');
    };
    request.onsuccess = function (event) {
      db = request.result;
      console.log('数据库打开成功');
    };
    request.onupgradeneeded = function (event) {
        console.log("upgrade begin");
        db = event.target.result;
        var objectStore;
        if (!db.objectStoreNames.contains('person')) {
            objectStore = db.createObjectStore('person', { keyPath: 'id' });
            objectStore.createIndex('name', 'name', { unique: false });
            objectStore.createIndex('email', 'email', { unique: true })
        }
    }
//----------add-------
    function add() {
        console.log(JSON.stringify(db));
      var request = db.transaction(['person'], 'readwrite')
        .objectStore('person')
        .add({ id: 1, name: '张三', age: 24, email: 'zhangsan@example.com' });

      request.onsuccess = function (event) {
        console.log('数据写入成功');
      };

      request.onerror = function (event) {
        console.log('数据写入失败');
      }
    }

    //add();
   // console.log("----add end");
//-------read--------
    function read() {
       var transaction = db.transaction(['person']);
       var objectStore = transaction.objectStore('person');
       var request = objectStore.get(1);

       request.onerror = function(event) {
         console.log('事务失败');
       };

       request.onsuccess = function( event) {
          if (request.result) {
            console.log('Name: ' + request.result.name);
            console.log('Age: ' + request.result.age);
            console.log('Email: ' + request.result.email);
          } else {
            console.log('未获得数据记录');
          }
       };
    }
//-------readAll----
function readAll() {
  var objectStore = db.transaction('person').objectStore('person');
   objectStore.openCursor().onsuccess = function (event) {
     var cursor = event.target.result;

     if (cursor) {
       console.log('Id: ' + cursor.key);
       console.log('Name: ' + cursor.value.name);
       console.log('Age: ' + cursor.value.age);
       console.log('Email: ' + cursor.value.email);
       cursor.continue();
    } else {
      console.log('没有更多数据了！');
    }
  };
}
//--update-----
function update() {
  var request = db.transaction(['person'], 'readwrite')
    .objectStore('person')
    .put({ id: 1, name: '李四', age: 35, email: 'lisi@example.com' });

  request.onsuccess = function (event) {
    console.log('数据更新成功');
  };

  request.onerror = function (event) {
    console.log('数据更新失败');
  }
}
//----remove-----
function remove() {
  var request = db.transaction(['person'], 'readwrite')
    .objectStore('person')
    .delete(1);

  request.onsuccess = function (event) {
    console.log('数据删除成功');
  };
}

console.log("---end");
//});
</script>
</body>
</html>




##########调试：
https://blog.csdn.net/VhWfR2u02Q/article/details/80148319

vim nginx/conf/mime.types
增加
application/wasm                                 wasm;



##########debug:https://blog.csdn.net/VhWfR2u02Q/article/details/80148319

debug.c 
int sumOfSquare(int a,int b){
    int t1=a*a;
    int t2=b*b;
    return t1+t2;
}

debug.html 
<html>
<head>
<meta charset="UTF-8">
  <script>
    const importObj = {
        env: {
            memory: new WebAssembly.Memory({initial: 256, maximum: 256}),
            __memory_base: 0,
            tableBase: 0,
            table: new WebAssembly.Table({initial: 10, element: 'anyfunc'}),
            abort:function(){}
        }
    };


  fetch('./debug.wasm').then(response =>
    response.arrayBuffer()
  ).then(bytes => WebAssembly.instantiate(bytes,importObj)).then(results => {
    instance = results.instance;
    var sumOfSquare= instance.exports._sumOfSquare;

     var button = document.getElementById('run');
     button.addEventListener('click', function() {
          var input1 = 3;
          var input2 = 4;
          alert('sumOfSquare('+input1+','+input2+')='+sumOfSquare(input1,input2));
     }, false);
  });

  </script>
</head>
<body>
  <input type="button" id="run" value="click"/>
</body>
</html>


编译：
如果试试运行
emcc debug.c -O1 -s WASM=1 -s SIDE_MODULE=1 -s "EXPORTED_FUNCTIONS=['_sumOfSquare']" -o debug.wasm

如果要debug：
emcc debug.c -O1 -s WASM=1 -s SIDE_MODULE=1 -s "EXPORTED_FUNCTIONS=['_sumOfSquare']" -o debug.wasm -g4 --source-map-base http://212.129.249.212/rusttest/debug/
注意是能打开debug.html的路径
在firefox上的调试器上能看到debug.c











相关标签： asm.js emscripten

上一篇： Android基于TextView属性android:ellipsize实现跑马灯效果的方法

下一篇： Spring Batch学习 博客分类： WEB  

推荐阅读