ASP.NET Core BlazorSignalR kılavuzu

Durum bilgisi olan yeniden bağlantı ile Azure SignalR Hizmeti

Durum bilgisi olan yeniden bağlantı (WithStatefulReconnect), .NET 8 ile yayımlandı ancak şu anda Azure SignalR Hizmeti için desteklenmiyor. Daha fazla bilgi için bkz . Durum Bilgisi Olan Yeniden Bağlanma Desteği? (Azure/azure-signalr #1878).

Etkileşimli Sunucu bileşenleri için WebSocket sıkıştırması

Varsayılan olarak, Etkileşimli Sunucu bileşenleri:

• WebSocket bağlantıları için sıkıştırmayı etkinleştirin. ConfigureWebsocketOptions WebSocket sıkıştırmasını denetler.

• yalnızca sıkıştırma etkinleştirildiğinde veya WebSocket bağlamı için bir frame-ancestors yapılandırma sağlandığında uygulamanın hizmet verildiği kaynaktan birinde <iframe> eklemeye izin veren olarak ayarlanmış 'self'bir İçerik Güvenlik İlkesi (CSP) yönergesi benimseyin. ContentSecurityFrameAncestorPolicy CSP'yi frame-ancestors denetler.

CSP'yi frame-ancestors merkezi bir şekilde yapılandırmak isteyebileceğiniz için nullCSP değeri ConfigureWebSocketOptions olarak ayarlanarak el ile kaldırılabilir. frame-ancestors CSP merkezi bir şekilde yönetildiğinde, ilk belge her işlendiğinde ilkenin uygulanmasına dikkat edilmelidir. Uygulamayı saldırılara açık hale getirebileceğinden ilkenin tamamen kaldırılması önerilmez.

Kullanım örnekleri:

ayarını ConfigureWebSocketOptions yaparak sıkıştırmayı nulldevre dışı bırakın. Bu, uygulamanın saldırı güvenlik açığını azaltır ancak performansın düşmesine neden olabilir:

builder.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode(o => o.ConfigureWebSocketOptions = null)

Sıkıştırma etkinleştirildiğinde, WebSocket sıkıştırmasına 'none' izin veren ancak tarayıcıların uygulamayı herhangi <iframe>bir içine eklemesini engelleyen (tek tırnak gereklidir) değeriyle daha frame-ancestors katı bir CSP yapılandırın:

builder.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode(o => o.ContentSecurityFrameAncestorsPolicy = "'none'")

Sıkıştırma etkinleştirildiğinde, olarak ayarlayarak ContentSecurityFrameAncestorsPolicy CSP'yi nullkaldırınframe-ancestors. Bu senaryo yalnızca CSP'yi merkezi bir şekilde ayarlayan uygulamalar için önerilir:

builder.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode(o => o.ContentSecurityFrameAncestorsPolicy = null)

Güvenlik üzerindeki etkileri için bkz . ASP.NET Core Blazor etkileşimli sunucu tarafı işleme için tehdit azaltma kılavuzu. Yönerge hakkında frame-ancestors daha fazla bilgi için bkz . CSP: frame-ancestors (MDN belgeleri).

Çalışırken Yeniden Yükleme için yanıt sıkıştırmayı devre dışı bırakma

Çalışırken Yeniden Yükleme kullanırken ortamda Yanıt Sıkıştırma Ara Yazılımını Development devre dışı bırakın. Proje şablonundaki varsayılan kodun kullanılıp kullanılmadığı, her zaman istek işleme işlem hattında ilk olarak çağrısı UseResponseCompression yapın.

Program dosyasında:

if (!app.Environment.IsDevelopment())
{
    app.UseResponseCompression();
}

Prerendering yapılandırılırsa, sunucuya istemci bağlantısı kurulmadan önce ön kayıt gerçekleşir. Daha fazla bilgi için bkz . Prerender ASP.NET Core Razor bileşenleri.

Prerendering yapılandırılırsa, sunucuya istemci bağlantısı kurulmadan önce ön kayıt gerçekleşir. Daha fazla bilgi için aşağıdaki makaleleri inceleyin:

• ASP.NET Core'da Bileşen Etiketi Yardımcısı
• ASP.NET Core Razor bileşenlerini önceden işleme ve tümleştirme

dosyadaki Program seçenekleri, için temsilci olarak bir AddInteractiveServerComponentsseçenekle okuyun veya ayarlayın. Yer {OPTION} tutucu seçeneği {VALUE} , yer tutucu ise değerdir.

Program dosyasında:

builder.Services.AddRazorComponents().AddInteractiveServerComponents(options =>
{
    options.{OPTION} = {VALUE};
});

dosyadaki Program seçenekleri, için temsilci olarak bir AddServerSideBlazorseçenekle okuyun veya ayarlayın. Yer {OPTION} tutucu seçeneği {VALUE} , yer tutucu ise değerdir.

Program dosyasında:

builder.Services.AddServerSideBlazor(options =>
{
    options.{OPTION} = {VALUE};
});

seçeneğinin Startup.ConfigureServices temsilcisi AddServerSideBlazorolan seçeneklerle içindeki seçenekleri okuyun veya ayarlayın. Yer {OPTION} tutucu seçeneği {VALUE} , yer tutucu ise değerdir.

Startup.csiçindeStartup.ConfigureServices:

services.AddServerSideBlazor(options =>
{
    options.{OPTION} = {VALUE};
});

Program dosyasında:

builder.Services.AddRazorComponents().AddInteractiveServerComponents().AddHubOptions(options =>
{
    options.{OPTION} = {VALUE};
});

Program dosyasında:

builder.Services.AddServerSideBlazor().AddHubOptions(options =>
{
    options.{OPTION} = {VALUE};
});

Startup.csiçindeStartup.ConfigureServices:

services.AddServerSideBlazor().AddHubOptions(options =>
{
    options.{OPTION} = {VALUE};
});

Çağrısının app.MapBlazorHub ardından uygulamanın Program dosyasına şu çağrıyı app.MapRazorComponents yerleştirin:

app.MapBlazorHub(options =>
{
    options.{OPTION} = {VALUE};
});

tarafından AddInteractiveServerRenderMode MapBlazorHub kullanılan hub'ı yapılandırma işlemi ile AmbiguousMatchExceptionbaşarısız oluyor:

Microsoft.AspNetCore.Routing.Matching.AmbiguousMatchException: The request matched multiple endpoints.

.NET 8'i hedefleyen uygulamalarla ilgili soruna geçici bir çözüm olarak, yöntemini kullanarak WithOrder özel olarak yapılandırılmış Blazor hub'a daha yüksek öncelik verin:

app.MapBlazorHub(options =>
{
    options.CloseOnAuthenticationExpiration = true;
}).WithOrder(-1);

Daha fazla bilgi edinmek için aşağıdaki kaynaklara bakın:

• NET8'de MapBlazorHub yapılandırması bir İstekle eşleşen birden çok uç nokta özel durumu oluşturur (dotnet/aspnetcore #51698)
• MapBlazorHub ile birden çok blazor giriş noktası eşleme girişimleri Belirsiz Yol Hatasına neden olur. Bu işlem net7 (dotnet/aspnetcore #52156) ile çalıştı

app.MapBlazorHub Uygulamanın Program dosyasında seçeneklerini belirtin:

app.MapBlazorHub(options =>
{
    options.{OPTION} = {VALUE};
});

Uç nokta yönlendirme yapılandırmasında seçeneklerini app.MapBlazorHub belirtin:

app.UseEndpoints(endpoints =>
{
    endpoints.MapBlazorHub(options =>
    {
        options.{OPTION} = {VALUE};
    });
    ...
});

Bir yaklaşım, dosyada ayarlanarak MaximumReceiveMessageSize sınırın artırılmasını Program içerir. Aşağıdaki örnek, maksimum alma iletisi boyutunu 64 KB olarak ayarlar:

builder.Services.AddRazorComponents().AddInteractiveServerComponents()
    .AddHubOptions(options => options.MaximumReceiveMessageSize = 64 * 1024);

SignalR Gelen ileti boyutu sınırının artırılması, daha fazla sunucu kaynağı gerektirme maliyetine neden olur ve Hizmet Reddi (DoS) saldırıları riskini artırır. Buna ek olarak, bellekte dize veya bayt dizileri olarak büyük miktarda içerik okumak da çöp toplayıcı ile kötü çalışan ayırmalara neden olabilir ve bu da ek performans cezalarına neden olabilir.

Büyük yükleri okumak için daha iyi bir seçenek, içeriği daha küçük parçalar halinde göndermek ve yükü olarak Streamişlemektir. Bu, büyük JavaScript (JS) birlikte çalışma JSON yükleri okunurken veya birlikte çalışma verileri ham bayt olarak kullanılabiliyorsa JS kullanılabilir. Sunucu tarafı uygulamalarda bileşene benzer teknikler kullanan büyük ikili yüklerin gönderilmesini InputFile gösteren bir örnek için bkz. İkili Gönderme örnek uygulaması veInputLargeTextArea BlazorBileşen Örneği.

Üzerinde SignalR büyük yükleri işleyen formlar doğrudan akış birlikte çalışma JS özelliğini de kullanabilir. Daha fazla bilgi için bkz . ASP.NET Core'da BlazorJavaScript işlevlerinden .NET yöntemlerini çağırma. Verileri sunucuya aktaran <textarea> bir form örneği için bkz . ASP.NET Core Blazor formlarında sorun giderme.

Bir yaklaşım, dosyada ayarlanarak MaximumReceiveMessageSize sınırın artırılmasını Program içerir. Aşağıdaki örnek, maksimum alma iletisi boyutunu 64 KB olarak ayarlar:

builder.Services.AddServerSideBlazor()
    .AddHubOptions(options => options.MaximumReceiveMessageSize = 64 * 1024);

SignalR Gelen ileti boyutu sınırının artırılması, daha fazla sunucu kaynağı gerektirme maliyetine neden olur ve Hizmet Reddi (DoS) saldırıları riskini artırır. Buna ek olarak, bellekte dize veya bayt dizileri olarak büyük miktarda içerik okumak da çöp toplayıcı ile kötü çalışan ayırmalara neden olabilir ve bu da ek performans cezalarına neden olabilir.

Büyük yükleri okumak için daha iyi bir seçenek, içeriği daha küçük parçalar halinde göndermek ve yükü olarak Streamişlemektir. Bu, büyük JavaScript (JS) birlikte çalışma JSON yükleri okunurken veya birlikte çalışma verileri ham bayt olarak kullanılabiliyorsa JS kullanılabilir. bileşenine benzer teknikleri kullanan büyük Blazor Server ikili yüklerin gönderilmesiniInputFile gösteren bir örnek için bkz. İkili Gönderme örnek uygulaması veBlazorInputLargeTextArea Bileşen Örneği.

Üzerinde SignalR büyük yükleri işleyen formlar doğrudan akış birlikte çalışma JS özelliğini de kullanabilir. Daha fazla bilgi için bkz . ASP.NET Core'da BlazorJavaScript işlevlerinden .NET yöntemlerini çağırma. Bir uygulamadaki verilerin akışını <textarea> sağlayan bir Blazor Server form örneği için bkz . ASP.NET Core Blazor formlarında sorun giderme.

içinde Startup.ConfigureServicesayarlayarak MaximumReceiveMessageSize sınırı artırın:

services.AddServerSideBlazor()
    .AddHubOptions(options => options.MaximumReceiveMessageSize = 64 * 1024);

SignalR Gelen ileti boyutu sınırının artırılması, daha fazla sunucu kaynağı gerektirme maliyetine neden olur ve Hizmet Reddi (DoS) saldırıları riskini artırır. Buna ek olarak, bellekte dize veya bayt dizileri olarak büyük miktarda içerik okumak da çöp toplayıcı ile kötü çalışan ayırmalara neden olabilir ve bu da ek performans cezalarına neden olabilir.

• Gelen ileti boyutu sınırından daha büyük verileri aktarmak için yerel akış JS birlikte çalışma desteğinden SignalR yararlanın:
  • ASP.NET Core Blazor'da .NET yöntemlerinden JavaScript işlevlerini çağırma
  • ASP.NET Core Blazor'da JavaScript işlevlerinden .NET yöntemlerini çağırma
  • Form yükü örneği: ASP.NET Core Blazor formlarının sorunlarını giderme
• Genel ipuçları:
  • ve C# kodunda JS büyük nesneler ayırmayın.
  • İşlem tamamlandığında veya iptal edildiğinde boş tüketilen bellek.
  • Güvenlik amacıyla aşağıdaki ek gereksinimleri zorunlu kılın:
    • Geçirilebilen en büyük dosya veya veri boyutunu bildirin.
    • İstemciden sunucuya en düşük karşıya yükleme oranını bildirin.
  • Veriler sunucu tarafından alındıktan sonra şu şekilde olabilir:
    • Tüm kesimler toplanana kadar geçici olarak bellek arabelleğinde depolanır.
    • Hemen tüketilir. Örneğin, veriler hemen bir veritabanında depolanabilir veya her kesim alınırken diske yazılabilir.

• Verileri daha küçük parçalara ayırın ve tüm veriler sunucu tarafından alınana kadar veri kesimlerini sıralı olarak gönderin.
• ve C# kodunda JS büyük nesneler ayırmayın.
• Veri gönderirken veya alırken ana kullanıcı arabirimi iş parçacığını uzun süreler boyunca engellemeyin.
• İşlem tamamlandığında veya iptal edildiğinde boş tüketilen bellek.
• Güvenlik amacıyla aşağıdaki ek gereksinimleri zorunlu kılın:
  • Geçirilebilen en büyük dosya veya veri boyutunu bildirin.
  • İstemciden sunucuya en düşük karşıya yükleme oranını bildirin.
• Veriler sunucu tarafından alındıktan sonra şu şekilde olabilir:
  • Tüm kesimler toplanana kadar geçici olarak bellek arabelleğinde depolanır.
  • Hemen tüketilir. Örneğin, veriler hemen bir veritabanında depolanabilir veya her kesim alınırken diske yazılabilir.

Kullanıcı arabirimini özelleştirmek için ile tek bir id components-reconnect-modalöğe tanımlayın. Aşağıdaki örnek, öğesini bileşene App yerleştirir.

App.razor:

Kullanıcı arabirimini özelleştirmek için ile tek bir id components-reconnect-modalöğe tanımlayın. Aşağıdaki örnek, öğesini konak sayfasına yerleştirir.

Pages/_Host.cshtml:

Kullanıcı arabirimini özelleştirmek için ile tek bir id components-reconnect-modalöğe tanımlayın. Aşağıdaki örnek, öğesini düzen sayfasına yerleştirir.

Pages/_Layout.cshtml:

Kullanıcı arabirimini özelleştirmek için ile tek bir id components-reconnect-modalöğe tanımlayın. Aşağıdaki örnek, öğesini konak sayfasına yerleştirir.

Pages/_Host.cshtml:

wwwroot/app.css:

wwwroot/css/site.css:

Sitenin CSS'sinde kalıcı öğe için özelliğini ayarlayarak transition-delay yeniden bağlanma kullanıcı arabirimi görüntülenmeden önceki gecikmeyi özelleştirin. Aşağıdaki örnek, geçiş gecikmesini 500 ms 'den (varsayılan) 1.000 ms'ye (1 saniye) ayarlar.

wwwroot/app.css:

wwwroot/css/site.css:

#components-reconnect-modal {
    transition: visibility 0s linear 1000ms;
}

Geçerli yeniden bağlanma girişimini görüntülemek için, ile bir id components-reconnect-current-attemptöğesi tanımlayın. Yeniden bağlanma yeniden denemesi sayısı üst sınırını görüntülemek için, ile bir id components-reconnect-max-retriesöğesi tanımlayın. Aşağıdaki örnek, bu öğeleri önceki örnekten sonra yeniden bağlanma girişimi kalıcı öğesinin içine yerleştirir.

<div id="components-reconnect-modal">
    There was a problem with the connection!
    (Current reconnect attempt: 
    <span id="components-reconnect-current-attempt"></span> /
    <span id="components-reconnect-max-retries"></span>)
</div>

Özel yeniden bağlanma kalıcısı görüntülendiğinde, önceki koda göre aşağıdakine benzer bir içerik işler:

There was a problem with the connection! (Current reconnect attempt: 3 / 8)

Varsayılan olarak, sunucuya istemci bağlantısı kurulmadan önce bileşenler sunucuda önceden oluşturulur. Daha fazla bilgi için bkz . Prerender ASP.NET Core Razor bileşenleri.

Varsayılan olarak, sunucuya istemci bağlantısı kurulmadan önce bileşenler sunucuda önceden oluşturulur. Daha fazla bilgi için bkz . ASP.NET Core'da Bileşen Etiketi Yardımcısı.

Sunucu tarafı devre etkinliğini izleme

üzerindeki CircuitHandleryöntemini kullanarak CreateInboundActivityHandler gelen bağlantı hattı etkinliğini izleyin. Gelen bağlantı hattı etkinliği, kullanıcı arabirimi olayları veya JavaScript-to-.NET birlikte çalışma çağrıları gibi tarayıcıdan sunucuya gönderilen herhangi bir etkinliktir.

Örneğin, istemcinin boşta olup olmadığını algılamak ve devre kimliğini (Circuit.Id):

using Microsoft.AspNetCore.Components.Server.Circuits;
using Microsoft.Extensions.Options;
using Timer = System.Timers.Timer;

public sealed class IdleCircuitHandler : CircuitHandler, IDisposable
{
    private Circuit? currentCircuit;
    private readonly ILogger logger;
    private readonly Timer timer;

    public IdleCircuitHandler(ILogger<IdleCircuitHandler> logger, 
        IOptions<IdleCircuitOptions> options)
    {
        timer = new Timer
        {
            Interval = options.Value.IdleTimeout.TotalMilliseconds,
            AutoReset = false
        };

        timer.Elapsed += CircuitIdle;
        this.logger = logger;
    }

    private void CircuitIdle(object? sender, System.Timers.ElapsedEventArgs e)
    {
        logger.LogInformation("{CircuitId} is idle", currentCircuit?.Id);
    }

    public override Task OnCircuitOpenedAsync(Circuit circuit, 
        CancellationToken cancellationToken)
    {
        currentCircuit = circuit;

        return Task.CompletedTask;
    }

    public override Func<CircuitInboundActivityContext, Task> CreateInboundActivityHandler(
        Func<CircuitInboundActivityContext, Task> next)
    {
        return context =>
        {
            timer.Stop();
            timer.Start();

            return next(context);
        };
    }

    public void Dispose() => timer.Dispose();
}

public class IdleCircuitOptions
{
    public TimeSpan IdleTimeout { get; set; } = TimeSpan.FromMinutes(5);
}

public static class IdleCircuitHandlerServiceCollectionExtensions
{
    public static IServiceCollection AddIdleCircuitHandler(
        this IServiceCollection services, 
        Action<IdleCircuitOptions> configureOptions)
    {
        services.Configure(configureOptions);
        services.AddIdleCircuitHandler();

        return services;
    }

    public static IServiceCollection AddIdleCircuitHandler(
        this IServiceCollection services)
    {
        services.AddScoped<CircuitHandler, IdleCircuitHandler>();

        return services;
    }
}

Hizmeti dosyaya Program kaydedin. Aşağıdaki örnek, önceki uygulamayı test etmek için beş dakikadan beş saniyeye kadar varsayılan boşta kalma zaman aşımını yapılandırır IdleCircuitHandler :

builder.Services.AddIdleCircuitHandler(options => 
    options.IdleTimeout = TimeSpan.FromSeconds(5));

Bağlantı hattı etkinlik işleyicileri, kapsamı belirlenmiş Blazor hizmetlere diğer bağımlılık eklemeBlazor (DI) kapsamlarından erişmeye yönelik bir yaklaşım da sağlar. Daha fazla bilgi ve örnek için bkz:

• ASP.NET Core Blazor bağımlılık ekleme
• Sunucu tarafı ASP.NET Core Blazor ek güvenlik senaryoları

Bir uygulamanın bağlantı hattının Blazor el ile başlatmasını App.razor dosyasında Blazor Web Appyapılandırın:SignalR

Dosyada bir Blazor uygulamanın SignalR bağlantı hattının el ile başlatılmasını Pages/_Host.cshtml yapılandırın (Blazor Server):

Dosyada bir Blazor uygulamanın SignalR bağlantı hattının el ile başlatılmasını Pages/_Layout.cshtml yapılandırın (Blazor Server):

Dosyada bir Blazor uygulamanın SignalR bağlantı hattının el ile başlatılmasını Pages/_Host.cshtml yapılandırın (Blazor Server):

İstemci için aşağıdaki değerleri yapılandırın:

• withServerTimeout: Sunucu zaman aşımını milisaniye cinsinden yapılandırıyor. Bu zaman aşımı sunucudan ileti alınmadan sona ererse, bağlantı bir hatayla sonlandırılır. Varsayılan zaman aşımı değeri 30 saniyedir. Sunucu zaman aşımı, Etkin Tutma aralığına (withKeepAliveInterval ) atanan değerin en az iki katı olmalıdır.
• withKeepAliveInterval: Etkin Tutma aralığını milisaniye cinsinden (sunucuya ping komutu göndermek için varsayılan aralık) yapılandırılır. Bu ayar, sunucunun bir istemcinin bilgisayarını ağdan çıkarması gibi sabit bağlantı kesilmelerini algılamasına olanak tanır. Ping, sunucu ping'leri kadar sık gerçekleşir. Sunucu beş saniyede bir ping atarsa, beş saniyede bir (5 saniye) daha 5000 düşük bir değer atar. Varsayılan değer 15 saniyedir. Etkin Tutma aralığı, sunucu zaman aşımına (withServerTimeout ) atanan değerin yarısından küçük veya buna eşit olmalıdır.

() dosyasıBlazor Web App için App.razor aşağıdaki örnek, varsayılan değerlerin atamasını gösterir.

Blazor Web App:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    circuit: {
      configureSignalR: function (builder) {
        builder.withServerTimeout(30000).withKeepAliveInterval(15000);
      }
    }
  });
