ASP.NET Core BlazorSignalR kılavuzu

Bu makale, SignalR uygulamalarındaki Blazor bağlantıların nasıl yapılandırılıp yönetileceğini açıklar.

ASP.NET Core SignalR yapılandırmasıyla ilgili genel yönergeler için, belgenin SignalRgenel bakış alanında, özellikle de ASP.NET Core SignalR yapılandırmasındaki konulara bakın.

Sunucu tarafı uygulamalar tarayıcıyla iletişim kurmak için ASP.NET Core SignalR kullanır. SignalR'nin barındırma ve ölçeklendirme koşulları sunucu tarafı uygulamaları için geçerlidir.

Blazordaha düşük gecikme süresi, güvenilirlik ve güvenlik nedeniyle aktarım olarak SignalR WebSockets kullanırken en iyi sonucu verir. Uzun Yoklama, WebSockets kullanılamadığında veya uygulama, SignalR tarafından Uzun Yoklama kullanacak şekilde açıkça yapılandırıldığında kullanılır.

Durum bilgisiyle yeniden bağlantı özelliğine sahip Azure SignalR Hizmeti

SDK v1.26.1 veya sonraki sürümleriyle Azure SignalR Hizmeti, durum bilgisi olan SignalR yeniden bağlanmayı (WithStatefulReconnect) destekler.

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. DisableWebSocketCompression (varsayılan: false) WebSocket sıkıştırmasını denetler.

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

Varsayılan frame-ancestors CSP, ContentSecurityFrameAncestorsPolicy değerini null olarak ayarlayarak, CSP'yi merkezi bir şekilde yapılandırmak veya daha katı bir ilke için 'none' değiştirebilirsiniz. frame-ancestors CSP merkezi bir şekilde yönetildiğinde, ilk belge işlendiğinde ilkenin uygulanmasına dikkat edilmelidir. Uygulamayı saldırılara karşı savunmasız hale getireceği için ilkenin tamamen kaldırılmasını önermiyoruz. Daha fazla bilgi için bkz. ASP.NET Core Blazoriçin İçerik Güvenliği İlkesiNi Zorunlu Kılma ve MDN CSP Kılavuzu.

Sunucu bileşenleri tarafından kullanılan WebSocket bağlantılarını yapılandırmak için ConfigureWebSocketAcceptContext öğesini WebSocketAcceptContext için kullanın. Çiçevet olarak, ContentSecurityFrameAncestorsPolicy içinde tanımlanan çerçeve ataları için sıkıştırmayı etkinleştiren ve CSP ayarlayan bir politika uygulanır.

Kullanım örnekleri:

Sıkıştırmayı DisableWebSocketCompression ayarını true yaparak devre dışı bırakın; bu, uygulamanın saldırıya karşı güvenlik açığını azaltır ancak performansın düşmesine neden olabilir:

builder.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode(o => o.DisableWebSocketCompression = true)

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

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

Sıkıştırmayı etkinleştirdikten sonra, frame-ancestors ayarlayarak ContentSecurityFrameAncestorsPolicy CSP'yi null kaldırın. Bu senaryo yalnızca CSP'yi merkezi bir şekilde ayarlayan uygulamalar için önerilir:

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

Önemli

Tarayıcılar, birden çok CSP üst bilgisinden gelen CSP yönergelerini, en katı ilke yönergesinin değerini kullanarak uygular. Bu nedenle, bir geliştirici bilerek veya yanlışlıkla daha frame-ancestors zayıf 'self' bir ilke ekleyemez.

ContentSecurityFrameAncestorsPolicy öğesine geçirilen dize değerinde tek tırnak işareti gerekir.

❌ Desteklenmeyen değerler:none, self

✔️Desteklenen değerler:'none','self'

Ek seçenekler arasında bir veya daha fazla konak kaynağı ve düzen kaynağı belirtme yer alır.

Güvenlik üzerindeki etkileri için bkz . ASP.NET Core Blazor etkileşimli sunucu tarafı işleme için tehdit azaltma kılavuzu. Daha fazla bilgi için bkz. Blazor ve .

Hot Reload için yanıt sıkıştırmayı devre dışı bırakma

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

Program dosyasında:

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

Kimlik doğrulaması için istemci tarafı SignalR çapraz köken anlaşması

Bu bölümde, SignalR'nin temel istemcisinin çerezler veya HTTP kimlik doğrulama başlıkları gibi kimlik bilgilerini göndermesini sağlamak için nasıl yapılandırılacağı açıklanmaktadır.

Çapraz kaynak SetBrowserRequestCredentials isteklerde Include ayarlamak için fetch kullanın.

IncludeRequestCredentialsMessageHandler.cs:

using System.Net.Http;
using System.Threading;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components.WebAssembly.Http;

