GVKun编程网logo

凹语言 Docker + WebAssembly 3 分钟入门(凹言凹语是什么意思)

10

在本文中,我们将带你了解凹语言Docker+WebAssembly3分钟入门在这篇文章中,我们将为您详细介绍凹语言Docker+WebAssembly3分钟入门的方方面面,并解答凹言凹语是什么意思常见

在本文中,我们将带你了解凹语言 Docker + WebAssembly 3 分钟入门在这篇文章中,我们将为您详细介绍凹语言 Docker + WebAssembly 3 分钟入门的方方面面,并解答凹言凹语是什么意思常见的疑惑,同时我们还将给您一些技巧,以帮助您实现更有效的(转)WASM(WebAssember)快速了解第一篇——什么是WebAssembly、10分钟入门WebAssembly、5分钟实现一个简单的 WebAssembly 应用|WebAssembly 入门教程、Blazor WebAssembly 中的依赖注入、认证授权、WebSocket、JS互操作等(原标题 Blazor(WebAssembly) + .NETCore 实现斗地主)

本文目录一览:

凹语言 Docker + WebAssembly 3 分钟入门(凹言凹语是什么意思)

凹语言 Docker + WebAssembly 3 分钟入门(凹言凹语是什么意思)

2022 年底,Docker 发布了对 WebAssembly 支持的预览版本,通过集成 WasmEdge 运行时支持 WASM 模块。Docker 运行时已经准备就绪,那么如何构建出 WASM 模块呢?目前支持 Wasm 的语言有很多,这里我们选择凹语言来构建 Wasm 镜像。Docker 官方博文:https://www.docker.com/blog/docker-wasm-technical-preview/

本文的例子代码:https://gitee.com/wa-lang/wa/tree/dev-wasi/_examples/docker-wasm

1. 凹语言到 WASM 模块

凹语言是针对 WebAssembly 设计的语言,也是国内第一个实现纯浏览器内编译、执行全链路的自研静态类型的编译型通用编程语言。这里我们再尝试通过凹语言来构造 Docker 的 Wasm 镜像。

凹语言是 Go 语言开发的编译器,因此需要本地先安装 Go1.17+ 版本环境。然后基于 dev-wasi 分支最新代码构造出 wa 语言编译器命令。或者通过以下命令安装:go install wa-lang.org/wa@dev-wasi,安装的命令默认在 $HOME/go/bin 目录。确保本地 wa 命令行可以使用,可以通过 wa -v 查看版本。

凹语言环境配置好之后,创建 hello.wa 文件:

// 版权 @2019 凹语言 作者。保留所有权利。

import "fmt"
import "runtime"

func main {
	println("你好,凹语言!", runtime.WAOS)
	println(add(40, 2))

	fmt.Println(1+1)
}

func add(a: i32, b: i32) => i32 {
	return a+b
}

然后在命令行运行程序:

$ wa run hello.wa
你好,凹语言!wasi
42
2

一切正常!

2. 构建 wasm 模块

通过 wa build hello.wa 命令生成 a.out.wasm 模块,大小约 3.6KB。然后通过 wasmer 执行:

$ wa build hello.wa
$ wasmer a.out.wasm
你好,凹语言!wasi
42
2

也可以通过 wabt 等辅助工具测试。输出结果说明一切正常。

3. 配置 Docker wasm 环境

完整的 Docker wasm 官方文档可以看这里:https://docs.docker.com/desktop/wasm/ 。按照好最新的 Docker 之后,按照 https://docs.docker.com/desktop/containerd/#enabling-the-containerd-image-store-feature 的提示(Settings 页面的 Experimental 菜单),打开 “Use containerd for pulling and storing images” 特性。

4. 构建 Docker wasm 镜像

在当前目录创建 Dockerfile,内容如下:

FROM scratch
ADD a.out.wasm /hello.wasm
ENTRYPOINT ["hello.wasm"]

执行以下命令创建 Docker wasm 镜像:

$ docker buildx build --platform wasi/wasm32 -t wa-lang/hello-world .
[+] Building 5.2s (8/8) FINISHED
 => [internal] load build definition from Dockerfile                   0.1s
 => => transferring dockerfile: 191B                                   0.0s
 => [internal] load .dockerignore                                      0.2s
 => => transferring context: 2B                                        0.0s
 => resolve image config for docker.io/docker/dockerfile:1             3.9s
 => [auth] docker/dockerfile:pull token for registry-1.docker.io       0.0s
 => CACHED docker-image://docker.io/docker/dockerfile:1@sha256:d2...   0.2s
 => => resolve docker.io/docker/dockerfile:1@sha256:d2d74ff22a0e4...   0.2s
 => [internal] load build context                                      0.1s
 => => transferring context: 3.71kB                                    0.0s
 => [1/1] ADD a.out.wasm /hello.wasm                                   0.1s
 => exporting to image                                                 0.3s
 => => exporting layers                                                0.1s
 => => exporting manifest sha256:47686ab02b26ea0ed51261e17a32bc07...   0.0s
 => => exporting config sha256:95cf2c26b4bcf8ae39c99060a0aa108198...   0.0s
 => => naming to docker.io/wa-lang/hello-world:latest                  0.0s
 => => unpacking to docker.io/wa-lang/hello-world:latest               0.1s
$

