WebAssembly入门介绍

浅浅的花香味﹌ 2023-02-17 13:29 15阅读 0赞

### **WebAssembly介绍** ###

WebAssembly？

1，WebAssembly是由 Google、Microsoft、Mozilla、Apple 等几家大公司合作发起的一个关于 面向Web的通用二进制和文本格式 的项目。WebAssembly 是除了 JavaScript 以外，另一种可以在网页中运行的编程语言。

2，WebAssembly（缩写WASM）是一种新的字节码格式。并且被设计为多种编程语言（如C、Rust）目标文件格式，以.wasm 为文件名后缀。WASM通过LLVM（Low Level Virtual Machine、底层虚拟机）工具链支持多种编程语言。

3，WebAssembly初期目标是浏览器内应用程序的高性能执行引擎，随着WASM 在开发者社区中越来越流行，WASM 也正在从客户端迁移到服务端，成为服务端技术的新锐。

WebAssembly 可以用 C 语言或者 Rust 开发，再编译成 .was文件（WebAssembly文件），还可以利用TypeScript开发，再编译成 .was文件。

简单地说，WebAssembly 是一种可以使用非 JavaScript 编程语言编写代码并且能在浏览器上运行的技术方案。

WebAssembly（Wasm）官网

[https://webassembly.org/][https_webassembly.org]

WebAssembly中文文档

[https://www.wasm.com.cn/][https_www.wasm.com.cn]

**Emscripten编译工具**，可将其他的高级语言，编译成WebAssembly。只要高级语言能转换成 LLVM IR（LLVM Intermediate Representation：LLVM中间表示，LLVM——Low Level Virtual Machine——底层虚拟机），就能被编译成 WebAssembly 字节码。Emscripten官网：

[https://emscripten.org/index.html][https_emscripten.org_index.html]

一般而言编译需要安装工具Emscripten，目前（2020年6月）Windows10中Emscripten 安装比较容易出错，网上文章大多语焉不详，我在试用时饱受挫折，多次实验，通过，特撰 “Windows10中Emscripten 安装详解”一文：

[https://blog.csdn.net/cnds123/article/details/106742371][https_blog.csdn.net_cnds123_article_details_106742371]

我们也可以使用在线（“在线”意味不需要在本地安装）工具，如WasmFiddle、WebAssembly Studio学习。

**WasmFiddle**

WasmFiddle界面简陋，但是它不仅能够查看编译结果，还能够加入js代码，查看运行结果。

[https://wasdk.github.io/WasmFiddle/?j1noa][https_wasdk.github.io_WasmFiddle_j1noa]

WasmFiddle界面介绍

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70][]

其中：1、此区域输入代码。2、 “Build”启动编译。3、下载Wasm模块。

**例子**

打开WasmFiddle，输入如下c代码

char\* toChar (char\* str) \{  
    return str;  
\}  
int add (int x, int y) \{  
  return x + y;  
\}  
   
int square (int x) \{  
  return x \* x;  
\}

点击“Build”启动编译，然后再下载Wasm模块，可参见上图。

可以在你的电脑的“用户名”的“下载”中找到Wasm模块，参见下图。

![20200615141845476.png][]

编写html代码调用的它：

新建test2.html加入调用上面产生的program.wasm：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

/\*\*

\* @param \{String\} path wasm 文件路径

\* @param \{Object\} imports 传递到 wasm 代码中的变量

\*/

function loadWebAssembly (path, imports = \{\}) \{

return fetch(path) // 加载文件

.then(response => response.arrayBuffer()) // 转成 ArrayBuffer

.then(buffer => WebAssembly.compile(buffer))

.then(module => \{

imports.env = imports.env || \{\}

// 开辟内存空间

imports.env.memoryBase = imports.env.memoryBase || 0

if (!imports.env.memory) \{

imports.env.memory = new WebAssembly.Memory(\{ initial: 256 \})

// 创建变量映射表

imports.env.tableBase = imports.env.tableBase || 0

if (!imports.env.table) \{

// 在 MVP 版本中 element 只能是 "anyfunc"

imports.env.table = new WebAssembly.Table(\{ initial: 0, element: 'anyfunc' \})

// 创建 WebAssembly 实例

return new WebAssembly.Instance(module, imports)

\})

// 加载wasm文件

loadWebAssembly('program.wasm')

.then(instance => \{

//调用c里面的方法

const toChar = instance.exports.toChar

const add = instance.exports.add

const square = instance.exports.square

console.log('return:   ', toChar("12352324"))

console.log('10 + 20 =', add(10, 20))

console.log('3\*3 =', square(3))

console.log('(2 + 5)\*2 =', square(add(2 + 5)))

\})

</script>

</body>

</html>

注意将test2.html和program.wasm放在同一目录下，我这里是D:\\WebAssemblyTest

现在还不能浏览器查看，需要来个web服务器如http-serve。

http-serve就能实现在电脑的浏览器上输入特定\`url\`，就可以访问本机特定位置的文件，当测试服务器与客户端的交互，启动本地作为一个服务器是相当方便而有必要的。

如果已安装可以跳过这一步，

现在介绍如何使用Node.js的http-serve搭建本地服务器。

打开命令提示符（cmd窗口）：

【需要已安装node

可用node -v验证是否安装

】

安装http-server

在cmd 中

npm install -g http-server

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 1][]

留意一下安装路径。

打开test2.html

要先使用http-server将D:/WebAssemblyTest（此目录根据你的情况而定，它包含你的网页即.html文件和网页调用的.wasm文件）设置为服务器根目录：

1）需要先运行命令cd /d D:/WebAssemblyTest切换目录，2）再运行命令http-server ，参见下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 2][]

【可以通过ctrl+C使服务停止运行】

3）然后启动浏览器如edge，在地址栏输入 [http://127.0.0.1:8080/test2.html][http_127.0.0.1_8080_test2.html] 或[http://localhost:8080/test2.html][http_localhost_8080_test2.html]即可，参见下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 3][]

**WebAssembly Studio**

WebAssembly Studio 是WebAssembly 的在线 IDE（集成开发环境）开发工具。

[https://webassembly.studio/][https_webassembly.studio]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 4][]

具体使用参见：

[https://blog.csdn.net/m0\_46439030/article/details/106365076][https_blog.csdn.net_m0_46439030_article_details_106365076]

对此就不说了。

**最后，**提一下新秀AssemblyScript。

AssemblyScript将TypeScript编译成WebAssembly。要将TypeScript 编译为WebAssembly，就要用到AssemblyScript编译器了。AssemblyScript官网

[https://www.assemblyscript.org/][https_www.assemblyscript.org]

GitHub—AssemblyScript 开源项目

[https://github.com/AssemblyScript/assemblyscript\#installation][https_github.com_AssemblyScript_assemblyscript_installation]

[https_webassembly.org]: https://webassembly.org/
[https_www.wasm.com.cn]: https://www.wasm.com.cn/
[https_emscripten.org_index.html]: https://emscripten.org/index.html
[https_blog.csdn.net_cnds123_article_details_106742371]: https://blog.csdn.net/cnds123/article/details/106742371
[https_wasdk.github.io_WasmFiddle_j1noa]: https://wasdk.github.io/WasmFiddle/?j1noa
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200615141340100.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[20200615141845476.png]: https://img-blog.csdnimg.cn/20200615141845476.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020061514242745.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200615142843398.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[http_127.0.0.1_8080_test2.html]: http://127.0.0.1:8080/test2.html
[http_localhost_8080_test2.html]: http://localhost:8080/test2.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200615142904673.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[https_webassembly.studio]: https://webassembly.studio/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200614133150866.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_m0_46439030_article_details_106365076]: https://blog.csdn.net/m0_46439030/article/details/106365076
[https_www.assemblyscript.org]: https://www.assemblyscript.org/
[https_github.com_AssemblyScript_assemblyscript_installation]: https://github.com/AssemblyScript/assemblyscript#installation