public class IncludeRequestCredentialsMessageHandler : DelegatingHandler
{
    protected override Task<HttpResponseMessage> SendAsync(
        HttpRequestMessage request, CancellationToken cancellationToken)
    {
        request.SetBrowserRequestCredentials(BrowserRequestCredentials.Include);
        return base.SendAsync(request, cancellationToken);
    }
}

Hub bağlantısının kurulduğu yerine HttpMessageHandler seçeneğini HttpMessageHandlerFactory atayın.

private HubConnectionBuilder? hubConnection;

...

hubConnection = new HubConnectionBuilder()
    .WithUrl(new Uri(Navigation.ToAbsoluteUri("/chathub")), options =>
    {
        options.HttpMessageHandlerFactory = innerHandler => 
            new IncludeRequestCredentialsMessageHandler { InnerHandler = innerHandler };
    }).Build();

Yukarıdaki örnek, /chathub adresindeki mutlak URI'ye merkez bağlantı URL'sini ayarlamaktadır. URI, https://signalr.example.com örneğin bir dize aracılığıyla veya yapılandırma yoluyla da ayarlanabilir. Navigation enjekte edilen NavigationManager.

Daha fazla bilgi için bkz . ASP.NET Core SignalR yapılandırması.

İstemci tarafı işleme

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. ASP.NET Core Blazor önceden oluşturulmuş durum kalıcılığı.

Önceden oluşturulmuş durum boyutu ve SignalR ileti boyutu sınırı

Önceden işlenmiş büyük bir durum boyutu Blazor devre mesaj boyutu sınırını aşabilir SignalR, bu da aşağıdaki sonuçlara yol açar:

• Bağlantı SignalR hattı istemcide bir hatayla başlatılamıyor: Circuit host not initialized.
• bağlantı hattı başarısız olduğunda istemcideki yeniden bağlantı kullanıcı arabirimi görüntülenir. Kurtarma mümkün değildir.

Sorunu çözmek için aşağıdaki yaklaşımlardan birini kullanın:

• Önceden işlenmiş duruma koyduğunuz veri miktarını azaltın.
• SignalR İleti boyutu sınırını artırın. UYARI: Sınırın artırılması Hizmet Reddi (DoS) saldırı riskini artırabilir.

Ek istemci tarafı kaynakları

• Hub'ın SignalR güvenliğini sağlama
• ASP.NET Core'a genel bakış SignalR
• ASP.NET Core SignalR yapılandırma
• Blazor örnekler GitHub deposu (dotnet/blazor-samples) (nasıl indirilir)

Sunucu tarafı web grubu barındırma için oturum bağlılığı (yapışkan oturumlar) kullanın

Birden fazla arka uç sunucusu kullanımda olduğunda, uygulamanın oturum bağlılığı, yani yapışkan oturumlar olarak adlandırılan özelliğini uygulaması gerekir. Oturum benzimi, bağlantı bırakılırsa istemcinin bağlantı hattının aynı sunucuya yeniden bağlanmasını sağlar. Bu, istemci durumunun yalnızca istemcinin bağlantı hattını ilk oluşturan sunucunun belleğinde tutulmasından önemlidir.

Aşağıdaki hata, bir web sunucu grubunda oturum bağlılığını etkinleştirmemiş bir uygulama tarafından oluşturulur.

Uncaught (in promise) Error: Invocation canceled due to the underlying connection being closed.

Azure Uygulama Hizmeti barındırma ile oturum yapışkanlığı hakkında daha fazla bilgi için bkz. ASP.NET Core sunucu taraflı Blazor uygulamaları barındırma ve dağıtma.

Azure SignalR Hizmeti

İsteğe bağlı Azure SignalR Hizmeti , bir sunucu tarafı uygulamasını SignalR çok sayıda eşzamanlı bağlantıya ölçeklendirmek için uygulamanın hub'ı ile birlikte çalışır. Buna ek olarak, hizmetin küresel erişim ve yüksek performanslı veri merkezleri coğrafya nedeniyle gecikme süresini azaltmaya önemli ölçüde yardımcı olur.

Hizmet, Azure Uygulaması Hizmetinde veya Azure Container Apps'te barındırılan uygulamalar için Blazor gerekli değildir, ancak diğer barındırma ortamlarında yararlı olabilir:

• Bağlantı ölçeğini genişletmeyi kolaylaştırmak için.
• Genel dağıtımı işleme.

Daha fazla bilgi için bkz . ASP.NET Core sunucu tarafı Blazor uygulamaları barındırma ve dağıtma.

Sunucu tarafı bağlantı hattı işleyici seçenekleri

Devreyi CircuitOptions ile yapılandırın. Başvuru kaynağındaki varsayılan değerleri görüntüleyin.

Not

