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 開發者全棧的能力。