Web uygulamaları günümüzde sadece sabırlı beklemeleri gerektiren, sayfayı yenileyerek veri görebildiğiniz platformlar olmaktan çıktı. Kullanıcıların gerçek zamanlı verilerle etkileşime girebildiği, anlık bildirimlerin ve verilerin hızlı bir şekilde iletildiği uygulamalar giderek daha fazla tercih ediliyor. SignalR, .NET Core MVC projelerinde anlık iletişim ve veri akışını sağlamak için mükemmel bir araçtır.
SignalR Nedir?
SignalR, ASP.NET Core ile entegre bir kütüphanedir ve özellikle gerçek zamanlı web uygulamaları oluşturmak için tasarlanmıştır. SignalR, istemci ve sunucu arasında iki yönlü iletişim kurarak, sunucudan istemcilere anlık mesajlar gönderebilmenizi sağlar. Bu, canlı sohbet, gerçek zamanlı bildirimler, çok oyunculu oyunlar veya anlık veri akışı gibi durumlar için idealdir.
SignalR, bağlantılar kurulduğunda otomatik olarak yönetim sağlar ve web socket teknolojisini kullanarak istemci ve sunucu arasında sürekli bir iletişim hattı oluşturur.
.NET Core MVC’de SignalR ile Anlık Veri Akışı Nasıl Oluşturulur?
SignalR kullanarak gerçek zamanlı uygulamalar oluşturmanın adımlarını inceleyelim. Bu süreç, SignalR Hub, SignalR Client, ve Backend Integration aşamalarından oluşur.
1. SignalR Paketini Projeye Dahil Etme
İlk olarak SignalR paketini projenize dahil etmeniz gerekiyor. Bunun için NuGet Package Manager kullanarak Microsoft.AspNetCore.SignalR paketini yükleyebilirsiniz:
- Visual Studio üzerinden: Tools > NuGet Package Manager > Manage NuGet Packages for Solution
- Veya Package Manager Console üzerinden:
Install-Package Microsoft.AspNetCore.SignalR |
2. SignalR Hub’ını Tanımlamak
SignalR ile veri iletmek için önce bir Hub sınıfı oluşturmanız gerekmektedir. Hub, istemciler ve sunucu arasındaki iletişimi yöneten sınıftır. Örneğin, bir chat uygulaması için basit bir hub sınıfı şöyle olabilir:
using Microsoft.AspNetCore.SignalR; public class ChatHub : Hub { public async Task SendMessage(string user, string message) { await Clients.All.SendAsync("ReceiveMessage", user, message); } } |
Burada, SendMessage metodu istemciden gelen veriyi alıp tüm bağlı istemcilere iletecek. Clients.All.SendAsync ise bu mesajı tüm istemcilere göndermek için kullanılır.
3. SignalR’ı Startup.cs’e Konfigüre Etme
SignalR’ın doğru çalışabilmesi için, Startup.cs dosyasına birkaç konfigürasyon eklememiz gerekiyor. Bu adımda, SignalR hub’ını MVC yapılandırmanıza dahil edeceğiz:
public void ConfigureServices(IServiceCollection services) { services.AddSignalR(); // SignalR'ı servislerimize ekliyoruz } public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { // SignalR'ı yapılandırıyoruz app.UseEndpoints(endpoints => { endpoints.MapHub<ChatHub>("/chatHub"); }); } |
Bu aşamada, SignalR hub’ını belirli bir URL ile eşleştiriyoruz. Örneğin, /chatHub yolunu kullanarak istemcilerle bağlantı kuracağız.
4. SignalR Client Tarafı
Şimdi, istemci tarafında SignalR ile sunucudan veri alıp gönderecek bir JavaScript kodu yazmamız gerekiyor. Bu işlem, SignalR'ın istemciye anlık veri gönderebilmesini sağlar.
Öncelikle, _Layout.cshtml dosyasına SignalR client kütüphanesini ekleyelim:
<script src="https://cdn.jsdelivr.net/npm/@microsoft/signalr@3.1.14/dist/browser/signalr.js">script> |
Ardından, istemci tarafında şu kodu yazabiliriz:
var connection = new signalR.HubConnectionBuilder() .withUrl("/chatHub") .build(); connection.on("ReceiveMessage", function (user, message) { var msg = user + " says " + message; document.getElementById("messagesList").innerHTML += "" + msg + ""; }); connection.start().catch(function (err) { return console.error(err.toString()); }); document.getElementById("sendButton").addEventListener("click", function (event) { var user = document.getElementById("userInput").value; var message = document.getElementById("messageInput").value; connection.invoke("SendMessage", user, message).catch(function (err) { return console.error(err.toString()); }); event.preventDefault(); }); |
Burada, connection.on("ReceiveMessage", ...) fonksiyonu, sunucudan gelen mesajları alır ve HTML sayfasına ekler. Kullanıcıdan gelen veriyi ise connection.invoke("SendMessage", ...) ile sunucuya gönderiyoruz.
5. Test Etme
Artık uygulamanızı çalıştırarak anlık veri akışını test edebilirsiniz. İki farklı tarayıcı veya sekme açarak farklı kullanıcılar gibi davranabilir ve aynı anda mesaj gönderdiğinizde, diğer kullanıcıların mesajları anında görebildiğinden emin olabilirsiniz.
SignalR’ın Avantajları
1. Gerçek Zamanlı İletişim: Kullanıcıların web sayfasını yenilemeden, anlık olarak bilgi almasını sağlar.
2. Düşük Gecikme Süresi: WebSockets teknolojisiyle hızlı veri aktarımı sunar.
3. Etkili Kaynak Kullanımı: Sunucu ile istemciler arasında sürekli bağlantı kurarak gereksiz isteklerin önüne geçer.
SignalR, .NET Core MVC projelerinde, özellikle anlık veri akışı gerektiren uygulamalarda büyük kolaylık sağlar. Gerçek zamanlı bildirimler, sohbet uygulamaları, oyunlar veya canlı veri güncellemeleri gibi uygulamalarda SignalR kullanarak, kullanıcılarınızın deneyimini daha interaktif ve dinamik hale getirebilirsiniz. Bu yazıda öğrendiğiniz adımlarla, .NET Core MVC projelerinize anlık veri iletme yeteneği ekleyebilirsiniz.