.NET başvuru kaynağına yönelik belge bağlantıları genellikle deponun varsayılan dalını yükler ve bu dal .NET'in sonraki sürümü için geçerli geliştirmeyi temsil eder. Belirli bir sürümün etiketini seçmek için Dalları veya etiketleri değiştir açılan listesini kullanın. Daha fazla bilgi için bkz. ASP.NET Core kaynak kodunun sürüm etiketini seçme (dotnet/AspNetCore.Docs #26205).

Dosyadaki Program seçeneklerini, bir temsilci olarak AddInteractiveServerComponents ile okuyun veya ayarlayın. Yer {OPTION} tutucu seçeneği temsil eder ve {VALUE} yer tutucu ise değeri temsil eder.

Program dosyasında:

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

HubConnectionContext öğesini yapılandırmak için HubConnectionContextOptions ve AddHubOptions kullanın. Başvuru kaynağında hub bağlantısı bağlam seçeneklerinin varsayılanlarını görüntüleyin. Belgelerdeki SignalR seçenek açıklamaları için bkz . ASP.NET Çekirdek SignalR yapılandırması. Yer {OPTION} tutucu seçeneği temsil eder ve {VALUE} yer tutucu ise değeri temsil eder.

Not

.NET başvuru kaynağına yönelik belge bağlantıları genellikle deponun varsayılan dalını yükler ve bu dal .NET'in sonraki sürümü için geçerli geliştirmeyi temsil eder. Belirli bir sürümün etiketini seçmek için Dalları veya etiketleri değiştir açılan listesini kullanın. Daha fazla bilgi için bkz. ASP.NET Core kaynak kodunun sürüm etiketini seçme (dotnet/AspNetCore.Docs #26205).

Program dosyasında:

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

Uyarı

varsayılan değeri MaximumReceiveMessageSize 32 KB'tır. Değerin artırılması Hizmet Reddi (DoS) saldırıları riskini artırabilir.

