Integration von WebAssembly und C#: Erstellen leistungsstarker Webanwendungen

Online Python-Trainer für Anfänger

Lernen Sie Python einfach ohne theoretische Überlastung. Lösen Sie praktische Aufgaben mit automatischer Überprüfung und schreiben Sie Code direkt im Browser.

Kurs starten

Einführung in WebAssembly und C#

WebAssembly (WASM) ist ein binäres Low-Level-Anweisungsformat, das es ermöglicht, Code, der in verschiedenen Programmiersprachen geschrieben wurde, mit nahezu nativer Leistung im Webbrowser auszuführen. Dank der Unterstützung von .NET und C# können Entwickler komplexe Rechenaufgaben, Bibliotheken und sogar ganze Anwendungen auf die Client-Seite verlagern, indem sie die vertraute Syntax und das Ökosystem von C# nutzen.

In diesem Artikel betrachten wir, wie die Integration von WebAssembly und C# (.NET) funktioniert, welche Werkzeuge dafür existieren, und geben praktische Codebeispiele. Der Artikel ist sowohl für Anfänger als auch für erfahrene Entwickler nützlich, die die Möglichkeiten ihrer Webprojekte erweitern möchten.

Wie C# in WebAssembly kompiliert wird

Der Kompilierungsprozess von C# in WebAssembly basiert auf der Verwendung der Mono- oder .NET-Laufzeitumgebung, die für die Arbeit in der WASM-Umgebung angepasst wurden. Das Hauptwerkzeug dafür ist Blazor WebAssembly, das Teil der .NET-Plattform ist.

Wenn Sie eine Blazor WebAssembly-Anwendung erstellen, wandelt der Compiler Ihren C#-Code in eine Zwischensprache (IL) um, und dann wird die .NET-Laufzeitumgebung, die in WebAssembly kompiliert wurde, zusammen mit Ihrer Anwendung im Browser geladen. Der gesamte IL-Code wird von dieser Laufzeitumgebung direkt im Browser ausgeführt.

Vorteile dieses Ansatzes:

Leistung — WebAssembly arbeitet fast mit der Geschwindigkeit von nativem Code, was besonders für ressourcenintensive Aufgaben (Bildverarbeitung, Verschlüsselung, mathematische Berechnungen) wichtig ist.
Sicherheit — der Code wird in einer isolierten Browserumgebung ausgeführt.
Portabilität — derselbe C#-Code kann sowohl auf dem Server als auch auf dem Client ausgeführt werden.

Praktisches Beispiel: Erstellen einer Blazor WebAssembly-Anwendung

Betrachten wir die Erstellung einer einfachen Blazor WebAssembly-Anwendung, die Fibonacci-Zahlen berechnet und dabei WebAssembly zur Leistungssteigerung nutzt.

Schritt 1: Installation der Werkzeuge

Stellen Sie sicher, dass das .NET SDK (Version 6.0 oder höher) installiert ist. Verwenden Sie zum Erstellen des Projekts den Befehl:

dotnet new blazorwasm -n FibonacciAppcd FibonacciApp

Schritt 2: Erstellen eines Dienstes für Berechnungen

Erstellen Sie die Datei Services/FibonacciService.cs:

using System;using System.Collections.Generic;

namespace FibonacciApp.Services{    public class FibonacciService    {        public List<long> GenerateSequence(int count)        {            var sequence = new List<long>();            long a = 0, b = 1;            for (int i = 0; i < count; i++)            {                sequence.Add(a);                long temp = a;                a = b;                b = temp + b;            }            return sequence;        }

        public long CalculateNth(int n)        {            if (n <= 1) return n;            long a = 0, b = 1;            for (int i = 2; i <= n; i++)            {                long temp = a + b;                a = b;                b = temp;            }            return b;        }    }}

Schritt 3: Registrierung des Dienstes im DI

Fügen Sie in der Datei Program.cs die Registrierung des Dienstes hinzu:

using FibonacciApp.Services;using Microsoft.AspNetCore.Components.Web;using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);builder.RootComponents.Add<App>("#app");builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });builder.Services.AddScoped<FibonacciService>();

await builder.Build().RunAsync();