</script>

Dosya (Blazor Server.NET 6'da ASP.NET Core dışındaki tüm sürümler) veya Pages/_Layout.cshtml dosya (Blazor Server.NET 6'da ASP.NET Core) için Pages/_Host.cshtml aşağıdaki örnek.

Blazor Server:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    configureSignalR: function (builder) {
      builder.withServerTimeout(30000).withKeepAliveInterval(15000);
    }
  });
</script>

Yukarıdaki örnekte, {BLAZOR SCRIPT} yer tutucu betik yolu ve dosya adıdır Blazor . Betiğin konumu ve kullanılacak yol için bkz . ASP.NET Core Blazor proje yapısı.

Bir bileşende hub bağlantısı oluştururken, üzerinde HubConnectionBuilder(varsayılan: 30 saniye) ve KeepAliveInterval (varsayılan: 15 saniye) ayarlayın ServerTimeout . Yerleşik HubConnectionüzerinde HandshakeTimeout (varsayılan: 15 saniye) değerini ayarlayın. Aşağıdaki örnekte varsayılan değerlerin ataması gösterilmektedir:

protected override async Task OnInitializedAsync()
{
    hubConnection = new HubConnectionBuilder()
        .WithUrl(Navigation.ToAbsoluteUri("/chathub"))
        .WithServerTimeout(TimeSpan.FromSeconds(30))
        .WithKeepAliveInterval(TimeSpan.FromSeconds(15))
        .Build();

    hubConnection.HandshakeTimeout = TimeSpan.FromSeconds(15);

    hubConnection.On<string, string>("ReceiveMessage", (user, message) => ...

    await hubConnection.StartAsync();
}

İstemci için aşağıdaki değerleri yapılandırın:

• serverTimeoutInMilliseconds: Sunucu zaman aşımı milisaniye cinsinden. Bu zaman aşımı sunucudan ileti alınmadan sona ererse, bağlantı bir hatayla sonlandırılır. Varsayılan zaman aşımı değeri 30 saniyedir. Sunucu zaman aşımı, Etkin Tutma aralığına (keepAliveIntervalInMilliseconds ) atanan değerin en az iki katı olmalıdır.
• keepAliveIntervalInMilliseconds: Sunucuya ping göndermek için varsayılan aralık. Bu ayar, sunucunun bir istemcinin bilgisayarını ağdan çıkarması gibi sabit bağlantı kesilmelerini algılamasına olanak tanır. Ping, sunucu ping'leri kadar sık gerçekleşir. Sunucu beş saniyede bir ping atarsa, beş saniyede bir (5 saniye) daha 5000 düşük bir değer atar. Varsayılan değer 15 saniyedir. Etkin Tutma aralığı, sunucu zaman aşımına (serverTimeoutInMilliseconds ) atanan değerin yarısından küçük veya buna eşit olmalıdır.

Dosya (Blazor Server.NET 6'da ASP.NET Core dışındaki tüm sürümler) veya Pages/_Layout.cshtml dosya (Blazor Server.NET 6'da ASP.NET Core) için Pages/_Host.cshtml aşağıdaki örnek:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    configureSignalR: function (builder) {
      let c = builder.build();
      c.serverTimeoutInMilliseconds = 30000;
      c.keepAliveIntervalInMilliseconds = 15000;
      builder.build = () => {
        return c;
      };
    }
  });