Blazor, varsayılan değer olan 1'e ayarlı MaximumParallelInvocationsPerClient'e dayanır. Daha fazla bilgi için bkz MaximumParallelInvocationsPerClient > 1, Blazor Server modunda dosya yüklemeyi bozar (dotnet/aspnetcore #53951).

Bellek yönetimi hakkında bilgi için bkz. Dağıtılan ASP.NET Core sunucu tarafı Blazor uygulamalarında belleği yönetme.

Blazor hub seçenekleri

MapBlazorHub seçeneklerini, HttpConnectionDispatcherOptions hub'ının Blazor kontrolünü sağlamak için yapılandırın. Başvuru kaynağında hub bağlantı dağıtıcısı seçeneklerinin varsayılanlarını görüntüleyin. Yer {OPTION} tutucu seçeneği temsil eder ve {VALUE} yer tutucu ise değeri temsil eder.

Not

.NET başvuru kaynağına yönelik belge bağlantıları genellikle deponun varsayılan dalını yükler ve bu dal .NET'in sonraki sürümü için geçerli geliştirmeyi temsil eder. Belirli bir sürümün etiketini seçmek için Dalları veya etiketleri değiştir açılan listesini kullanın. Daha fazla bilgi için bkz. ASP.NET Core kaynak kodunun sürüm etiketini seçme (dotnet/AspNetCore.Docs #26205).

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

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

Hub'un AddInteractiveServerRenderMode ile MapBlazorHub tarafından yapılandırılması AmbiguousMatchException hatasıyla başarısız oluyor.

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

.NET 8/9'ı hedefleyen uygulamalarla ilgili sorunu geçici olarak çözmek için aşağıdaki yaklaşımı uygulayın.

Dosyanın en üstüne Program için usingbir Microsoft.AspNetCore.Http.Connections deyim ekleyin:

using Microsoft.AspNetCore.Http.Connections;

MapRazorComponents Burada çağrılırsa, aşağıdaki uç nokta kuralını öğesine zincirlemeRazorComponentsEndpointConventionBuilder:

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .Add(e =>
    {
        var metadata = e.Metadata;
        var dispatcherOptions = metadata.OfType<HttpConnectionDispatcherOptions>().FirstOrDefault();

        if (dispatcherOptions != null)
        {
            dispatcherOptions.CloseOnAuthenticationExpiration = true;
        }
    });

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 Rota Hatasına neden olur. Bu işlem net7 (dotnet/aspnetcore #52156) ile çalıştı
• [Blazor] Temel alınana SignalR erişim sağlama AddInteractiveServerRenderMode'da HttpConnectionDispatcherOptions (dotnet/aspnetcore #63520)

Maksimum alınan mesaj boyutu

Bu bölüm yalnızca uygulayan SignalRprojeler için geçerlidir.

Hub yöntemleri için izin verilen en büyük gelen SignalR ileti boyutu , (varsayılan: 32 KB) ile HubOptions.MaximumReceiveMessageSize sınırlıdır. SignalR MaximumReceiveMessageSize bayt'tan büyük iletiler hata verir. Çerçeve, hub'dan istemciye ileti SignalR boyutuna bir sınır getirmez.

Günlük kaydı Hata Ayıklama veya İzleme olarak ayarlı olmadığındaSignalR, ileti boyutu hatası yalnızca tarayıcının geliştirici araçları konsolunda görüntülenir:

Hata: Bağlantı 'Hata: Sunucu kapatma sırasında bir hata döndürdü: Bağlantı bir hatayla kapatıldı' hatasıyla kesildi.

SignalR Sunucu tarafı günlüğüHata Ayıklama veya İzleme olarak ayarlandığında, mesaj boyutu hatası için sunucu taraflı bir InvalidDataException görünür.

appsettings.Development.json:

{
  "DetailedErrors": true,
  "Logging": {
    "LogLevel": {
      ...
      "Microsoft.AspNetCore.SignalR": "Debug"
    }
  }
}

Hata:

System.IO.InvalidDataException: En fazla 32768B ileti boyutu aşıldı. İleti boyutu AddHubOptions'da yapılandırılabilir.

Bir yaklaşım, MaximumReceiveMessageSize dosyasında Program ayarlanarak sınırın artırılmasını 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ü Stream olarak işlemektir. Bu, büyük JavaScript (JS) etkileşim JSON yüklerini okurken veya etkileşim verileri ham bayt olarak mevcutsa JS kullanılabilir. Sunucu tarafı uygulamalarda bileşene benzer teknikler kullanarak büyük ikili yüklerin nasıl gönderileceğini gösteren bir örnek için, InputFile ve bakın.

Not

.NET başvuru kaynağına yönelik belge bağlantıları genellikle deponun varsayılan dalını yükler ve bu dal .NET'in sonraki sürümü için geçerli geliştirmeyi temsil eder. Belirli bir sürümün etiketini seçmek için Dalları veya etiketleri değiştir açılan listesini kullanın. Daha fazla bilgi için bkz. ASP.NET Core kaynak kodunun sürüm etiketini seçme (dotnet/AspNetCore.Docs #26205).

Büyük yükleri SignalR üzerinde işleyen formlar, doğrudan akışlı birlikte çalışmayı JS 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.

Büyük miktarda veri aktaran kod geliştirirken aşağıdaki yönergeleri göz önünde bulundurun:

• 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ı:
  • Büyük nesneleri JS ve C# kodunda 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 minimum yükleme hızını bildirin.
  • Veriler sunucu tarafından alındıktan sonra şu şekilde olabilir:
    • Tüm segmentler 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.

Blazor sunucu tarafı Hub uç noktası yol yapılandırması

Program dosyasında, MapBlazorHubBlazor öğesini uygulamanın varsayılan yoluna eşlemek için Hub öğesini çağırın. Blazor betiği, blazor.*.js tarafından oluşturulan uç noktayı otomatik olarak gösterir.

Kullanıcı arabiriminde sunucu tarafı bağlantı durumunu yansıtma

İstemci sunucuya kayıp bir bağlantı algılarsa, istemci yeniden bağlanmayı denerken kullanıcıya varsayılan bir kullanıcı arabirimi görüntülenir:

Yeniden bağlanma başarısız olursa, kullanıcıya sayfayı yeniden denemesi veya yeniden yüklemesi istenir:

Yeniden bağlantı başarılı olursa, kullanıcı durumu genellikle kaybolur. Bağlantı hataları arasında kullanıcı durumunu kaydetmek ve yeniden yüklemek için herhangi bir bileşene özel kod eklenebilir. Daha fazla bilgi için bkz . ASP.NET Core Blazor durum yönetimine genel bakış ve ASP.NET Core Blazor sunucu tarafı durum yönetimi.

Yeniden bağlantı durumunu izleyen kullanıcı arabirimi öğeleri oluşturmak için aşağıdaki tabloda açıklanmaktadır:

• Bir components-reconnect-*'si olan bir öğede Blazor tarafından ayarlanan veya ayarlanmayan id CSS sınıfları kümesi (components-reconnect-modal sütunu).
• Yeniden bağlanma durumu değişikliğini gösteren bir components-reconnect-state-changed olayı (Olay sütunu).

CSS sınıfı	Etkinlik	Gösterir...
components-reconnect-show	show	Bağlantı kesildi. İstemci yeniden bağlanmaya çalışır. Yeniden bağlanma kalıcısı gösterilir.
components-reconnect-hide	hide	Sunucuya etkin bir bağlantı yeniden kurulur. Yeniden bağlantı modeli kapalıdır.
components-reconnect-retrying	retrying	İstemci yeniden bağlanmaya çalışır.
components-reconnect-failed	failed	Yeniden bağlantı büyük olasılıkla bir ağ hatası nedeniyle başarısız oldu.
components-reconnect-rejected	rejected	Yeniden bağlantı reddedildi.

components-reconnect-state-changed'da yeniden bağlantı durumu failedolarak değiştiğinde, yeniden bağlanmayı denemek üzere JavaScript'te Blazor.reconnect() çağırılır.

Yeniden bağlanma durumu değişikliği rejectedolduğunda, sunucuya ulaşıldı ancak bağlantıyı reddetti ve kullanıcının sunucudaki durumu kaybolur. Uygulamayı yeniden yüklemek için JavaScript'te location.reload() fonksiyonunu çağırın. Bu bağlantı durumu aşağıdaki durumlarda oluşabilir:

• Sunucu tarafı bağlantı hattında bir kilitlenme oluşur.
• İstemci o kadar uzun süre bağlantısı kesiliyor ki sunucu kullanıcının durumunu kaybediyor. Kullanıcının bileşenlerinin örnekleri atılır.
• Sunucu yeniden başlatılır veya uygulamanın çalışan işlemi geri dönüştürülür.

Geliştirici, aşağıdaki örnekte görüldüğü gibi yeniden bağlanma durumu değişikliklerini izlemek ve bunlara tepki vermek için yeniden bağlanma kalıcı öğesine bir olay dinleyicisi ekler:

const reconnectModal = document.getElementById("components-reconnect-modal");
reconnectModal.addEventListener("components-reconnect-state-changed", 
  handleReconnectStateChanged);

function handleReconnectStateChanged(event) {
  if (event.detail.state === "show") {
    reconnectModal.showModal();
  } else if (event.detail.state === "hide") {
    reconnectModal.close();
  } else if (event.detail.state === "failed") {
    Blazor.reconnect();
  } else if (event.detail.state === "rejected") {
    location.reload();
  }
}

id components-reconnect-max-retries olan bir öğe, yeniden bağlanma denemesi sayısının üst sınırını görüntüler.

<span id="components-reconnect-max-retries"></span>

id değeri components-reconnect-current-attempt olan bir öğe, geçerli yeniden bağlanma girişimini görüntüler.

<span id="components-reconnect-current-attempt"></span>

id değeri components-seconds-to-next-attempt olan bir öğe, sonraki yeniden bağlanma girişimine kadar geçen saniyeleri görüntüler.

<span id="components-seconds-to-next-attempt"></span>

Proje şablonu, birlikte konumlandırılmış stil sayfası ve JavaScript dosyaları (Blazor Web App, ) içeren ve gerektiğinde özelleştirilebilen bir ReconnectModal bileşeni (Components/Layout/ReconnectModal.razor) içerir. Bu dosyalar ASP.NET Core başvuru kaynağında veya Blazor Web App proje şablonundan oluşturulan bir uygulama incelenerek incelenebilir. Proje Visual Studio'da Etkileşimli işleme moduylaServer veya Otomatik olarak ayarlandığında veya .NET CLI ile --interactivity server (varsayılan) veya --interactivity autoseçeneğiyle oluşturulduğunda bileşen projeye eklenir.

Not

.NET başvuru kaynağına yönelik belge bağlantıları genellikle deponun varsayılan dalını yükler ve bu dal .NET'in sonraki sürümü için geçerli geliştirmeyi temsil eder. Belirli bir sürümün etiketini seçmek için Dalları veya etiketleri değiştir açılan listesini kullanın. Daha fazla bilgi için bkz. ASP.NET Core kaynak kodunun sürüm etiketini seçme (dotnet/AspNetCore.Docs #26205).

Sunucu tarafı işleme

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 Blazor önceden oluşturulmuş durum kalıcılığı.

Sunucu tarafı devre etkinliğini izleme

Üzerindeki CreateInboundActivityHandler yöntemini kullanarak CircuitHandler gelen devre 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) kaydetmek için bir devre etkinlik işleyicisi kullanabilirsiniz.

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
• ASP.NET Core sunucu tarafı ve Blazor Web App ek güvenlik senaryoları

Blazor Başlangıç

Bir Blazor'ün SignalR dosyasında App.razor'nin Blazor Web App devresinin elle başlatılmasını yapılandırın.

• autostart="false" betiği için <script> etiketine bir blazor.*.js öznitelik ekleyin.
• Yükleme işlemi gerçekleştikten sonra Blazor.start() betiğinden sonra ve kapanış Blazor etiketinin içine çağıran bir betik yerleştirin.

Devre dışı bırakıldığında autostart , uygulamanın devreye bağımlı olmayan herhangi bir yönü normal şekilde çalışır. Örneğin, istemci tarafı yönlendirme aktif durumdadır. Ancak, devreye bağlı herhangi bir özellik, Blazor.start() çağrılana kadar çalışmaz. Uygulama davranışı, yerleşik bir bağlantı hattı olmadan öngörülemez. Örneğin, bağlantı hattı kesilirken bileşen yöntemleri yürütülememektedir.

Belge hazır olduğunda Blazor nasıl başlatılacağını ve JS Promise ile nasıl zincirleme yapılacağını içeren daha fazla bilgi için bkz. ASP.NET Core Blazor başlatma.

İstemcide zaman aşımlarını ve Etkin Tutma'yi yapılandırma SignalR

İ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 her beş saniyede bir ping atıyorsa, 5000 (5 saniye) daha düşük bir değer atandığında ping her beş saniyede bir atılır. 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ıApp.razor için Blazor Web App 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>

Aşağıdaki örnek, Pages/_Host.cshtml dosyası (Blazor Server, tüm sürümler ASP.NET Core hariç .NET 6'da) veya Pages/_Layout.cshtml dosyası (Blazor Server, .NET 6'da ASP.NET Core) içindir.

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 Blazor betik yolu ve dosya adıdır. 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, ServerTimeout için KeepAliveInterval (varsayılan: 30 saniye) ve HubConnectionBuilder (varsayılan: 15 saniye) ayarlayın. Yerleşik HandshakeTimeoutüzerinde HubConnection (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();
}

Sunucu zaman aşımı () veya Etkin Tutma aralığı (ServerTimeoutKeepAliveInterval) değerlerini değiştirirken:

• Sunucu zaman aşımı, Etkin Tutma aralığına atanan değerin en az iki katı olmalıdır.
• Etkin Tutma aralığı, sunucu zaman aşımına atanan değerin yarısından küçük veya buna eşit olmalıdır.

Daha fazla bilgi için aşağıdaki makalelerin Genel dağıtım ve bağlantı hataları bölümlerine bakın:

• ASP.NET Core sunucu tarafı Blazor uygulamaları barındırma ve dağıtma
• ASP.NET Core Blazor WebAssembly barındırma ve dağıtma

Sunucu tarafı yeniden bağlanma yeniden deneme sayısını ve aralığını ayarlama

Yeniden bağlanma yeniden deneme sayısını ve aralığını ayarlamak için, yeniden deneme sayısını (maxRetries) ve her yeniden deneme girişiminde izin verilen milisaniye cinsinden süreyi (retryIntervalMilliseconds) ayarlayın.

Blazor Web App:

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

Blazor Server:

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

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

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 Blazor çerçevesinin kullandığı varsayılan mantığı computeDefaultRetryInterval işlevinde (başvuru kaynağı) bulabilirsiniz.

Not

.NET başvuru kaynağına yönelik belge bağlantıları genellikle deponun varsayılan dalını yükler ve bu dal .NET'in sonraki sürümü için geçerli geliştirmeyi temsil eder. Belirli bir sürümün etiketini seçmek için Dalları veya etiketleri değiştir açılan listesini kullanın. Daha fazla bilgi için bkz. ASP.NET Core kaynak kodunun sürüm etiketini seçme (dotnet/AspNetCore.Docs #26205).

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, retryIntervalMilliseconds işlevi undefined döndürdüğü için yeniden denemeler durduruluyor.

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

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

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 bu kullanıcı arabirimine geçişi daha gecikmeli hale getirmek istiyorsunuz.
• Bir uygulama, bağlantının kesildiğini kullanıcılara daha erken 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 withServerTimeout değerini değiştirmek için aşağıdaki kılavuzda açıklanan diğer Keep-Alive, 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:

• Keep-Alive aralığı, istemci ve sunucu yapılandırmaları arasında eşleşmelidir.
• Zaman aşımları, Keep-Alive 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 sunucu ayarları ile eşleşmesi gereken bir Keep-Alive 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 SignalR zaman aşımlarını ve Etkin Tutma'yı yapılandırma 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. Keep-Alive aralığını düşürürken düşük performansa yol açmaktan kaçınmak 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 Server dosyası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 SignalR zaman aşımlarını ve Etkin Tutma'yı yapılandırma 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, sunucu zaman aşımını (WithServerTimeout varsayılan: 30 saniye) HubConnectionBuilder üzerinde ayarlayın. Yerleşik HandshakeTimeoutüzerinde HubConnection (varsayılan: 15 saniye) değerini ayarlayın. Zaman aşımlarının Keep-Alive aralığının en az iki katı olduğundan ve Keep-Alive değerinin sunucu ile istemci arasında eşleştiğinden emin olun.

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

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();
}

