WebAssembly 与 .net

本文主要是介绍WebAssembly 与 .net，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

.Net目前支持WebAssembly。

基本上目前有两种使用场景：

• 浏览器端 -- 通过 Blazor WebAssembly ，给了我们使用.net编写前端应用的能力，并且可以享受.net本身具备的诸如类型安全和优雅的语法。
• 服务端 -- .net程序中使用其他语言编写的wasm模块。

下面我们通过两个demo分别演示一下这两种场景的使用姿势。

浏览器端

不得不提微软大法好。.Net 在浏览器端对wasm的支持非常优秀，主要是推出了 Blazor WebAssembly 这一神器。

在讲Blazor WebAssembly 之前，我们先介绍一下什么是Blazor？

Blazor是一个开放源代码和跨平台的Web UI框架，用于使用.NET和C＃而不是JavaScript来构建单页应用程序。 Blazor基于强大而灵活的组件模型，用于构建丰富的交互式Web UI。您可以结合使用.NET代码和Razor语法来实现Blazor UI组件：HTML和C＃的完美融合。 Blazor组件可以无缝处理UI事件，绑定到用户输入并有效地呈现UI更新。

然后可以以不同的方式托管Blazor组件，以创建您的Web应用程序。第一种受支持的方式称为Blazor服务器。在Blazor Server应用程序中，组件使用.NET Core在服务器上运行。所有UI交互和更新都使用与浏览器的实时WebSocket连接进行处理。 Blazor Server应用程序加载迅速且易于实现。 .NET Core 3.1 LTS提供了对Blazor服务器的支持。

Blazor WebAssembly现在是托管Blazor组件的第二种受支持的方式：在客户端使用基于WebAssembly的.NET运行时。

Blazor WebAssembly可与所有现代的Web浏览器（台式机和移动设备）一起使用。与JavaScript相似，Blazor WebAssembly应用可从浏览器的安全沙箱中安全地在用户设备上运行。这些应用程序可以作为完全独立的静态站点进行部署，而根本没有任何.NET服务器组件，或者可以与http://ASP.NET Core配对使用，从而可以通过.NET进行全栈Web开发，从而可以轻松地与客户端和服务器共享代码。

下面我们简单通过一个示例让大家了解一下。

1：我们可以直接通过命令创建一个项目(由此可见微软对于Blazor WebAssembly的重视和支持力度)：

$ mkdir wasmblazor
$ cd wasmblazor
$ dotnet new blazorwasm 
The template "Blazor WebAssembly App" was created successfully.

Processing post-creation actions...
Running 'dotnet restore' on /Users/iyacontrol/dotnet/wasmblazor/wasmblazor.csproj...
  Determining projects to restore...
/usr/local/share/dotnet/sdk/3.1.402/NuGet.targets(128,5): error : Unable to load the service index for source https://api.nuget.org/v3/index.json. [/Users/iyacontrol/dotnet/wasmblazor/wasmblazor.csproj]
/usr/local/share/dotnet/sdk/3.1.402/NuGet.targets(128,5): error :   nodename nor servname provided, or not known [/Users/iyacontrol/dotnet/wasmblazor/wasmblazor.csproj]

Restore failed.
Post action failed.
Description: Restore NuGet packages required by this project.
Manual instructions: Run 'dotnet restore'

2：运行

dotnet run
info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://localhost:8001
info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://localhost:8000
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
      Content root path: /Users/iyacontrol/dotnet/wasmblazor

访问http://localhost:8000，出现如下页面：

整个项目，没有用到任何的js，全部由c#代码完成。c#代码被编译成wasm，在浏览器中执行。可以说，微软的Blazor 真是恰到好处的将wasm运用起来。

服务器端

.net 能够使用WebAssembly作为公共字节码，并使用WASI作为公共接口，从而在Web浏览器以外的任何地方运行WebAssembly代码

在.NET中运行WASM代码的当前最简单，最直接的方法之一是使用Wasmtime的 wasmtime-dotnet.NET 嵌入运行时。

1: 准备wasm模块，供后续的dotnet程序使用。

有许多编译器工具可以将C或C ++代码编译为WebAssembly。 Emscripten 是最常用的一种。本次我们使用 Emscripten 将C/C ++代码编译为WebAssembly。

创建一个fibonacci.c文件，内容如下：

#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
int fib(int n) {
  if(n <= 0){
    return 0;
  }

  int i, t, a = 0, b = 1;

  for (i = 1; i < n; i++) {
    t = a + b;
    a = b;
    b = t;
  }
  
  return b;
} 

顾名思义，大家已经知道实现了一个计算斐波那契数列的功能。

需要EMSCRIPTEN_KEEPALIVE宏标记函数 ，该宏会确保该函数不会被内联，并将被导出以供外部使用。

接下来我们编译c代码为wasm模块。为了方便，直接使用docker镜像作为编译环境，省去了我们配置环境的烦恼。

docker run 
  --rm 
  -v `pwd`:`pwd` 
  -w `pwd` 
  -u $(id -u):$(id -g) 
  emscripten/emsdk 
  emcc native/fibonacci.c -o wasm/fibonacci.wasm --no-entry

在wasm文件夹下生成了fibonacci.wasm。

2：创建dotnet工程。

$ mkdir wasmintro
$ cd wasmintro
$ dotnet new console

Welcome to .NET Core 3.1!
---------------------
SDK Version: 3.1.402

Telemetry
---------
The .NET Core tools collect usage data in order to help us improve your experience. The data is anonymous. It is collected by Microsoft and shared with the community. You can opt-out of telemetry by setting the DOTNET_CLI_TELEMETRY_OPTOUT environment variable to '1' or 'true' using your favorite shell.

Read more about .NET Core CLI Tools telemetry: https://aka.ms/dotnet-cli-telemetry

----------------
Explore documentation: https://aka.ms/dotnet-docs
Report issues and find source on GitHub: https://github.com/dotnet/core
Find out what's new: https://aka.ms/dotnet-whats-new
Learn about the installed HTTPS developer cert: https://aka.ms/aspnet-core-https
Use 'dotnet --help' to see available commands or visit: https://aka.ms/dotnet-cli-docs
Write your first app: https://aka.ms/first-net-core-app
--------------------------------------------------------------------------------------
Getting ready...
The template "Console Application" was created successfully.

Processing post-creation actions...
Running 'dotnet restore' on /Users/iyacontrol/dotnet/wasmintro/wasmintro.csproj...
  Determining projects to restore...
  Restored /Users/iyacontrol/dotnet/wasmintro/wasmintro.csproj (in 155 ms).

Restore succeeded.

目前dotnet core最新版本为3.1 。

3：我们可以通过添加Nuget包将其添加到我们的项目中：dotnet add package --version 0.19.0-preview1 wasmtime（撰写本文时的预览版）

4：编写主程序Program.cs。具体如下：

using System;
using Wasmtime;

namespace wasmintro
{
    class Program
    {
        static void Main(string[] args)
        {
            using var engine = new Engine();

            using var module = Module.FromFile(engine,"wasm/fibonacci.wasm");

            using var host = new Host(engine);
            using dynamic instance = host.Instantiate(module);

            var result = instance.fib(7);
            Console.WriteLine(result);
            
        }
    }
} 

5: 运行程序

dotnet run
13

我们的程序已经完美运行了。

总结

本文介绍了WebAssembly 与 .net 两种使用姿势。尤其是在浏览器端，微软通过Blazor WebAssembly，给与了.net 开发者全栈的能力。

这篇关于WebAssembly 与 .net的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！