</script>

Yukarıdaki örnekte, {BLAZOR SCRIPT} yer tutucu betik yolu ve dosya adıdır Blazor . Betiğin konumu ve kullanılacak yol için bkz . ASP.NET Core Blazor proje yapısı.

Bir bileşende hub bağlantısı oluştururken, yerleşik HubConnectionüzerinde (varsayılan: 30 saniye), HandshakeTimeout (varsayılan: 15 saniye) ve KeepAliveInterval (varsayılan: 15 saniye) ayarlayın ServerTimeout . Aşağıdaki örnekte varsayılan değerlerin ataması gösterilmektedir:

protected override async Task OnInitializedAsync()
{
    hubConnection = new HubConnectionBuilder()
        .WithUrl(Navigation.ToAbsoluteUri("/chathub"))
        .Build();

    hubConnection.ServerTimeout = TimeSpan.FromSeconds(30);
    hubConnection.HandshakeTimeout = TimeSpan.FromSeconds(15);
    hubConnection.KeepAliveInterval = TimeSpan.FromSeconds(15);

    hubConnection.On<string, string>("ReceiveMessage", (user, message) => ...

    await hubConnection.StartAsync();
}

Blazor Web App:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    circuit: {
      reconnectionHandler: {
        onConnectionDown: (options, error) => console.error(error),
        onConnectionUp: () => console.log("Up, up, and away!")
      }
    }
  });