Sunucu tarafı yeniden bağlantı işleyicisini değiştirme

Yeniden bağlantı işleyicisinin bağlantı hattı bağlantı olayları, aşağıdaki gibi özel davranışlar için değiştirilebilir:

• Bağlantının bırakılıp bırakılmadiğini kullanıcıya bildirmek için.
• Bir bağlantı hattı bağlandığında günlüğe kaydetme (istemciden) gerçekleştirmek için.

Bağlantı olaylarını değiştirmek için aşağıdaki bağlantı değişiklikleri için geri çağırmaları kaydedin:

• Düşen bağlantılar için onConnectionDown kullanılır.
• Kurulan/yeniden kurulan bağlantılar onConnectionUp kullanır.

onConnectionDown Hem hem de onConnectionUp belirtilmelidir.

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:

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

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

Yeniden bağlanma ve yeniden yükleme davranışını program aracılığıyla denetleme

Blazor yeniden bağlanmayı otomatik olarak dener ve yeniden bağlanma başarısız olduğunda tarayıcıyı yeniler. Daha fazla bilgi için Sunucu tarafı yeniden bağlanma yeniden deneme sayısını ve aralığını ayarlama bölümüne bakın. Ancak, geliştirici kodu yeniden bağlantı davranışının tam denetimini almak için özel bir yeniden bağlantı işleyicisi uygulayabilir.

