Javascript 单文件WebAssembly html演示

我在哪里可以找到一个最简单的单文件演示，显示html中WebAssembly的用法

JavaScript示例很简单：

<script>
function hw() { console.log("Hello, world."); }
</script>
<button onclick="hw()">HW</button>

函数hw（）{console.log（“你好，世界”）；}
硬件

有类似的WebAssembly吗

我希望它有一个类似于硬编码字节缓冲区的东西，带有一个wasm二进制文件，它被加载并执行一些简单的功能。以下是我期望的概要：

<script>
function hw() { 
    var wasm_code = [255, 0, 128, ..., whatever, ...];
    var magic = give_me_wasm(wasm_code);
    var x = magic.my_add(2,2);
    console.log("2 + 2 = ", x); 
}
</script>
<button onclick="hw()">HW</button>

函数hw（）{
var wasm_code=[255,0,128，…，随便什么，…]；
var magic=give_me_wasm（wasm_代码）；
var x=magic.my_add（2,2）；
console.log（“2+2=”，x）；
}
硬件

这样的演示可以完成吗？它是一个简单的表单，可以粘贴在开发人员控制台中并在不设置任何框架和工具的情况下进行尝试？

我自己完成了：

<script>
var wasm_base64;
var wasm_buffer;
var wasm;
var wasm_instance;
function hw() {
    wasm_base64 = "AGFzbQEAAAABBwFgAnx8AXwDAgEABwoBBm15X2FkZAAACgkBBwAgACABoAs=";
    wasm_buffer = Uint8Array.from(atob(wasm_base64), c => c.charCodeAt(0)).buffer;
    WebAssembly.compile(wasm_buffer).then(x => {
        wasm = x;
        wasm_instance = new WebAssembly.Instance(wasm);
        var x = wasm_instance.exports.my_add(2,2);
        console.log("2+2 = ",x);
    });
}
</script>
<button onclick="hw()">HW</button>

以下是生成base64缓冲区的命令行：

$ wat2wasm q.wat -o w.wasm
$ base64 -w0 w.wasm ;echo
AGFzbQEAAAABBwFgAnx8AXwDAgEABwoBBm15X2FkZAAACgkBBwAgACABoAs=

wasm

和

wasm\u实例

对象可以使用开发者控制台进行探索

登录Firefox 63.0b9。

是我在Gist上找到的一个评论很好的例子。将代码嵌入到

标记中，您将获得一个“单文件WebAssembly html演示”

为方便起见，请在此复制：

// this code is from a simple add function in c:
//
// // hello.c
// int add(int a, int b) {
//    return a + b;
// }

//
// compiles it with emcc (http://webassembly.org/getting-started/developers-guide/)
// $ git clone https://github.com/juj/emsdk.git
// $ cd emsdk
// $ ./emsdk install latest
// $ ./emsdk activate latest
// $ source ./emsdk_env.sh --build=Release
//
// once installed:
//
// $ emcc hello.c -s ONLY_MY_CODE=1 -s WASM=1 -s EXPORTED_FUNCTIONS="['_add']" -o hello.js
//
// yes, not sure why we have to add '_' in front of the exported function.
// take the hello.wasm and serialize it to base64, e.g. using node

// const code = fs.readFileSync('./hello.wasm')
// code.toString('base64')
// AGFzbQEAAAABCwJgAX8AYAJ/fwF/An4HA2VudgZtZW1vcnkCAYACgAIDZW52BXRhYmxlAXABAAADZW52Cm1lbW9yeUJhc2UDfwADZW52CXRhYmxlQmFzZQN/AANlbnYIU1RBQ0tUT1ADfwADZW52CVNUQUNLX01BWAN/AANlbnYSYWJvcnRTdGFja092ZXJmbG93AAADAgEBBhMDfwEjAgt/ASMDC30BQwAAAAALBwgBBF9hZGQAAQkBAAo7ATkBB38jBCEIIwRBEGokBCMEIwVOBEBBEBAACyAAIQIgASEDIAIhBCADIQUgBCAFaiEGIAgkBCAGDws=


// https://www.npmjs.com/package/base64-arraybuffer
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";

// Use a lookup table to find the index.
const lookup = new Uint8Array(256);
for (let i = 0; i < chars.length; i++) {
    lookup[chars.charCodeAt(i)] = i;
}