</script>

Blazor Server:

Sunucu tarafı yeniden bağlantı başarısız olduğunda sayfayı otomatik olarak yenile

Varsayılan yeniden bağlanma davranışı, yeniden bağlantı başarısız olduktan sonra kullanıcının sayfayı yenilemek için el ile işlem gerçekleştirmesini gerektirir. Ancak, sayfayı otomatik olarak yenilemek için özel bir yeniden bağlantı işleyicisi kullanılabilir:

App.razor:

Pages/_Host.cshtml:

<div id="reconnect-modal" style="display: none;"></div>
<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script src="boot.js"></script>

Yukarıdaki örnekte, {BLAZOR SCRIPT} yer tutucu betik yolu ve dosya adıdır Blazor . Betiğin konumu ve kullanılacak yol için bkz . ASP.NET Core Blazor proje yapısı.

Aşağıdaki wwwroot/boot.js dosyayı oluşturun.

Blazor Web App:

(() => {
  const maximumRetryCount = 3;
  const retryIntervalMilliseconds = 5000;
  const reconnectModal = document.getElementById('reconnect-modal');

  const startReconnectionProcess = () => {
    reconnectModal.style.display = 'block';

    let isCanceled = false;

    (async () => {
      for (let i = 0; i < maximumRetryCount; i++) {
        reconnectModal.innerText = `Attempting to reconnect: ${i + 1} of ${maximumRetryCount}`;

        await new Promise(resolve => setTimeout(resolve, retryIntervalMilliseconds));

        if (isCanceled) {
          return;
        }

        try {
          const result = await Blazor.reconnect();
          if (!result) {
            // The server was reached, but the connection was rejected; reload the page.
            location.reload();
            return;
          }

          // Successfully reconnected to the server.
          return;
        } catch {
          // Didn't reach the server; try again.
        }
      }

      // Retried too many times; reload the page.
      location.reload();
    })();

    return {
      cancel: () => {
        isCanceled = true;
        reconnectModal.style.display = 'none';
      },
    };
  };

  let currentReconnectionProcess = null;

  Blazor.start({
    circuit: {
      reconnectionHandler: {
        onConnectionDown: () => currentReconnectionProcess ??= startReconnectionProcess(),
        onConnectionUp: () => {
          currentReconnectionProcess?.cancel();
          currentReconnectionProcess = null;
        }
      }
    }
  });
})();