App.razor:

<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 Blazor betik yolu ve dosya adıdır. 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 devresinin bağlantısını SignalR istemcisinden kesin

Blazor'nin SignalR devresi, unload sayfa olayı tetiklendiğinde devreden çıkarılır. İ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.

Sunucu tarafı devre işleyicisi

Kullanıcının bağlantı hattının durumundaki değişikliklerde kod çalıştırmaya olanak tanıyan bir bağlantı hattı işleyicisi tanımlayabilirsiniz. Devre işleyicisi, CircuitHandler sınıfından türetilerek ve sınıfı uygulamanın hizmet kapsayıcısında kaydederek uygulanır. Aşağıdaki bağlantı hattı işleyicisi örneği açık SignalR bağlantıları izler.

TrackingCircuitHandler.cs:

using Microsoft.AspNetCore.Components.Server.Circuits;

public class TrackingCircuitHandler : CircuitHandler
{
    private HashSet<Circuit> circuits = new();

    public override Task OnConnectionUpAsync(Circuit circuit, 
        CancellationToken cancellationToken)
    {
        circuits.Add(circuit);

        return Task.CompletedTask;
    }

    public override Task OnConnectionDownAsync(Circuit circuit, 
        CancellationToken cancellationToken)
    {
        circuits.Remove(circuit);

        return Task.CompletedTask;
    }

