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 开发者全栈的能力。