Blazor Server:

(() => {
  const maximumRetryCount = 3;
  const retryIntervalMilliseconds = 5000;
  const reconnectModal = document.getElementById('reconnect-modal');

  const startReconnectionProcess = () => {
    reconnectModal.style.display = 'block';

    let isCanceled = false;

    (async () => {
      for (let i = 0; i < maximumRetryCount; i++) {
        reconnectModal.innerText = `Attempting to reconnect: ${i + 1} of ${maximumRetryCount}`;

        await new Promise(resolve => setTimeout(resolve, retryIntervalMilliseconds));

        if (isCanceled) {
          return;
        }

        try {
          const result = await Blazor.reconnect();
          if (!result) {
            // The server was reached, but the connection was rejected; reload the page.
            location.reload();
            return;
          }

          // Successfully reconnected to the server.
          return;
        } catch {
          // Didn't reach the server; try again.
        }
      }

      // Retried too many times; reload the page.
      location.reload();
    })();

    return {
      cancel: () => {
        isCanceled = true;
        reconnectModal.style.display = 'none';
      },
    };
  };

  let currentReconnectionProcess = null;

  Blazor.start({
    reconnectionHandler: {
      onConnectionDown: () => currentReconnectionProcess ??= startReconnectionProcess(),
      onConnectionUp: () => {
        currentReconnectionProcess?.cancel();
        currentReconnectionProcess = null;
      }
    }
  });
})();