    public int ConnectedCircuits => circuits.Count;
}

Bağlantı hattı işleyicileri DI kullanılarak kaydedilir. Kapsamlı örnekler, bir bağlantı hattının örneği başına oluşturulur. TrackingCircuitHandler Yukarıdaki örnekte kullanılarak, tüm devrelerin durumunun izlenmesi gerektiğinden tek bir hizmet oluşturulur.

Program dosyasında:

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

Özel devre işleyicisinin yöntemleri işlenmeyen bir özel durum oluşturursa, bu durum devre için ölümcül olur. İşleyicinin kodundaki veya çağrılan yöntemlerdeki istisnaları tolere etmek için, kodu hata işleme ve günlüğün kaydedilmesi ile try-catch deyimlerinden bir veya birkaçında sarmalayın.

Kullanıcının bağlantısı kesildiğinde ve çerçeve devre durumunu temizlediğinde, devre sona erer ve çerçeve, devrenin DI kapsamını imha eder. Kapsamın bertaraf edilmesi, devre kapsamına alınmış DI hizmetlerini uygulayan System.IDisposable'yi atacaktır. Herhangi bir DI hizmeti bertaraf sırasında işlenmeyen bir özel durum oluşturursa, altyapı özel durumu günlüğe kaydeder. Daha fazla bilgi için bkz . ASP.NET Core Blazor bağımlılık ekleme.

Özel hizmetler için kullanıcıları yakalamak için sunucu tarafı bağlantı hattı işleyicisi

CircuitHandler kullanarak AuthenticationStateProvider'den bir kullanıcı yakalayıp bu kullanıcıyı bir hizmette ayarlayın. Daha fazla bilgi ve örnek kod için bkz . ASP.NET Core sunucu tarafı ve Blazor Web App ek güvenlik senaryoları.

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 devre 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.

SignalR devresini farklı bir URL'de başlat

autostart="false" Blazor etiketine (<script> başlangıç betiğinin konumuBlazor) ekleyerek uygulamayı otomatik olarak başlatmayı önleyin. Blazor.startkullanarak bağlantı hattı URL'sini el ile oluşturun. Aşağıdaki örneklerde /signalryolu kullanılır.

