‫افزایش کارایی و پاسخ‌گویی برنامه‌های Blazor WebAssembly با استفاده از Blazor Web Worker در دات‌نت 11

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
  <PropertyGroup>
    <TargetFramework>net11.0</TargetFramework>
    <ImplicitUsings>enable</ImplicitUsings>
    <AllowUnsafeBlocks>true</AllowUnsafeBlocks>
  </PropertyGroup>

  <ItemGroup>
    <ProjectReference Include="..\BlazorWebWorker\BlazorWebWorker.csproj" />
  </ItemGroup>
</Project>

using System.Text.Json;
using System.Runtime.Versioning;
using System.Runtime.InteropServices.JavaScript;

namespace BlazorWebApp;

[SupportedOSPlatform("browser")]
public static partial class WorkerMethods
{
    [JSExport]
    public static string GetForecasts(int count)
    {
        // شبیه‌سازی یک پردازش سنگین محاسباتی که اجرای آن ۵ ثانیه زمان می‌برد.
        // اگر این کد روی نخ اصلی اجرا می‌شد، مرورگر کاملاً قفل (Freeze) می‌شد.
        Thread.Sleep(5_000); 

        // تولید داده‌های خام هواشناسی
        var forecasts = Enumerable.Range(1, count).Select(index => new WeatherForecast
        {
            Date = DateOnly.FromDateTime(DateTime.Now.AddDays(index)),
            TemperatureC = Random.Shared.Next(-20, 55),
            Summary = "تولید شده در وب‌ورکر"
        }).ToArray();

        // تبدیل به رشته متنی جهت انتقال امن از فنس حافظه ورکر به مروگر
        return JsonSerializer.Serialize(forecasts); 
    }
}

public static class WorkerClientContainer
{
    private static WebWorkerClient? _cachedClient;

    public static async Task<WebWorkerClient> GetOrCreateClientAsync(IJSRuntime jsRuntime)
    {
        // بازگرداندن کلاینت موجود در صورت مقداردهی قبلی
        if (_cachedClient is not null)
        {
            return _cachedClient;
        }

        // ایجاد نمونه برای اولین بار (هزینه‌بر اما فقط یک‌بار)
        _cachedClient = await WebWorkerClient.CreateAsync(jsRuntime);
        return _cachedClient;
    }
}

@page "/weather"
@using BlazorWebWorker
@inject IJSRuntime JsRuntime

<h3>وضعیت آب و هوا (پردازش در ورکر)</h3>

@if (forecasts == null)
{
    <p><em>در حال محاسبات سنگین در نخ پس‌زمینه (UI قفل نشده است)...</em></p>
}
else
{
    }

@code {
    private WeatherForecast[]? forecasts;

    protected override async Task OnInitializedAsync()
    {
        // دریافت کلاینت ورکر از کش
        var worker = await WorkerClientContainer.GetOrCreateClientAsync(JsRuntime);

        // مشخص کردن آدرس دقیق متد صادراتی دات‌نت
        const string methodSignature = "BlazorWebApp.WorkerMethods.GetForecasts";
        const int requestedRows = 5;
        
        // فرستادن درخواست به ورکر. متد InvokeAsync به صورت خودکار 
        // خروجی رشته را به آبجکت سی‌شارپ دیسریالایز می‌کند.
        forecasts = await worker.InvokeAsync<WeatherForecast[]>(methodSignature, args: [requestedRows]);
    }
}

• dotnet-web-worker-client.js: در نقش کلاینتِ نخ اصلی عمل کرده، سیستم شناسه‌گذاری درخواست‌ها (requestId) را هندل می‌کند و مدیریت Promiseها را به عهده دارد.
• dotnet-web-worker.js: به عنوان هسته اصلی ورکر مستقر در پس‌زمینه عمل می‌کند. این اسکریپت رانتایم سبک دات‌نت را لود کرده، با متد getAssemblyExports متدهای مجاز سی‌شارپ را استخراج می‌کند و از طریق self.postMessage پاسخ‌ها را در قالب Transferable Objects (بدون کپی شدن‌های سنگین در حافظه) به نخ اصلی پس می‌فرستد.