Blazor'ı başlatma hakkında daha fazla bilgi için bkz. ASP.NET Core Blazor'ı başlatma.

Blazor Web App:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    circuit: {
      reconnectionOptions: {
        maxRetries: 3,
        retryIntervalMilliseconds: 2000
      }
    }
  });
</script>

Blazor Server:

Kullanıcı bağlantısı kesilmiş bir uygulamaya geri döndüğünde, bir sonraki yeniden bağlantı aralığının süresini beklemek yerine hemen yeniden bağlanma denenir. Bu davranış, kullanıcı için bağlantıyı mümkün olan en kısa sürede sürdürmeyi dener.

Varsayılan yeniden bağlanma zamanlaması hesaplanan geri alma stratejisini kullanır. İlk birkaç yeniden bağlantı denemesi, denemeler arasında hesaplanan gecikmeler ortaya çıkmadan önce hızlı bir şekilde gerçekleştirilir. Yeniden deneme aralığını hesaplamaya yönelik varsayılan mantık, bildirimde bulunmaksızın değiştirilebilir ancak çerçevenin Blazor kullandığı varsayılan mantığı işlevde computeDefaultRetryInterval (başvuru kaynağı) bulabilirsiniz.

Yeniden deneme aralığını hesaplamak için bir işlev belirterek yeniden deneme aralığı davranışını özelleştirin. Aşağıdaki üstel geri alma örneğinde, yeniden deneme aralığını hesaplamak için önceki yeniden bağlanma denemelerinin sayısı 1.000 ms ile çarpılır. Önceki yeniden bağlanma girişimlerinin sayısı () yeniden deneme üst sınırından (previousAttemptsmaxRetries ) büyükse, null yeniden bağlanma girişimlerini sona erdirmek için yeniden deneme aralığına (retryIntervalMilliseconds) atanır:

Blazor.start({
  circuit: {
    reconnectionOptions: {
      retryIntervalMilliseconds: (previousAttempts, maxRetries) => 
        previousAttempts >= maxRetries ? null : previousAttempts * 1000
    },
  },
});

Alternatif olarak yeniden deneme aralıklarının tam sırasını belirtebilirsiniz. Son belirtilen yeniden deneme aralığından sonra işlevi döndürdüğünden retryIntervalMilliseconds undefinedyeniden denemeler durduruluyor:

Blazor.start({
  circuit: {
    reconnectionOptions: {
      retryIntervalMilliseconds: 
        Array.prototype.at.bind([0, 1000, 2000, 5000, 10000, 15000, 30000]),
    },
  },
});

Yeniden bağlantı kullanıcı arabiriminin ne zaman görüneceğini denetleme

Yeniden bağlantı kullanıcı arabiriminin ne zaman görüneceğini denetlemek aşağıdaki durumlarda yararlı olabilir:

• Dağıtılan bir uygulama, iç ağ veya İnternet gecikmesinin neden olduğu ping zaman aşımları nedeniyle yeniden bağlantı kullanıcı arabirimini sık sık görüntüler ve gecikmeyi artırmak istiyorsunuz.
• Bir uygulama, kullanıcılara bağlantının daha erken bırakıldığını bildirmelidir ve gecikmeyi kısaltmak istersiniz.

Yeniden bağlantı kullanıcı arabiriminin görünümünün zamanlaması, istemcide Etkin Tutma aralığının ve zaman aşımlarının ayarlanmasından etkilenir. Yeniden bağlanma kullanıcı arabirimi, istemcide sunucu zaman aşımına ulaşıldığında (withServerTimeoutİstemci yapılandırması bölümü) görüntülenir. Ancak değerini withServerTimeout değiştirmek için aşağıdaki kılavuzda açıklanan diğer Canlı Tutma, zaman aşımı ve el sıkışma ayarlarında değişiklik yapılması gerekir.

Aşağıdaki yönergeler için genel öneriler olarak:

• Etkin Tutma aralığı, istemci ve sunucu yapılandırmaları arasında eşleşmelidir.
• Zaman aşımları, Etkin Tutma aralığına atanan değerin en az iki katı olmalıdır.

Sunucu yapılandırması

Aşağıdakileri ayarlayın:

• ClientTimeoutInterval (varsayılan: 30 saniye): Sunucu bağlantıyı kapatmadan önce zaman penceresi istemcilerinin bir ileti göndermesi gerekir.
• HandshakeTimeout (varsayılan: 15 saniye): sunucu tarafından istemciler tarafından gelen el sıkışma isteklerinin zaman aşımına uğrarken kullandığı aralık.
• KeepAliveInterval (varsayılan: 15 saniye): Sunucu tarafından bağlı istemcilere canlı tutma pingleri göndermek için kullanılan aralık. İstemcide sunucunun değeriyle eşleşmesi gereken bir Etkin Tutma aralığı ayarı da olduğunu unutmayın.