需要注意的是这里使用的是 buildx 子命令,并且输出的是 wasi/wasm32 目标平台。完成后可以通过 docker image list 查看新生成的镜像。

5. 执行 Docker wasm 镜像

通过以下命令执行 Docker wasm 镜像:

$ docker run --rm \
	--name=wasm-hello \
	--runtime=io.containerd.wasmedge.v1 \
	--platform=wasi/wasm32 \
	docker.io/wa-lang/hello-world:latest
你好,凹语言!wasi
42
2

首先要选择 io.containerd.wasmedge.v1 运行时,同时也 u 有指定 wasi/wasm32 平台类型。如果一切顺利就可以看到输出结果了。

6. 总结展望

Docker 的创始人曾经说过,如果 Wasm 技术早点出现那么就不会有 Docker 这个技术。而目前 Docker 对 wasm 的支持也说明了其本身的应用场景。其实 Wasm 虽然诞生于 Web 领域,但是在 Web 之外也有相当广泛的应用场景。不过目前主流编程语言都不是原生为 Wasm 设计的,我们希望通过新的凹语言为 Wasm 提供更好的支持和体验。同时希望未来凹语言可以通过 Wasm 服务更多的场景。

(转)WASM(WebAssember)快速了解第一篇——什么是WebAssembly

(转)WASM(WebAssember)快速了解第一篇——什么是WebAssembly

WebAssembly很快。您可能已经听说了。但是,使WebAssembly快速运行的原因是什么?

在本系列中,我想向您解释为什么WebAssembly能够如此快速。

什么是WebAssember?

WebAssembly是一种使用除JavaScript以外的其他编程语言编写的代码并在浏览器中运行该代码的方法。因此,当人们说WebAssembly快速时,他们通常都是与JavaScript进行比较。

实际上,我们希望开发人员将在同一应用程序中同时使用WebAssembly和JavaScript。

但是将两者进行比较很有用,因此您可以了解WebAssembly的潜在影响。

JavaScript的一点历史

JavaScript创建于1995年。设计之初,她的速度并不是很快,并且在最初的十年中,她确实表现得并不是很快。

然后,浏览器开始变得更具竞争力。

在2008年,人们称之为特效战的时期开始了。多个浏览器添加了即时编译器,也称为JIT。在运行JavaScript时,JIT可以查看模式,并根据这些模式使代码运行得更快。

这些JIT的引入导致JavaScript性能出现拐点。JS的执行速度提高了10倍。

  

随着性能的提高,JavaScript开始用于人们从未期望过的用途,例如使用Node.js进行服务器端编程。通过提高性能,可以在全新的问题类别上使用JavaScript。

现在,WebAssembly可能使我们处于另一个拐点。

因此,让我们深入研究细节以了解使WebAssembly快速运行的原因。

 转自:https://hacks.mozilla.org/2017/02/a-cartoon-intro-to-webassembly/

10分钟入门WebAssembly

10分钟入门WebAssembly

导语 自从JS创建到现在,每10年都会有新的变化,下一个10年的爆点在哪,可能就是WebAssembly !本文将带你抓住爆点,10分钟掌握webassembly~

了解WebAssembly

什么是WebAssembly?

官网定义:WebAssembly/wasm WebAssembly 或者 wasm 是一个可移植、体积小、加载快并且兼容 Web 的全新格式(二进制)。是由主流浏览器厂商组成的 W3C 社区团体 制定的一个新的规范。

发展历史

  • 1995年,大神布兰登·艾奇(Brendan Eich),仅仅花了 10天 就将伟大的JavaScript撸出来了,引起了轰动。但是Js的设计初衷是想设计出一个面向非专业编程人员和网页设计师的解释型语言。由于时间太短,细节考虑的不够周全,导致留下很多坑,所以后来很长一段时间,JavaScript的执行速度一直备受诟病。
  • 2008年,浏览器的性能大战打响,众多浏览器引入了即时(JIT)编译使得JavaScript运行速度快了一个量级。但是对于 JavaScript 这种弱数据类型的语言来说,要实现一个完美的 JIT 非常难。因为Javascript 是一个没有类型的语言,而且像+这样的符号又能够重载,譬如这样的代码:
    const sum = (a, b, c) => a + b + c;

    这是 一个求和函数,可以直接放在浏览器的控制台下运行,如果传参都是整数时,结果是整数相加的结果:如,答案是 6。但是,如果至少有一个是字符串,则结果是按照字符串拼接出的结果,如 console.log(sum(''1'',2,3)),答案是 "123"。也就是说,JIT在遇到第一个sum时会编译成整数相加的机器码;但是在碰到第二个sum调用时,不得不重新编译一遍。这样一来,JIT带来的效率提升便被抵消了。

  • 随着JS达到了性能天花板,在当前复杂运算及游戏面前已完全力不从心。无法满足一些大型web项目开发,于是三大浏览器巨头分别提出了自己的解决方案:

微软的 TypeScript 谷歌的 Dart 火狐的 asm.js 特点 通过为 JS 加入静态类型检查来改进 JS 松散的语法,提升代码健壮性 为浏览器引入新的虚拟机去直接运行 Dart 程序以提升性能 取 JS 的子集,通过避免JS引擎某些难以优化的机制和模式(主要是垃圾回收和类型判断),达到引擎运行优化的目的,文件类型是文本 缺点 只是解决了 JS 语法松散的问题,但还是需要编译成 JS 去运行,对性能没有明显提升 Dart只能在 内嵌 V8 的 Chrome 浏览器中支持,目前主要应用在flutter场景中 asm.js只是JavaScript,因此必须完全符合JavaScript规范,逃不过需要编译成机器码步骤(耗时) 中心思想 实现一个强类型的语言,然后把它编译成 Javacript 实现一个强类型的语言,然后把它编译成 Javacript 每当遇到变量时,在注释中加上类型,然后JS引擎在解析时自动识别注释中的类型,这样相当于JS变成了一种强类型的语言

我们熟知的四大主流浏览器厂商 Google Chrome、Apple Safari、Microsoft Edge 和 Mozilla FireFox ,觉得Mozilla FireFox所推出的 asm.js 很有前景,为了让大家都能使用,于是他们就共同参与开发,基于asm.js制定一个标准,也就是WebAssembly。

  • 2015年, WebAssembly首次发布,并可直接在浏览器中运行
  • 2017 年 3 月份, 四大厂商均宣布已经于最新版本的浏览器中支持了 WebAssembly 的初始版本,这意味着 WebAssembly 技术已经实际落地
  • 2019年,被正式加入Web的标准大家庭中

WebAssembly影响

  • 大幅度提高 Javascript 的性能,同时也不损失安全性。Webapp 和 原生 App 的性能差距变得很小。
  • 基本之前需要插件来提高速度的技术已经没有必要了, 网页应用的移植性会变得更好。
  • WebAssembly 可以允许任何语言编译到它制定的AST tree, 相当于使用其他高级语言写的代码可以直接在网页上运行。

工作原理


WebAssembly的工作原理简要来说是将C,C++, Rust等静态语言通过编译器的程序编译成浏览器能够运行的wasm二进制文件,当浏览器加载wasm文件后编译为本地机器码后运行。

为什么能提升当前js的性能?

正常的JS:在浏览器中,对JavaScript源码进行解析,生成抽象语法树或者字节码(parse),JIT编译器会对生成的代码进行编译优化,当然后当发生去优化时,再去重新编译优化,最后执行。

WebAssembly:则省去了比较耗时的解析和编译的过程,是直接生成的二进制可执行机器码进行执行。

浏览器支持

由图可见,无论是PC、移动端还是服务器,都已经开始支持WebAssembly了,这也说明WebAssembly已经开始普及~

 实战演练

语言选择

实战开始:首先确认你选择开发的语言:

  • 当你在用C/C++之类的语言编写模块时,你可以使用Emscripten来将它编译到WebAssembly。

  • 当你使用Rust语言编写模块时,需要一个额外工具 wasm-pack。它会把代码编译成 WebAssembly 并制造出正确的 npm 包

  • 当你使用Java语言来编写模块时,据说TeaVM 可以将JVM 字节码翻译成

    JavaScript,还能翻译成 WebAssembly,现在还不成熟

  • 当你使用php语言来编写模块时,php2wasm可以把PHP代码编译成wasm,现在还不成熟

  • 如果你还想保持js的编写风格,那就用typescript来编写吧,用assemblyscript来生成wasm

确认好你要选择的语言语种,应该总有一款适合你的~~如果还不够,请移位这里

环境准备

根据官网的引导,使用C/C++来编写部分代码,并在浏览器中运行,以下均是在MacOS环境下进行的操作。

首先搭建Emscripten

  1. 没有升级过python环境的同学,电脑会有个默认的版本python2.7.x,此时需要到phthon官网下载最新的python版本进行安装

  2. 在应用程序中,双击“install Certificates.command”,否则会出现证书验证异常,导致无法后续步骤 

  3. #通过一个 git 克隆获取 emscriptengit clone https://github.com/juj/emsdk.git
    #下载,安装并激活 sdk,这个步骤可能需要一点时间cd emsdk./emsdk install latest./emsdk activate latest
    #让环境生效source ./emsdk_env.sh
    #确认安装的内容可以正常运行emcc --version



OK,可以进行代码编写了

样例编写

1. 用C语言编写的斐波那契数列(递归):

#include <stdio.h>
int fib(int n) { return n <= 1 ? 1 : fib(n - 1) + fib(n - 2);}


2.编译生成wasm

emcc fib.c -O3 -s WASM=1 -s SIDE_MODULE=1 -s EXPORTED_FUNCTIONS=''["_fib"]'' -o fib.wasm

