`
haoningabc
  • 浏览: 1495540 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

用WebAssembly与rust和c交互的demo

asm.jsemscripten 
阅读更多
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











分享到：
| em-dosbox
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    demo-rust:带wasm-pack的Rust WebAssembly Hello World演示

    "demo-rust:带wasm-pack的Rust WebAssembly Hello World演示"揭示了这是一个使用Rust语言和WebAssembly技术实现的简单示例项目，重点在于展示如何将Rust代码编译为WebAssembly（WASM）模块，并通过wasm-pack工具与...

    可行性报告1

    项目Demo的构建将展示Rust编译为WebAssembly后的运行效果，通过JavaScript调用WebAssembly模块，实现前端与分布式文件系统的交互。 2. 理论依据与技术依据 2.1 工具链 使用wasm-pack工具将Rust代码打包为...

    基于WebAssembly和Javascript构建的数字信号处理库_C++_JavaScript_下载.zip

    【标题】中的“基于WebAssembly和Javascript构建的数字信号处理库”揭示了这个项目的核心技术栈，即WebAssembly（简称WASM）与JavaScript，用于创建一个数字信号处理库。数字信号处理是信息科技中的关键领域，它涉及...

    用Rust编写的Python解释器-Python开发

    RustPython用Rust:snake:编写的Python-3（CPython&gt; = 3.5.0）解释器。 用法查看我们在WebAssembly上运行的在线演示。 RustPython需要Rust最新的st RustPython一个用Rust编写的Python-3...或使用交互式外壳：$ cargo

    RustPython 一个用Rust编写的Python解释器-python

    RustPython 一个用Rust编写的Python解释器 RustPython 一个用 Rust 编写的 Python-3 (CPython &gt;= 3.5.0) 解释器 :snake: :face_screaming_in_fear: :sign_of_the_horns: 。 用法查看我们在 WebAssembly 上运行的...

    web-assembly-demo

    WebAssembly是一种通用的、跨平台的虚拟机格式，它允许开发者使用C、C++、Rust、Go等语言编写高性能的代码，并在Web浏览器中执行。WASM的二进制格式设计得非常紧凑，加载速度快，且在浏览器中执行时安全性高。 2. ...

    wasmdome：装配机械手：WasmDome之外-一个用于演示waSCC功能和用例的游戏

    WebAssembly是一种低级虚拟机格式，它允许开发者用C、C++、Rust等系统级语言编写代码，并在Web浏览器中运行，速度接近原生应用。它的出现极大地扩展了Web平台的能力，使得高性能图形、物理模拟和其他计算密集型任务...

    ewasm-assemblyscript-demo

    WebAssembly是一种低级的虚拟机指令集，允许开发者使用C、C++、Rust等语言编写的代码在Web上运行，提供接近原生的性能。`AssemblyScript`是TypeScript的一个子集，它为WebAssembly提供了一种静态类型的、类...

    多代理系统生锈pixijs

    2. `examples`或`demo`目录：包含运行示例的代码，用于展示如何启动和交互多代理系统。 3. `Cargo.toml`：Rust项目配置文件，列出了项目的依赖项，如PixiJS的WebAssembly版本或其他必要的库。 4. `README.md`：项目...

Magicbox
Global site tag (gtag.js) - Google Analytics