ClientTimeoutInterval ve HandshakeTimeout değeri artırılabilir ve KeepAliveInterval aynı kalabilir. Önemli nokta, değerleri değiştirirseniz zaman aşımlarının Etkin Tutma aralığının değerinin en az iki katı olduğundan ve Etkin Tutma aralığının sunucu ile istemci arasında eşleştiğinden emin olmanızdır. Daha fazla bilgi için istemcide zaman aşımlarını ve Etkin Tutma'yı yapılandırma SignalR bölümüne bakın.

Aşağıdaki örnekte:

• ClientTimeoutInterval değeri 60 saniyeye çıkarılır (varsayılan değer: 30 saniye).
• HandshakeTimeout değeri 30 saniyeye çıkarılır (varsayılan değer: 15 saniye).
• KeepAliveInterval geliştirici kodunda ayarlanmadı ve varsayılan değeri olan 15 saniyeyi kullanır. Etkin Tutma aralığının değerinin azaltılması, iletişim pinglerinin sıklığını artırır ve bu da uygulama, sunucu ve ağ üzerindeki yükü artırır. Etkin Tutma aralığını düşürürken düşük performans göstermemek için dikkatli olunmalıdır.

Blazor Web App (.NET 8 veya üzeri) sunucu projesinin Program dosyasında:

builder.Services.AddRazorComponents().AddInteractiveServerComponents()
    .AddHubOptions(options =>
{
    options.ClientTimeoutInterval = TimeSpan.FromSeconds(60);
    options.HandshakeTimeout = TimeSpan.FromSeconds(30);
});

Blazor Serverdosyasında:Program

builder.Services.AddServerSideBlazor()
    .AddHubOptions(options =>
    {
        options.ClientTimeoutInterval = TimeSpan.FromSeconds(60);
        options.HandshakeTimeout = TimeSpan.FromSeconds(30);
    });

Daha fazla bilgi için Sunucu tarafı bağlantı hattı işleyici seçenekleri bölümüne bakın.

İstemci yapılandırması

Aşağıdakileri ayarlayın:

• withServerTimeout (varsayılan: 30 saniye): Bağlantı hattının hub bağlantısı için milisaniye olarak belirtilen sunucu zaman aşımını yapılandırılır.
• withKeepAliveInterval (varsayılan: 15 saniye): Bağlantının Etkin Tutma iletilerini gönderdiği milisaniye cinsinden belirtilen aralık.

Sunucu zaman aşımı artırılabilir ve Etkin Tutma aralığı aynı kalabilir. Önemli nokta, değerleri değiştirirseniz sunucu zaman aşımının Etkin Tutma aralığının değerinin en az iki katı olduğundan ve Etkin Tutma aralığı değerlerinin sunucu ile istemci arasında eşleştiğinden emin olmanızdır. Daha fazla bilgi için istemcide zaman aşımlarını ve Etkin Tutma'yı yapılandırma SignalR bölümüne bakın.

Aşağıdaki başlangıç yapılandırma örneğinde (betiğin Blazorkonumu), sunucu zaman aşımı için 60 saniyelik özel bir değer kullanılır. Etkin Tutma aralığı (withKeepAliveInterval) ayarlanmadı ve varsayılan değeri olan 15 saniyeyi kullanır.

Blazor Web App:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    circuit: {
      configureSignalR: function (builder) {
        builder.withServerTimeout(60000);
      }
    }
  });
</script>

Blazor Server:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    configureSignalR: function (builder) {
      builder.withServerTimeout(60000);
    }
  });
</script>

Bir bileşende hub bağlantısı oluştururken, üzerinde sunucu zaman aşımını (WithServerTimeoutvarsayılan: 30 saniye) HubConnectionBuilderayarlayın. Yerleşik HubConnectionüzerinde HandshakeTimeout (varsayılan: 15 saniye) değerini ayarlayın. Zaman aşımlarının Etkin Tutma aralığınınWithKeepAliveInterval/KeepAliveInterval () en az iki katı olduğunu ve Etkin Tutma değerinin sunucu ile istemci arasında eşleşip eşleşmediğini onaylayın.

Aşağıdaki örnek, ile öğreticisindeki IndexSignalR bileşeni temel alır.Blazor Sunucu zaman aşımı 60 saniyeye, el sıkışma zaman aşımı ise 30 saniyeye çıkarılır. Etkin Tutma aralığı ayarlanmadı ve varsayılan değeri olan 15 saniyeyi kullanır.