(注:emcc就是Emscripten编译器指令,fib.c是输入文件,-s SIDE_MODULE=1表示这就是一个模块, -s EXPORTED_FUNCTIONS表示导出的接口函数,-o fib.wasm`是输出的文件,更多的命令字可参考官网)

通过以上命令可生成名字为fib的wasm文件,可在js中进行引用,并且调用。

3.如何加载wasm

直接引用到页面中,官网是推荐两种,一个是fetch,一个是XMLHttpRequest,本文以fetch为例,在html页面中引入上面的文件,如下:

fetch(''你引入wasm路径'').then(res => {return res.arrayBuffer()}) //引入到内存中,使其在array buffer中可用.then(WebAssembly.instantiate) //编译和实例化 WebAssembly 代码.then(module => { //写你引用此模块的目的})

将fib.c生成的fib.wasm后,在html中引用如下:

fetch(''./wasm/fib.wasm'').then(res => {return res.arrayBuffer()}).then(WebAssembly.instantiate) .then(module => { // console.log(module.instance.exports.fib(value)) let res = module.instance.exports.fib(value); $("#result").text(res); let endtime = new Date().getTime(); $("#period").text(endtime - starttime);})

以上,环境和相关demo已经写好了,下面来看一下webassembly的执行性能

性能比较

在demo页面中同样用js写了一个递归的方法,和同时引用fib.wasm,做了以下性能比较

为了减少误差性,在代码中分别用js和wasm做定时请求N次,来看他们的耗时,如下图所示:

可以看到,同样是计算40的递归算法,js时间基本上都是在1270ms左右,而编译生成的wasm基本上都在680ms左右,也就是说在处理40的递归下,性能提升至原来的1.87倍。

同时,为了进行性能上的对比,对递归数做了不同的取值,来看请求结果及耗时,如下图所示:

可以看到,递归数越大,也就是运算层次越多,webassembly相比于JS的优势就越明显,也就是在比较复杂的JS运算或者处理中,用webassembly会更合适。

如何同JS互通

交互离不开相互调用,在浏览器中,了解到了在js中如何调用webassembly中的接口,那在webassembly中如何引用js相关函数呢?下面简单和您介绍下。

方法调用

Emscripten提供两种方法让C/C++调用JavaScript:

• 使用 emscriptenrunscript() 运行js脚本,一种是写“内联JavaScript”。

emscripten_run_script("alert(''hi'')");

• 用EM_ASM() 和其他相关宏写内联JavaScript,稍快,这个是推荐的写法

#include <emscripten.h>
int main() { EM_ASM( alert(''hello world!''); throw ''all done''; ); return 0;}

示例demo

#include

命令行,生成可执行的html文件:

emcc test.c -s WASM=1 -o test.html

运行结果:


可以看到,无论是哪种引用方式,都可以运行出你想要的结果。

总结

  • 一句话:

        体积小,速度快,二进制文件,执行效率高

  • 适用场景

    在浏览器中使用视频、游戏、AR、AI 等比较合适使用WebAssembly,如果  将服务器上的加密,想要放在web端用这个实现也可以

  • 市场现状

    flv.js用 WebAssembly 重写后性能有很大提升;AutoCAD, Google Earth,用WebAssembly都开始支持了web版本等等

  • 突破

  • 很多静态语言转成wasm的生态工具还不完善不成熟,都还处于起步阶段;另外学习资料太少,还需要更多的人去探索去踩坑。


参考链接:

https://developer.ibm.com/zh/technologies/web-development/articles/wa-lo-webassembly-status-and-reality/

https://zhuanlan.zhihu.com/p/49464798

https://blog.csdn.net/liubiggun/article/details/79848948


本文分享自微信公众号 - WebAssembly 中文社区(webassemblywasm)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

5分钟实现一个简单的 WebAssembly 应用|WebAssembly 入门教程

5分钟实现一个简单的 WebAssembly 应用|WebAssembly 入门教程


在 Rust 中创建一个简单的 WebAssembly 应用程序,然后从 JavaScript 调用这个程序
本文所涉及的所有代码可以在 https://github.com/second-state/wasm-learning/tree/master/browser/triple 中找到。
系列教程
1. WebAssembly 快问快答
2. Rust 的 Hello world | WebAssembly 入门教程
在本教程中,我们将创建一个非常简单但很完整的 WebAssembly 应用程序。
Webassembly 应用程序通常由两部分组成。
  • 运行在 WebAssembly 虚拟机内部以执行计算任务的字节码程序
  • 提供 UI、networking、数据库,以及调用 WebAssembly 程序以执行关键计算任务或业务逻辑的主机应用程序
在本教程中,主机应用程序是用 JavaScript 编写的,并在 web 浏览器中运行。Webassembly 字节码程序是用 Rust 编写的。
现在,先让我们看看 Rust 程序是如何编写的。

在 Rust 中的 WebAssembly 程序


在这个例子中,Rust 程序将输入数字简单地增加了三倍并返回结果。首先将 WebAssembly 工具安装到 Rust 编译器。
  
    
  
  
  
# Install Rust

$
sudo apt-get update
$ sudo apt-get -y upgrade
$ curl --proto ''=https'' --tlsv1.2 -sSf https://sh.rustup.rs | sh
$ source $HOME/.cargo/env
  
    
  
  
  
# Install WebAssembly tools

$ rustup target add wasm32-wasi
$ rustup override set nightly
$ rustup target add wasm32-wasi --toolchain nightly
接下来,创建一个新的  cargo 项目。由于这个程序是从主机应用程序调用的,而不是作为独立的可执行文件运行,因此我们将创建一个  lib 项目。
  
    
  
  
  
$ cargo new --lib triple
$ cd triple
编辑  Cargo.toml 文件以添加 [lib]节。它会告诉编译器在哪里可以找到库的源代码,以及如何生成字节码输出。
  
    
  
  
  
[lib]
name = "triple_lib"
path = "src/lib.rs"
crate-type =["cdylib"]
下面是 Rust 程序  src/lib.rs 的内容. 实际上,你可以在这个库文件中定义多个外部函数,并且所有这些函数都可以通过 WebAssembly 在 JaveScript 主机上使用。
  
    
  
  
  
#[no_mangle]
pub extern fn triple(x: i32) -> i32 {
return 3 * x;
}
接下来你可以用下面的命令行编译 Rust 的源代码到WebAssembly的字节码中。
  
    
  
  
  
$ cargo +nightly build --target wasm32-wasi --release
WebAssembly 字节码文件是  target/wasm32-wasi/release/triple_lib.wasm


JavaScript 主机


我们使用 JavaScript 加载 WebAssembly 字节码程序并调用它的函数。由于大多数浏览器已经支持 WebAssembly, JavaScript 实际上可以作为一个网页运行。
无须赘述,下面是 JavaScript 模块的相关部分,用于加载、导出和调用 WebAssembly 函数。完整的网页源文件在这里。
  
    
  
  
  
<script>
if (!(''WebAssembly'' in window)) {
alert(
''you need a browser with wasm support enabled :('');
}
(
async () => {
const response = await fetch(''triple_lib.wasm'');
const buffer = await response.arrayBuffer();
const module = await WebAssembly.compile(buffer);
const instance = await WebAssembly.instantiate(module);
const exports = instance.exports;
const triple = exports.triple;

var buttonOne = document.getElementById(''buttonOne'');
buttonOne.value =
''Triple the number'';
buttonOne.addEventListener(
''click'', function() {
var input = $("#numberInput").val();
alert(input +
'' tripled equals '' + triple(input));
},
false);
})();
</script>
可以看到 JavaScript 代码加载了 WebAssembly 虚拟机的  triple_lib.wasm 文件, 导出其外部函数,然后根据需要调用这些函数。
将这个 HTML 文件和  triple_lib.wasm 文件放在web 服务器上,你就可以访问网页,在网页上输入的任何数字会自动乘以三。
那么字符串呢?
现在你注意到了,这个例子并不是一个 hello world。WebAssembly函数计算数字,但不会像 hello world 那样操作字符串。
这是为什么呢?我们将在下一个教程中回答这个问题,并给出一个真实的 hello world 示例。

微信不支持添加原文,可点击阅读原文,查看文中所提资源

本文分享自微信公众号 - WebAssembly 中文社区(webassemblywasm)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

Blazor WebAssembly 中的依赖注入、认证授权、WebSocket、JS互操作等(原标题 Blazor(WebAssembly) + .NETCore 实现斗地主)

Blazor WebAssembly 中的依赖注入、认证授权、WebSocket、JS互操作等(原标题 Blazor(WebAssembly) + .NETCore 实现斗地主)

  Blazor Wasm 最近更新到了3.2.0-preview1,支持了WebSocket同时启动类也有所修改,我就把这个文章重新修改一下。

  

  之前群里大神发了一个 html5+ .NETCore的斗地主,刚好在看Blazor WebAssembly 就尝试重写试试。

  这里主要介绍Blazor的依赖注入,认证与授权,WebSocket的使用,JS互操作等,完整实现可以查看github:https://github.com/saber-wang/FightLandlord/tree/master/src/BetGame.DDZ.WasmClient,在线演示:http://39.106.159.180:31000/

  另外强调一下Blazor WebAssembly 是纯前端框架,所有相关组件等都会下载到浏览器运行,要和MVC、Razor Pages等区分开来

  当前是基于NetCore3.1和Blazor WebAssembly 3.2.0-preview1。

  Blazor WebAssembly默认是没有安装的,在命令行执行下边的命令安装Blazor WebAssembly模板。

dotnet new -i Microsoft.AspNetCore.Blazor.Templates:3.2.0-preview1.20073.1

  

  选择Blazor应用,跟着往下就会看到Blazor WebAssembly App模板,如果看不到就在ASP.NET Core3.0和3.1之间切换一下。

  

  新建后项目结构如下。

  

  一眼看过去,大体和Razor Pages 差不多。Program.cs中创建了一个WebAssemblyHostBuilder,然后指定启动容器,代码非常简单。

  

public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);

            builder.RootComponents.Add<App>("app");

            await builder.Build().RunAsync();
        }

  

  Blazor WebAssembly 中也支持DI,注入方式与生命周期与ASP.NET Core一致,但是Scope生命周期不太一样,注册的服务的行为类似于 Singleton 服务。

  在WebAssemblyHostBuilder中有一个Services属性用来注册服务

public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);

            builder.Services.AddScoped<ApiService>();
            builder.Services.AddScoped<FunctionHelper>();
            builder.Services.AddScoped<LocalStorage>();
            builder.Services.AddScoped<CustomAuthStateProvider>();
            builder.Services.AddScoped<AuthenticationStateProvider>(s => s.GetRequiredService<CustomAuthStateProvider>());
            builder.Services.AddAuthorizationCore(c=> {
                c.AddPolicy("default", a => a.RequireAuthenticatedUser());
                c.DefaultPolicy = c.GetPolicy("default");
            });
            builder.Services.AddScoped(sp=>new ClientWebSocket());

            builder.RootComponents.Add<App>("app");

            WebAssemblyHttpMessageHandlerOptions.DefaultCredentials = FetchCredentialsOption.Include;
            await builder.Build().RunAsync();
        }

  

 

  默认已注入了HttpClient,IJSRuntime,NavigationManager,具体可以看官方文档介绍。

  App.razor中定义了路由和默认路由,修改添加AuthorizeRouteView和CascadingAuthenticationState以支持AuthorizeView、AuthenticationState等用于认证和获取当前的身份验证状态。

  

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <CascadingAuthenticationState>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there''s nothing at this address.</p>
            </LayoutView>
        </CascadingAuthenticationState>
    </NotFound>
</Router>

  自定义AuthenticationStateProvider并注入为AuthorizeView和CascadingAuthenticationState组件提供认证。

builder.Services.AddScoped<CustomAuthStateProvider>();
            builder.Services.AddScoped<AuthenticationStateProvider>(s => s.GetRequiredService<CustomAuthStateProvider>());
            //在wasm中没有默认配置,所以需要设置一下
            builder.Services.AddAuthorizationCore(c=> {
                c.AddPolicy("default", a => a.RequireAuthenticatedUser());
                c.DefaultPolicy = c.GetPolicy("default");
            });

  

CustomAuthStateProvider的实现如下。
public class CustomAuthStateProvider : AuthenticationStateProvider
    {
        ApiService _apiService;
        Player _playerCache;
        public CustomAuthStateProvider(ApiService apiService)
        {
            _apiService = apiService;
        }

        public override async Task<AuthenticationState> GetAuthenticationStateAsync()
        {
            var player = _playerCache??= await _apiService.GetPlayer();

            if (player == null)
            {
                return new AuthenticationState(new ClaimsPrincipal());
            }
            else
            {
                //认证通过则提供ClaimsPrincipal
                var user = Utils.GetClaimsIdentity(player);
                return new AuthenticationState(user);
            }

        }
        /// <summary>
        /// 通知AuthorizeView等用户状态更改
        /// </summary>
        public void NotifyAuthenticationState()
        {
            NotifyAuthenticationStateChanged(GetAuthenticationStateAsync());
        }
        /// <summary>
        /// 提供Player并通知AuthorizeView等用户状态更改
        /// </summary>
        public void NotifyAuthenticationState(Player player)
        {
            _playerCache = player;
            NotifyAuthenticationState();
        }
    }

  我们这个时候就可以在组件上添加AuthorizeView根据用户是否有权查看来选择性地显示 UI,该组件公开了一个 AuthenticationState 类型的 context 变量,可以使用该变量来访问有关已登录用户的信息。

  

<AuthorizeView>
    <Authorized>
     //认证通过 @context.User
    </Authorized>
    <NotAuthorized>
     //认证不通过
    </NotAuthorized>
</AuthorizeView>

   使身份验证状态作为级联参数

[CascadingParameter]
private Task<AuthenticationState> authenticationStateTask { get; set; }

  获取当前用户信息

private async Task GetPlayer()
    {
        var user = await authenticationStateTask;
        if (user?.User?.Identity?.IsAuthenticated == true)
        {
            player = new Player
            {
                Balance = Convert.ToInt32(user.User.FindFirst(nameof(Player.Balance)).Value),
                GameState = user.User.FindFirst(nameof(Player.GameState)).Value,
                Id = user.User.FindFirst(nameof(Player.Id)).Value,
                IsOnline = Convert.ToBoolean(user.User.FindFirst(nameof(Player.IsOnline)).Value),
                Nick = user.User.FindFirst(nameof(Player.Nick)).Value,
                Score = Convert.ToInt32(user.User.FindFirst(nameof(Player.Score)).Value),
            };
            await ConnectWebsocket();
        }
    }

  注册用户并通知AuthorizeView状态更新

private async Task GetOrAddPlayer(MouseEventArgs e)
    {
        GetOrAddPlayering = true;
        player = await ApiService.GetOrAddPlayer(editNick);
        this.GetOrAddPlayering = false;

        if (player != null)
        {
            CustomAuthStateProvider.NotifyAuthenticationState(player);
            await ConnectWebsocket();
        }

    }

 

  JavaScript 互操作,虽然很希望完全不操作JavaScript,但目前版本的Web WebAssembly不太现实,例如弹窗、本地存储等,Blazor中操作JavaScript主要靠IJSRuntime 抽象,在重构的时候遇到最多的错误就是类型转换和索引溢出错误:)。

  从Blazor操作JavaScript比较简单,操作的JavaScript需要是公开的,这里实现从Blazor调用alert和localStorage如下

public class FunctionHelper
    {
        private readonly IJSRuntime _jsRuntime;

        public FunctionHelper(IJSRuntime jsRuntime)
        {
            _jsRuntime = jsRuntime;
        }

        public ValueTask Alert(object message)
        {
            //无返回值使用InvokeVoidAsync
            return _jsRuntime.InvokeVoidAsync("alert", message);
        }
    }
public class LocalStorage
    {
        private readonly IJSRuntime _jsRuntime;
        private readonly static JsonSerializerOptions SerializerOptions = new JsonSerializerOptions();

        public LocalStorage(IJSRuntime jsRuntime)
        {
            _jsRuntime = jsRuntime;
        }
        public ValueTask SetAsync(string key, object value)
        {

            if (string.IsNullOrEmpty(key))
            {
                throw new ArgumentException("Cannot be null or empty", nameof(key));
            }

            var json = JsonSerializer.Serialize(value, options: SerializerOptions);

            return _jsRuntime.InvokeVoidAsync("localStorage.setItem", key, json);
        }
        public async ValueTask<T> GetAsync<T>(string key)
        {

            if (string.IsNullOrEmpty(key))
            {
                throw new ArgumentException("Cannot be null or empty", nameof(key));
            }

            //有返回值使用InvokeAsync
            var json =await _jsRuntime.InvokeAsync<string>("localStorage.getItem", key);
            if (json == null)
            {
                return default;
            }

            return JsonSerializer.Deserialize<T>(json, options: SerializerOptions);
        }
        public ValueTask DeleteAsync(string key)
        {
            return _jsRuntime.InvokeVoidAsync(
                $"localStorage.removeItem",key);
        }
    }

  从JavaScript调用C#方法则需要把C#方法使用[JSInvokable]特性标记且必须为公开的。调用C#静态方法看这里,这里主要介绍调用C#的实例方法。

  因为Blazor Wasm暂时不支持ClientWebSocket,所以我们用JavaScript互操作来实现WebSocket的链接与C#方法的回调。

  使用C#实现一个调用JavaScript的WebSocket,并使用DotNetObjectReference.Create包装一个实例传递给JavaScript方法的参数(dotnetHelper),这里直接传递了当前实例。

    [JSInvokable]
    public async Task ConnectWebsocket()
    {
        Console.WriteLine("ConnectWebsocket");
        var serviceurl = await ApiService.ConnectWebsocket();
        //TODO ConnectWebsocket
        if (!string.IsNullOrWhiteSpace(serviceurl))
            await _jsRuntime.InvokeAsync<string>("newWebSocket", serviceurl, DotNetObjectReference.Create(this));
    }

  JavaScript代码里使用参数(dotnetHelper)接收的实例调用C#方法(dotnetHelper.invokeMethodAsync(''方法名'',方法参数...))。

 

var gsocket = null;
var gsocketTimeId = null;
function newWebSocket(url, dotnetHelper)
{
    console.log(''newWebSocket'');
    if (gsocket) gsocket.close();
    gsocket = null;
    gsocket = new WebSocket(url);
    gsocket.onopen = function (e) {
        console.log(''websocket connect'');
        //调用C#的onopen();
        dotnetHelper.invokeMethodAsync(''onopen'')
    };
    gsocket.onclose = function (e) {
        console.log(''websocket disconnect'');
        dotnetHelper.invokeMethodAsync(''onclose'')
        gsocket = null;
        clearTimeout(gsocketTimeId);
        gsocketTimeId = setTimeout(function () {
            console.log(''websocket onclose ConnectWebsocket'');
            //调用C#的ConnectWebsocket();
            dotnetHelper.invokeMethodAsync(''ConnectWebsocket'');
            //_self.ConnectWebsocket.call(_self);
        }, 5000);
    };
    gsocket.onmessage = function (e) {
        try {
            console.log(''websocket onmessage'');
            var msg = JSON.parse(e.data);
            //调用C#的onmessage();
            dotnetHelper.invokeMethodAsync(''onmessage'', msg);
            //_self.onmessage.call(_self, msg);
        } catch (e) {
            console.log(e);
            return;
        }
    };
    gsocket.onerror = function (e) {
        console.log(''websocket error'');
        gsocket = null;
        clearTimeout(gsocketTimeId);
        gsocketTimeId = setTimeout(function () {
            console.log(''websocket onerror ConnectWebsocket'');
            dotnetHelper.invokeMethodAsync(''ConnectWebsocket'');
            //_self.ConnectWebsocket.call(_self);
        }, 5000);
    };
}

   Blazor中已经实现了Websocket,现在我们可以很简单的操作Websocket。

public async Task ConnectWebsocket()
    {
        Console.WriteLine("ConnectWebsocket");
        //获取Websocket链接
        var serviceurl = await ApiService.ConnectWebsocket();
        if (!string.IsNullOrWhiteSpace(serviceurl))
        {
            wsConnectState = 1010;
            //链接Websocket
            await clientWebSocket.ConnectAsync(new Uri(serviceurl),default);
            //后台接收消息
            ReceiveMessages();
            //链接Websocket时调用
            await onopen();

            //await _jsRuntime.InvokeAsync<string>("newWebSocket", serviceurl, DotNetObjectReference.Create(this));
        }
    }

  ReceiveMessages的实现如下

private async Task ReceiveMessages()
    {
        List<byte> vs = new List<byte>();
        while (true)
        {
            Memory<byte> memory = new Memory<byte>(new byte[1024]);
            var res = await clientWebSocket.ReceiveAsync(memory, default);
            var bt = memory.ToArray().Take(res.Count);
            vs.AddRange(bt);
            if (res.EndOfMessage)
            {
                if (res.MessageType == WebSocketMessageType.Close)
                {
                    onclose();
                }
                else
                {
                    var jsonDocument = JsonSerializer.Deserialize<object>(vs.ToArray());
                    vs.Clear();
                    await onmessage(jsonDocument);
                }
                //当前方法在后台执行,所以我们需要手动更新UI
                StateHasChanged();
            }
        }
    }

  

  onopen,onclose,onmessage实现如下

public async Task onopen()
    {

        Console.WriteLine("websocket connect");
        wsConnectState = 1;
        await GetDesks();
        StateHasChanged();
    }
    public void onclose()
    {
        Console.WriteLine("websocket disconnect");
        wsConnectState = 0;
    }

    public async Task onmessage(object msgobjer)
    {
        try
        {
            var jsonDocument = JsonSerializer.Deserialize<object>(msgobjer.ToString());
            if (jsonDocument is JsonElement msg)
            {
                if (msg.TryGetProperty("type", out var element) && element.ValueKind == JsonValueKind.String)
                {
                    Console.WriteLine(element.ToString());
                    if (element.GetString() == "Sitdown")
                    {
                        Console.WriteLine(msg.GetProperty("msg").GetString());
                        var deskId = msg.GetProperty("deskId").GetInt32();
                        foreach (var desk in desks)
                        {
                            if (desk.Id.Equals(deskId))
                            {
                                var pos = msg.GetProperty("pos").GetInt32();
                                Console.WriteLine(pos);
                                var player = JsonSerializer.Deserialize<Player>(msg.GetProperty("player").ToString());
                                switch (pos)
                                {
                                    case 1:
                                        desk.player1 = player;
                                        break;
                                    case 2:
                                        desk.player2 = player;
                                        break;
                                    case 3:
                                        desk.player3 = player;
                                        break;

                                }
                                break;
                            }
                        }
                    }
                    else if (element.GetString() == "Standup")
                    {
                        Console.WriteLine(msg.GetProperty("msg").GetString());
                        var deskId = msg.GetProperty("deskId").GetInt32();
                        foreach (var desk in desks)
                        {
                            if (desk.Id.Equals(deskId))
                            {
                                var pos = msg.GetProperty("pos").GetInt32();
                                Console.WriteLine(pos);
                                switch (pos)
                                {
                                    case 1:
                                        desk.player1 = null;
                                        break;
                                    case 2:
                                        desk.player2 = null;
                                        break;
                                    case 3:
                                        desk.player3 = null;
                                        break;

                                }
                                break;
                            }
                        }
                    }
                    else if (element.GetString() == "GameStarted")
                    {
                        Console.WriteLine(msg.GetProperty("msg").GetString());
                        currentChannel.msgs.Insert(0, msg);
                    }
                    else if (element.GetString() == "GameOvered")
                    {
                        Console.WriteLine(msg.GetProperty("msg").GetString());
                        currentChannel.msgs.Insert(0, msg);
                    }
                    else if (element.GetString() == "GamePlay")
                    {

                        ddzid = msg.GetProperty("ddzid").GetString();
                        ddzdata = JsonSerializer.Deserialize<GameInfo>(msg.GetProperty("data").ToString());
                        Console.WriteLine(msg.GetProperty("data").ToString());
                        stage = ddzdata.stage;
                        selectedPokers = new int?[55];
                        if (playTips.Any())
                            playTips.RemoveRange(0, playTips.Count);
                        playTipsIndex = 0;

                        if (this.stage == "游戏结束")
                        {
                            foreach (var ddz in this.ddzdata.players)
                            {
                                if (ddz.id == player.Nick)
                                {
                                    this.player.Score += ddz.score;
                                    break;
                                }
                            }

                        }

                        if (this.ddzdata.operationTimeoutSeconds > 0 && this.ddzdata.operationTimeoutSeconds < 100)
                            await this.operationTimeoutTimer();
                    }
                    else if (element.GetString() == "chanmsg")
                    {
                        currentChannel.msgs.Insert(0, msg);
                        if (currentChannel.msgs.Count > 120)
                            currentChannel.msgs.RemoveRange(100, 20);
                    }

                }
                Console.WriteLine("onmessage_end");
            }
        }
        catch (Exception ex)
        {
            Console.WriteLine($"onmessage_ex_{ex.Message}_{msgobjer}");
        }

    }

  在html5版中有使用setTimeout来刷新用户的等待操作时间,我们可以通过一个折中方法实现

private CancellationTokenSource timernnnxx { get; set; }

    //js setTimeout
    private async Task setTimeout(Func<Task> action, int time)
    {
        try
        {
            timernnnxx = new CancellationTokenSource();
            await Task.Delay(time, timernnnxx.Token);
            await action?.Invoke();
        }
        catch (Exception ex)
        {
            Console.WriteLine($"setTimeout_{ex.Message}");
        }

    }
    private async Task operationTimeoutTimer()
    {
        Console.WriteLine("operationTimeoutTimer_" + this.ddzdata.operationTimeoutSeconds);
        if (timernnnxx != null)
        {
            timernnnxx.Cancel(false);
            Console.WriteLine("operationTimeoutTimer 取消");
        }
        this.ddzdata.operationTimeoutSeconds--;
        StateHasChanged();
        if (this.ddzdata.operationTimeoutSeconds > 0)
        {
            await setTimeout(this.operationTimeoutTimer, 1000);
        }
    }

  其他组件相关如数据绑定,事件处理,组件参数等等推荐直接看文档。

  浏览器下载的部分资源如下

 

今天关于凹语言 Docker + WebAssembly 3 分钟入门凹言凹语是什么意思的讲解已经结束,谢谢您的阅读,如果想了解更多关于(转)WASM(WebAssember)快速了解第一篇——什么是WebAssembly、10分钟入门WebAssembly、5分钟实现一个简单的 WebAssembly 应用|WebAssembly 入门教程、Blazor WebAssembly 中的依赖注入、认证授权、WebSocket、JS互操作等(原标题 Blazor(WebAssembly) + .NETCore 实现斗地主)的相关知识,请在本站搜索。

本文标签:

上一篇使用 Prometheus 监控 docker compose 方式部署的 ES(prometheus监控docker 容器)

下一篇PYTHON模块modules(python模块怎么下载)