Blazor Web Appsaniye:

- <script src="_framework/blazor.web.js"></script>
+ <script src="_framework/blazor.web.js" autostart="false"></script>
+ <script>
+   Blazor.start({
+     circuit: {
+       configureSignalR: builder => builder.withUrl("/signalr")
+     },
+   });
+ </script>

Blazor Server:

- <script src="_framework/blazor.server.js"></script>
+ <script src="_framework/blazor.server.js" autostart="false"></script>
+ <script>
+   Blazor.start({
+     configureSignalR: builder => builder.withUrl("/signalr")
+   });
+ </script>

Sunucu uygulamasının MapBlazorHub dosyasında ara yazılım işleme işlem hattına hub yolu ile aşağıdaki Program çağrısını ekleyin.

Blazor Web Appsaniye:

app.MapBlazorHub("/signalr");

Blazor Server:

Var olan çağrıyı dosyadaki MapBlazorHub bırakın ve şu yolla MapBlazorHub yeni bir çağrı ekleyin:

app.MapBlazorHub();
+ app.MapBlazorHub("/signalr");

Windows Kimlik Doğrulaması için Kimliğe Bürünme

Kimliği doğrulanmış hub bağlantıları (HubConnection), HTTP istekleri için varsayılan kimlik bilgilerinin kullanımını belirtmek üzere UseDefaultCredentials ile oluşturulur. Daha fazla bilgi için bkz. ASP.NET Core SignalR'da kimlik doğrulaması ve yetkilendirme.

Uygulama IIS Express'te, büyük olasılıkla kullanıcının kişisel veya iş hesabı olan Windows Kimlik Doğrulaması altında oturum açmış kullanıcı olarak çalışıyorsa, varsayılan kimlik bilgileri oturum açmış kullanıcının kimlik bilgileridir.

Uygulama IIS'de yayımlandığında, uygulama Uygulama Havuzu Identityaltında çalışır. HubConnection, sayfaya erişen kullanıcı olarak değil, uygulamayı barındıran IIS "kullanıcı" hesabı olarak bağlanır.

Göz atan kullanıcının kimliğini kullanmak için ile HubConnection uygulayın.

Aşağıdaki örnekte:

• Kimlik doğrulama durumu sağlayıcısındaki kullanıcı bir WindowsIdentitytürüne dönüştürülür.
• Kimliğin erişim belirteci, WindowsIdentity.RunImpersonatedAsync'i oluşturan ve başlatan kodla birlikte HubConnection'a geçirilir.

protected override async Task OnInitializedAsync()
{
    var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();

    if (authState?.User.Identity is not null)
    {
        var user = authState.User.Identity as WindowsIdentity;

        if (user is not null)
        {
            await WindowsIdentity.RunImpersonatedAsync(user.AccessToken, 
                async () =>
                {
                    hubConnection = new HubConnectionBuilder()
                        .WithUrl(NavManager.ToAbsoluteUri("/hub"), config =>
                        {
                            config.UseDefaultCredentials = true;
                        })
                        .WithAutomaticReconnect()
                        .Build();

                        hubConnection.On<string>("name", userName =>
                        {
                            name = userName;
                            InvokeAsync(StateHasChanged);
                        });

                        await hubConnection.StartAsync();
                });
        }
    }
}

Yukarıdaki kodda NavManager bir NavigationManager, ve AuthenticationStateProvider bir AuthenticationStateProvider hizmet örneğidir (AuthenticationStateProvider belgeleri).

Ek sunucu tarafı kaynakları

• Sunucu tarafı barındırma ve dağıtım kılavuzu: SignalR yapılandırma
• ASP.NET Core'a genel bakış SignalR
• ASP.NET Core SignalR yapılandırma
• Sunucu tarafı güvenlik belgeleri
  • ASP.NET Core Blazor kimlik doğrulaması ve yetkilendirme
  • ASP.NET Core Blazor kimlik doğrulaması ve yetkilendirme
  • ASP.NET Core Blazor etkileşimli sunucu tarafı işleme için tehdit azaltma kılavuzu
  • ASP.NET Core sunucu tarafı ve Blazor Web App ek güvenlik senaryoları
• ASP.NET Core Blazor uygulamalarında IHttpContextAccessor/HttpContext
• Sunucu tarafı yeniden bağlantı olayları ve bileşen yaşam döngüsü olayları
• Azure SignalR Hizmeti nedir?
• Azure SignalR Hizmeti için performans kılavuzu
• ASP.NET Core SignalR uygulamasını Azure Uygulaması Hizmeti'ne yayımlama
• Blazor örnekler GitHub deposu (dotnet/blazor-samples) (nasıl indirilir)