WebAssembly入门介绍_webassembly studio-CSDN博客

本文链接：https://blog.csdn.net/cnds123/article/details/106745099

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/

WebAssembly中文文档

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

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

https://blog.csdn.net/cnds123/article/details/106742371

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

WasmFiddle

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

https://wasdk.github.io/WasmFiddle/?j1noa

WasmFiddle界面介绍

其中：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模块，参见下图。

编写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

留意一下安装路径。

打开test2.html

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

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

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

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

WebAssembly Studio

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

https://webassembly.studio/

具体使用参见：

https://blog.csdn.net/m0_46439030/article/details/106365076

对此就不说了。

最后，提一下新秀AssemblyScript。

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

https://www.assemblyscript.org/

GitHub—AssemblyScript 开源项目

https://github.com/AssemblyScript/assemblyscript#installation