function decode(base64) {
  var bufferLength = base64.length * 0.75,
      len = base64.length, i, p = 0,
      encoded1, encoded2, encoded3, encoded4;

  if (base64[base64.length - 1] === "=") {
    bufferLength--;
    if (base64[base64.length - 2] === "=") {
      bufferLength--;
    }
  }

  var arraybuffer = new ArrayBuffer(bufferLength),
      bytes = new Uint8Array(arraybuffer);

  for (i = 0; i < len; i+=4) {
    encoded1 = lookup[base64.charCodeAt(i)];
    encoded2 = lookup[base64.charCodeAt(i+1)];
    encoded3 = lookup[base64.charCodeAt(i+2)];
    encoded4 = lookup[base64.charCodeAt(i+3)];

    bytes[p++] = (encoded1 << 2) | (encoded2 >> 4);
    bytes[p++] = ((encoded2 & 15) << 4) | (encoded3 >> 2);
    bytes[p++] = ((encoded3 & 3) << 6) | (encoded4 & 63);
  }

  return arraybuffer;
} 

// this is the serialized code.
const code = 'AGFzbQEAAAABCwJgAX8AYAJ/fwF/An4HA2VudgZtZW1vcnkCAYACgAIDZW52BXRhYmxlAXABAAADZW52Cm1lbW9yeUJhc2UDfwADZW52CXRhYmxlQmFzZQN/AANlbnYIU1RBQ0tUT1ADfwADZW52CVNUQUNLX01BWAN/AANlbnYSYWJvcnRTdGFja092ZXJmbG93AAADAgEBBhMDfwEjAgt/ASMDC30BQwAAAAALBwgBBF9hZGQAAQkBAAo7ATkBB38jBCEIIwRBEGokBCMEIwVOBEBBEBAACyAAIQIgASEDIAIhBCADIQUgBCAFaiEGIAgkBCAGDws='
const buffer = decode(code)

// bootstrap the env.
const memory = new WebAssembly.Memory({ initial: 256, maximum: 256 })
const importObj = {
    env: {
        abortStackOverflow: () => { throw new Error('overflow'); },
        table: new WebAssembly.Table({ initial: 0, maximum: 0, element: 'anyfunc' }),
        tableBase: 0,
        memory: memory,
        memoryBase: 1024,
        STACKTOP: 0,
        STACK_MAX: memory.buffer.byteLength,
    }
}

// instantiate
WebAssembly.instantiate(buffer, importObj)
  // take a look at that _add.
  .then(({module, instance}) => { console.log(instance.exports._add(1, 2)) })
  .catch((err) => { console.log(err.message) })

//此代码来自c中的一个简单add函数：
//
////你好，c
//整数相加（整数a，整数b）{
//返回a+b；
// }
//
//用emcc编译它(http://webassembly.org/getting-started/developers-guide/)
//$git克隆https://github.com/juj/emsdk.git
//$cd emsdk
//$./emsdk安装最新版本
//$./emsdk激活最新版本
//$source./emsdk_env.sh--build=Release
//
//一旦安装：
//
//$emcc hello.c-s ONLY_MY_CODE=1-s WASM=1-s EXPORTED_FUNCTIONS=“[''u add']”-o hello.js
//
//是的，不确定为什么我们必须在导出的函数前面添加“\u1”。
//获取hello.wasm并将其序列化到base64，例如使用node
//const code=fs.readFileSync（'./hello.wasm'）
//代码.toString（'base64'）
//AGFZBQEAABCWJGAX8AYAJ/fwF/AN4HA2VUDGZW1VCNKCAYACGAIDZW52BX RhymlAXABAADZW52CM1LBW9YEJC2UDFWADZW52CXRhymlQMFZQN/AANLBNYIU1RBQ0TUT1DFWADZW52CVNUQULX01BWAN/AANLBANBNYWJVCNRTGFJA092ZJMBG93AAGEHMDFWEJAGT/ASMDC30BQWABQWABQBALBQBQBQBQB7BQ0TUT/AABQBQBQ8J8J8JB1 DFZKBQBQBQBQBQBQ1/AABQBQ8WI/AABQBQBQBQBQWI/AABQWI/AABZWZWZWI/AA=
// https://www.npmjs.com/package/base64-arraybuffer
const chars=“abcdefghijklmnopqrstuvxyzabcdefghijklmnopqrstuvxyz012456789+/”；
//使用查找表查找索引。
const lookup=新的Uint8Array（256）；
for（设i=0；i4）；
字节[p++]=（（encoded2&15）>2）；
字节[p++]=（（encoded3&3）{抛出新错误（'overflow'）；}，
table:newWebAssembly.table（{初始值：0，最大值：0，元素：'anyfunc'}），
数据库：0，
记忆：记忆，
记忆库：1024，
堆栈顶部：0，
堆栈_MAX:memory.buffer.bytellength，
}
}
//实例化
实例化（缓冲区，importObj）
//看一看(你加上)。
.then（{module，instance}）=>{console.log（instance.exports._add（1，2））}）
.catch（（err）=>{console.log（err.message）}）

您希望它在哪里运行？在客户端？这将是一个灾难性的安全漏洞。允许任何页面在客户端计算机上运行任意代码。顺便说一句：如果这是您试图做的，那么将我算在这个项目中：）我希望它可以在浏览器中运行（例如，从

