SignalR ve Blazor Entegrasyonu Adım Adım Rehber

Gerçek zamanlı web uygulamaları günümüzde etkileşimli ve dinamik kullanıcı deneyimleri sunmak için büyük önem kazanmıştır. SignalR ve Blazor entegrasyonu sayesinde, tarayıcı üzerinde interaktif web uygulamaları geliştirerek, anlık veri iletimi ve güncellemeleri hızlıca gerçekleştirebilirsiniz. Bu makalede SignalR teknolojisinin Blazor ile nasıl entegre edileceğini adım adım açıklayacağız.

SignalR ve Blazor Nedir?

SignalR, ASP.NET altyapısıyla gelen ve istemciler ile sunucu arasında çift yönlü, gerçek zamanlı iletişimi kolayca sağlamanızı mümkün kılan bir kütüphanedir. Blazor ise .NET ile modern web uygulamaları yazmak için kullanılan, hem WebAssembly tabanlı (Blazor WebAssembly) hem de sunucu tabanlı (Blazor Server) çalışan bir framework'tür. SignalR ve Blazor entegrasyonu ile chat uygulamaları, canlı bildirimler veya oyunlar gibi gerçek zamanlı servisleri basit şekilde projelerinize dahil edebilirsiniz.

SignalR ve Blazor Entegrasyonu Nasıl Yapılır?

1. Sunucu Tarafında SignalR Hub'ı Oluşturma

Öncelikle bir SignalR Hub sınıfı tanımlamanız gerekir. Aşağıda örnek bir SignalR Hub kodu görebilirsiniz:

using Microsoft.AspNetCore.SignalR;
public class ChatHub : Hub
{
    public async Task SendMessage(string user, string message)
    {
        await Clients.All.SendAsync("ReceiveMessage", user, message);
    }
}

2. Sunucu StartUp Ayarlarını Yapma

Startup.cs dosyanızda SignalR servislerinin eklenmesi ve endpoint'in tanımlanması gerekir:

public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddServerSideBlazor();
    services.AddSignalR();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // ... diğer ayarlar
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapBlazorHub();
        endpoints.MapHub<ChatHub>("/chathub");
        endpoints.MapFallbackToPage("/_Host");
    });
}

3. Blazor Bileşeninde SignalR Bağlantısı Kurmak

Blazor bileşeni üzerinde SignalR ile iletişim kurmak için aşağıdaki gibi bir bağlantı başlatabilirsiniz:

@page "/chat"
@using Microsoft.AspNetCore.SignalR.Client

<input @bind="user" placeholder="Kullanıcı Adı" maxlength="20" />
<input @bind="message" placeholder="Mesajınız" maxlength="100" />
<button @onclick="SendMessageAsync">Gönder</button>

<ul>
    @foreach (var msg in messages)
    {
        <li>@msg</li>
    }
</ul>

@code {
    HubConnection hubConnection;
    string user;
    string message;
    List<string> messages = new List<string>();

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

        hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
        {
            messages.Add($"{user}: {message}");
            StateHasChanged();
        });

        await hubConnection.StartAsync();
    }

    async Task SendMessageAsync()
    {
        if (!string.IsNullOrEmpty(user) && !string.IsNullOrEmpty(message))
        {
            await hubConnection.SendAsync("SendMessage", user, message);
            message = string.Empty;
        }
    }
}

SignalR ve Blazor Entegrasyonu ile Neler Yapılabilir?

Bu entegrasyon ile hem sunucu hem de istemci tarafında gerçek zamanlı veriler yönlendirebilir, chat, anlık bildirim, canlı skorlar ve daha pek çok işlevsel uygulama geliştirilebilirsiniz. SignalR ve Blazor entegrasyonu, .NET dünyasında modern, hızlı ve ölçeklenebilir web uygulamaları için güçlü bir kombinasyon sunar.

Sonuç

SignalR ve Blazor entegrasyonu sayesinde, .NET ekosisteminin sunduğu tüm avantajları kullanarak performansı yüksek, kullanıcı ile etkileşimli ve ölçeklenebilir uygulamaları güvenle geliştirebilirsiniz. Bu rehber, projelerinize gerçek zamanlı özellikler eklemenize yardımcı olacak adımları kapsamaktadır. Daha fazlası için dökümantasyonları incelemeyi unutmayın!