YAZONG 我的开源

WebAssembly(WASM)入门介绍和案例

  ,
0 评论0 浏览

1、介绍

WebAssembly是一种全新的Web编程语言,但是与JavaScript不同,它不是一种让你直接手动编写的语言,而是C / C ++,Rust,C#和TypeScript等不断增加的上层语言的编译目标。
介绍和使用说明:
https://github.com/WebAssembly/design/blob/main/Rationale.md
https://developer.mozilla.org/zh-CN/docs/WebAssembly
(WebAssembly(WASM)是不断增加的上层语言:"https://stackoverflow.com/questions/43540878/what-languages-can-be-compiled-to-webassembly-wasm/47483989#47483989")

2、安装

[root@loaclhost workspace]# cat /etc/redhat-release 
CentOS Linux release 7.9.2009 (Core)
[root@loaclhost workspace]# cd wasm/
[root@loaclhost workspace]# git clone https://github.com/juj/emsdk.git
[root@loaclhost workspace]# cd emsdk

[root@loaclhost emsdk]# ./emsdk install sdk-incoming-64bit binaryen-master-64bit
error: tool or SDK not found: 'sdk-incoming-64bit'
#不要用上面的,文档有问题。
[root@loaclhost emsdk]# ./emsdk install latest
[root@loaclhost emsdk]# ./emsdk activate latest
[root@loaclhost emsdk]# source ./emsdk_env.sh
[root@loaclhost workspace]# source /etc/profile
WASM_HOME=/data/software/workspace/wasm/emsdk/upstream/bin
PATH=$WASM_HOME:$PATH
export WASM_HOME
export PATH

#生成一个c语言文件
[root@loaclhost emsdk]# cd hello/
[root@loaclhost hello]# echo '#include <stdio.h>' > hello.c
[root@loaclhost hello]# echo 'int main(int argc, char ** argv) {' >> hello.c
[root@loaclhost hello]# echo 'printf("Hello, world!\n");' >> hello.c
[root@loaclhost hello]# echo '}' >> hello.c

#这个错要安装python3,看下方解决方案内容。
[root@loaclhost hello]# emcc hello.c -s WASM=1 -o hello.html
  File "/data/software/workspace/wasm/emsdk/upstream/emscripten/emcc.py", line 178
    logger.debug(f'(not saving intermediate {name} because not generating JS)')
                                                                          ^
SyntaxError: invalid syntax

#这个错要升级glibc,看下方解决方案内容。
[root@loaclhost hello]# emcc hello.c -s WASM=1 -o hello.html                      
/data/software/workspace/wasm/emsdk/upstream/bin/wasm-opt: /lib64/libc.so.6: version `GLIBC_2.18' not found (required by /data/software/workspace/wasm/emsdk/upstream/bin/wasm-opt)
emcc: error: error running binaryen executable (/data/software/workspace/wasm/emsdk/upstream/bin/wasm-opt). Please check your binaryen installation

#编译
[root@loaclhost hello]# emcc hello.c -s WASM=1 -o hello.html
#多生成三个文件
[root@loaclhost hello]# ll
total 208
-rw-r--r-- 1 root root     83 May 14 22:27 hello.c
-rw-r--r-- 1 root root 102504 May 15 00:08 hello.html
-rw-r--r-- 1 root root  89840 May 15 00:08 hello.js
-rwxr-xr-x 1 root root  11972 May 15 00:08 hello.wasm
#运行。注意你的访问IP是内网还是外网。
[root@loaclhost hello]# emrun --no_browser --port 8080 .
#访问链接"http://10.0.0.201:8080/"
#点击"hello.html"出现"powered by emscripten"页面。可以F12看下html源码结构和console等输出内容。
Hello, world!

image.png

image.png

3、解决方案

#下载python3
#先删python2的环境变量。要是其他情况用yum,记得再还原python2
[root@loaclhost python]# rm -f /usr/bin/python
[root@loaclhost python]# wget https://www.python.org/ftp/python/3.6.6/Python-3.6.6.tgz
[root@loaclhost python]# tar -zxvf Python-3.6.6.tgz
[root@loaclhost Python-3.6.6]# ./configure --prefix=/data/software/install/python_workspace/
[root@loaclhost Python-3.6.6]# make && make install
[root@loaclhost software]# ln -s /data/software/install/python_workspace /data/software/install/python3
[root@loaclhost software]# ln -s /data/software/install/python3/bin/python3.6 /usr/bin/python3
[root@loaclhost software]# ln -s /usr/bin/python3 /usr/bin/python
#下载glibc
[root@loaclhost glibc]# wget http://ftp.gnu.org/gnu/glibc/glibc-2.18.tar.gz
[root@loaclhost glibc]# tar -zxvf  glibc-2.18.tar.gz
[root@loaclhost glibc]# chown -R root.root glibc-2.18
[root@loaclhost glibc]# cd glibc-2.18
[root@loaclhost glibc-2.18]# mkdir build
[root@loaclhost glibc-2.18]# cd build/
[root@loaclhost build]# ../configure --prefix=/usr --disable-profile --enable-add-ons --with-headers=/usr/include --with-binutils=/usr/bin
#加速编译,执行这次作业的数量
[root@loaclhost build]# make -j4
[root@loaclhost build]# ll /lib64/libc.so.6
lrwxrwxrwx 1 root root 12 May 15 00:04 /lib64/libc.so.6 -> libc-2.18.so


标题:WebAssembly(WASM)入门介绍和案例
作者:yazong
地址:https://blog.llyweb.com/articles/2022/05/15/1652545904526.html