protected override async Task OnInitializedAsync()
{
    hubConnection = new HubConnectionBuilder()
        .WithUrl(Navigation.ToAbsoluteUri("/chathub"))
        .WithServerTimeout(TimeSpan.FromSeconds(60))
        .Build();

    hubConnection.HandshakeTimeout = TimeSpan.FromSeconds(30);

    hubConnection.On<string, string>("ReceiveMessage", (user, message) => ...

    await hubConnection.StartAsync();
}

Aşağıdakileri ayarlayın:

• serverTimeoutInMilliseconds (varsayılan: 30 saniye): Bağlantı hattının hub bağlantısı için milisaniye olarak belirtilen sunucu zaman aşımını yapılandırılır.
• keepAliveIntervalInMilliseconds (varsayılan: 15 saniye): Bağlantının Etkin Tutma iletilerini gönderdiği milisaniye cinsinden belirtilen aralık.

Sunucu zaman aşımı artırılabilir ve Etkin Tutma aralığı aynı kalabilir. Önemli nokta, değerleri değiştirirseniz sunucu zaman aşımının Etkin Tutma aralığının değerinin en az iki katı olduğundan ve Etkin Tutma aralığı değerlerinin sunucu ile istemci arasında eşleştiğinden emin olmanızdır. Daha fazla bilgi için istemcide zaman aşımlarını ve Etkin Tutma'yı yapılandırma SignalR bölümüne bakın.

Aşağıdaki başlangıç yapılandırma örneğinde (betiğin Blazorkonumu), sunucu zaman aşımı için 60 saniyelik özel bir değer kullanılır. Etkin Tutma aralığı (keepAliveIntervalInMilliseconds) ayarlanmadı ve varsayılan değeri olan 15 saniyeyi kullanır.

Pages/_Host.cshtml içinde:

<script src="_framework/blazor.server.js" autostart="false"></script>
<script>
  Blazor.start({
    configureSignalR: function (builder) {
      let c = builder.build();
      c.serverTimeoutInMilliseconds = 60000;
      builder.build = () => {
        return c;
      };
    }
  });
</script>

Bir bileşende hub bağlantısı oluştururken, yerleşik HubConnectionüzerinde (varsayılan: 30 saniye) ve HandshakeTimeout (varsayılan: 15 saniye) ayarlayın ServerTimeout . Zaman aşımlarının Etkin Tutma aralığının en az iki katı olduğunu onaylayın. Etkin Tutma aralığının sunucu ve istemci arasında eşleşip eşleşmediğini onaylayın.

Aşağıdaki örnek, ile öğreticisindeki IndexSignalR bileşeni temel alır.Blazor ServerTimeout 60 saniyeye HandshakeTimeout ve 30 saniyeye yükseltilir. Etkin Tutma aralığı (KeepAliveInterval) ayarlanmadı ve varsayılan değeri olan 15 saniyeyi kullanır.

protected override async Task OnInitializedAsync()
{
    hubConnection = new HubConnectionBuilder()
        .WithUrl(Navigation.ToAbsoluteUri("/chathub"))
        .Build();

    hubConnection.ServerTimeout = TimeSpan.FromSeconds(60);
    hubConnection.HandshakeTimeout = TimeSpan.FromSeconds(30);

    hubConnection.On<string, string>("ReceiveMessage", (user, message) => ...

    await hubConnection.StartAsync();
}

Bağlantı hattının Blazor istemciyle bağlantısını kesme

Blazor Sayfa olayı tetiklendiğinde bağlantı hattının unload bağlantısı kesilir. İstemcideki diğer senaryoların bağlantı hattını kesmek için uygun olay işleyicisinde çağırın Blazor.disconnect . Aşağıdaki örnekte, sayfa gizli olduğunda bağlantı hattının bağlantısı kesilir (pagehide olay):

window.addEventListener('pagehide', () => {
  Blazor.disconnect();
});

Blazor'ı başlatma hakkında daha fazla bilgi için bkz. ASP.NET Core Blazor'ı başlatma.

Program dosyasında:

builder.Services.AddSingleton<CircuitHandler, TrackingCircuitHandler>();

Startup.csiçindeStartup.ConfigureServices:

services.AddSingleton<CircuitHandler, TrackingCircuitHandler>();

Etkileşimli Sunucu bileşenleri kalmadığında devrelerin kapatılması

Etkileşimli Sunucu bileşenleri, tarayıcıyla bağlantı hattı adı verilen gerçek zamanlı bir bağlantı kullanarak web kullanıcı arabirimi olaylarını işler. Bir kök Etkileşimli Sunucu bileşeni işlendiğinde bir bağlantı hattı ve ilişkili durumu oluşturulur. Bağlantı hattı, sayfada kalan Etkileşimli Sunucu bileşenleri olmadığında kapatılır ve bu da sunucu kaynaklarını serbest bırakır.

IHttpContextAccessor geçerli HttpContext bir kullanılabilir değer olmadığından etkileşimli işlemeden kaçınılmalıdır.

IHttpContextAccessor sunucuda statik olarak işlenen bileşenler için kullanılabilir. Ancak mümkünse bundan kaçınmanızı öneririz.

HttpContext, üst bilgileri veya bileşendeki Components/App.razordiğer özellikleri () inceleme ve değiştirme gibi genel görevler için yalnızca statik olarak işlenmiş kök bileşenlerde App basamaklı parametre olarak kullanılabilir. Değer her zaman null etkileşimli işleme içindir.

[CascadingParameter]
public HttpContext? HttpContext { get; set; }

öğesinin HttpContext etkileşimli bileşenlerde gerekli olduğu senaryolar için verileri sunucudan kalıcı bileşen durumu aracılığıyla akışla aktarmanızı öneririz. Daha fazla bilgi için bkz . Sunucu tarafı ASP.NET Core Blazor ek güvenlik senaryoları.

Sunucu tarafı uygulamaların bileşenlerinde doğrudan veya dolaylı olarak kullanmayınIHttpContextAccessor./HttpContext Razor Blazor Blazor uygulamalar ASP.NET Core işlem hattı bağlamının dışında çalışır. HttpContext içinde kullanılabilir IHttpContextAccessorolması garanti edilmez ve HttpContext uygulamayı başlatan Blazor bağlamı tutması garanti edilmez.

İstek durumunu Blazor uygulamaya geçirmek için önerilen yaklaşım, uygulamanın ilk işlemesi sırasında kök bileşen parametrelerinden geçer. Alternatif olarak uygulama, kök bileşenin uygulama genelinde kullanılmak üzere başlatma yaşam döngüsü olayında verileri kapsamlı bir hizmete kopyalayabilir. Daha fazla bilgi için bkz . Sunucu tarafı ASP.NET Core Blazor ek güvenlik senaryoları.

Sunucu tarafı Blazor güvenliğinin kritik bir yönü, belirli bir bağlantı hattına bağlı olan kullanıcının, bağlantı hattı oluşturulduktan sonra Blazor bir noktada güncelleştirilebilir ancak IHttpContextAccessorgüncelleştirilmeyebilir. Özel hizmetlerle bu durumu ele alma hakkında daha fazla bilgi için bkz . Sunucu tarafı ASP.NET Çekirdek Blazor ek güvenlik senaryoları.