文件：//

html文件）。或者只是从开发者控制台，比如JavaScript代码片段。我不认为这是一个“毁灭性的安全漏洞”，因为webasm应该至少像javascript本身一样具有沙盒。@TomerW WebAssembly不是任意的可执行代码。请阅读：我不知道那项技术…我正在阅读它。。。就像在虚拟机中运行一样。。。

// this code is from a simple add function in c:
//
// // hello.c
// int add(int a, int b) {
//    return a + b;
// }

//
// compiles it with emcc (http://webassembly.org/getting-started/developers-guide/)
// $ git clone https://github.com/juj/emsdk.git
// $ cd emsdk
// $ ./emsdk install latest
// $ ./emsdk activate latest
// $ source ./emsdk_env.sh --build=Release
//
// once installed:
//
// $ emcc hello.c -s ONLY_MY_CODE=1 -s WASM=1 -s EXPORTED_FUNCTIONS="['_add']" -o hello.js
//
// yes, not sure why we have to add '_' in front of the exported function.
// take the hello.wasm and serialize it to base64, e.g. using node

// const code = fs.readFileSync('./hello.wasm')
// code.toString('base64')
// AGFzbQEAAAABCwJgAX8AYAJ/fwF/An4HA2VudgZtZW1vcnkCAYACgAIDZW52BXRhYmxlAXABAAADZW52Cm1lbW9yeUJhc2UDfwADZW52CXRhYmxlQmFzZQN/AANlbnYIU1RBQ0tUT1ADfwADZW52CVNUQUNLX01BWAN/AANlbnYSYWJvcnRTdGFja092ZXJmbG93AAADAgEBBhMDfwEjAgt/ASMDC30BQwAAAAALBwgBBF9hZGQAAQkBAAo7ATkBB38jBCEIIwRBEGokBCMEIwVOBEBBEBAACyAAIQIgASEDIAIhBCADIQUgBCAFaiEGIAgkBCAGDws=


// https://www.npmjs.com/package/base64-arraybuffer
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";

// Use a lookup table to find the index.
const lookup = new Uint8Array(256);
for (let i = 0; i < chars.length; i++) {
    lookup[chars.charCodeAt(i)] = i;
}

function decode(base64) {
  var bufferLength = base64.length * 0.75,
      len = base64.length, i, p = 0,
      encoded1, encoded2, encoded3, encoded4;

  if (base64[base64.length - 1] === "=") {
    bufferLength--;
    if (base64[base64.length - 2] === "=") {
      bufferLength--;
    }
  }

  var arraybuffer = new ArrayBuffer(bufferLength),
      bytes = new Uint8Array(arraybuffer);

  for (i = 0; i < len; i+=4) {
    encoded1 = lookup[base64.charCodeAt(i)];
    encoded2 = lookup[base64.charCodeAt(i+1)];
    encoded3 = lookup[base64.charCodeAt(i+2)];
    encoded4 = lookup[base64.charCodeAt(i+3)];

    bytes[p++] = (encoded1 << 2) | (encoded2 >> 4);
    bytes[p++] = ((encoded2 & 15) << 4) | (encoded3 >> 2);
    bytes[p++] = ((encoded3 & 3) << 6) | (encoded4 & 63);
  }

  return arraybuffer;
} 

// this is the serialized code.
const code = 'AGFzbQEAAAABCwJgAX8AYAJ/fwF/An4HA2VudgZtZW1vcnkCAYACgAIDZW52BXRhYmxlAXABAAADZW52Cm1lbW9yeUJhc2UDfwADZW52CXRhYmxlQmFzZQN/AANlbnYIU1RBQ0tUT1ADfwADZW52CVNUQUNLX01BWAN/AANlbnYSYWJvcnRTdGFja092ZXJmbG93AAADAgEBBhMDfwEjAgt/ASMDC30BQwAAAAALBwgBBF9hZGQAAQkBAAo7ATkBB38jBCEIIwRBEGokBCMEIwVOBEBBEBAACyAAIQIgASEDIAIhBCADIQUgBCAFaiEGIAgkBCAGDws='
const buffer = decode(code)

// bootstrap the env.
const memory = new WebAssembly.Memory({ initial: 256, maximum: 256 })
const importObj = {
    env: {
        abortStackOverflow: () => { throw new Error('overflow'); },
        table: new WebAssembly.Table({ initial: 0, maximum: 0, element: 'anyfunc' }),
        tableBase: 0,
        memory: memory,
        memoryBase: 1024,
        STACKTOP: 0,
        STACK_MAX: memory.buffer.byteLength,
    }
}

// instantiate
WebAssembly.instantiate(buffer, importObj)
  // take a look at that _add.
  .then(({module, instance}) => { console.log(instance.exports._add(1, 2)) })
  .catch((err) => { console.log(err.message) })