SignalR: Gerçek Zamanlı Web Uygulamaları İçin Güçlü Bir Çözüm
SignalR, gerçek zamanlı web uygulamalarının geliştirilmesini sağlayan Microsoft tarafından geliştirilen bir frameworktür. Geleneksel web uygulamalarında, istemci ve sunucu arasındaki iletişim genellikle istemci tarafından sunucuya yapılan talepler üzerinden gerçekleştirilir. Ancak, bu modelde veri güncellemeleri için sürekli talepler göndermek ve yanıtları beklemek gerekmektedir. SignalR, bu kısıtlamaları aşmak ve gerçek zamanlı iletişimi mümkün kılmak için tasarlanmıştır.
SignalR Nedir?
SignalR, sunucu ve istemci arasında gerçek zamanlı ve iki yönlü iletişim sağlayan bir çerçevedir. Bu iletişim, web tarayıcısıyla sunucu arasında sürekli bir bağlantı üzerinden gerçekleştirilir. SignalR, WebSocket protokolünü destekleyen modern tarayıcılarla WebSocket bağlantısı kurarak gerçek zamanlı veri paylaşımını sağlar. WebSocket desteklenmiyorsa, SignalR HTTP uzun süreli bağlantılarını (long polling) kullanarak da iletişim sağlar.
SignalR'ın Avantajları:
Gerçek Zamanlı İletişim: SignalR, sunucu tarafındaki değişiklikleri istemcilere anında iletebilme özelliği sayesinde gerçek zamanlı iletişim sağlar. Bu, canlı sohbet uygulamaları, işbirliği araçları, anlık bildirimler ve oyunlar gibi senaryolarda oldukça faydalıdır.
Kolay Kullanım: SignalR, ASP.NET gibi .NET tabanlı platformlarda kolayca kullanılabilir. Sadece birkaç satır kodla gerçek zamanlı iletişimi etkinleştirebilir ve uygulamanızı interaktif hale getirebilirsiniz.
Çoklu İstemci Desteği: SignalR, birden fazla istemciyle aynı anda iletişim kurabilme yeteneğine sahiptir. Bu, bir sunucunun çoklu kullanıcılara veya cihazlara aynı anda veri göndermesini sağlar.
Yeniden Bağlanma ve Hata İşleme: SignalR, bağlantı kopmaları veya hatalar durumunda otomatik olarak yeniden bağlanma mekanizmaları sağlar. Bu sayede, uygulamanın sürekli olarak çalışabilir ve kesintisiz bir deneyim sunabilir.
SignalR Nasıl Kullanılır?
SignalR'ı kullanmak için öncelikle projenize SignalR kütüphanesini eklemeniz gerekmektedir. Bu, NuGet paket yöneticisi veya .NET CLI aracılığıyla yapılabilir. SignalR kütüphanesini projenize ekledikten sonra, bir Hub sınıfı oluşturmanız gerekmektedir. Hub sınıfı, sunucu ve istemci arasındaki iletişimi yönetir ve istemcilerle etkileşimde bulunur. Hub sınıfına özel metotlar tanımlayarak istemci tarafından çağrılabilir işlemleri gerçekleştirebilirsiniz. SignalR istemci tarafında ise JavaScript veya diğer uyumlu dilleri kullanarak sunucuyla iletişim kurabilirsiniz.
Örnek:
Aşağıda, SignalR kullanarak basit bir sohbet uygulaması örneği verilmiştir:
Sunucu Tarafı (C#):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;
namespace ChatSample.Hubs
{
public class ChatHub : Hub
{
public async Task Send( string name, string message)
{
await Clients.All.SendAsync( "broadcastMessage" , name, message);
}
}
}
|
SignalR Yapılandırması:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | using SignalRChat.Hubs;
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
builder.Services.AddSignalR();
var app = builder.Build();
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler( "/Error" );
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapRazorPages();
app.MapHub<ChatHub>( "/chatHub" );
app.Run();
|
Client Tarafı (JavaScript):
İlk olarak projemize LibMan aracılığıyla signalr javascript kütüphanesini kuruyoruz.
Solution Explorer içerisindeki, projeye sağ tıklayıp, Add > Client-Side Library seçiyoruz.
Add Client-Side Library ekranında:
- Provider olarak unpkg seçiyoruz
- Library kutucuğuna @microsoft/signalr@latest yazıyoruz.
- Choose specific files'ı seçip, dist/browser klasöründeki, signalr.js ve signalr.min.js seçiyoruz.
- Target Location olarak wwwroot/js/signalr/ seçiyoruz.
- Install deyip kuruyoruz.
Pages/Index.cshtml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | @page
< div class = "container" >
< div class = "row p-1" >
< div class = "col-1" >User</ div >
< div class = "col-5" >< input type = "text" id = "userInput" /></ div >
</ div >
< div class = "row p-1" >
< div class = "col-1" >Message</ div >
< div class = "col-5" >< input type = "text" class = "w-100" id = "messageInput" /></ div >
</ div >
< div class = "row p-1" >
< div class = "col-6 text-end" >
< input type = "button" id = "sendButton" value = "Send Message" />
</ div >
</ div >
< div class = "row p-1" >
< div class = "col-6" >
< hr />
</ div >
</ div >
< div class = "row p-1" >
< div class = "col-6" >
< ul id = "messagesList" ></ ul >
</ div >
</ div >
</ div >
< script src = "~/js/signalr/dist/browser/signalr.js" ></ script >
< script type = "text/javascript" >
var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
//Disable the send button until connection is established.
document.getElementById("sendButton").disabled = true;
connection.on("ReceiveMessage", function (user, message) {
var li = document.createElement("li");
document.getElementById("messagesList").appendChild(li);
// We can assign user-supplied strings to an element's textContent because it
// is not interpreted as markup. If you're assigning in any other way, you
// should be aware of possible script injection concerns.
li.textContent = `${user} says ${message}`;
});
connection.start().then(function () {
document.getElementById("sendButton").disabled = false;
}).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();
});
</ script >
|
Çıktı:
SignalR, gerçek zamanlı web uygulamalarının geliştirilmesinde güçlü bir çözüm sunar. Geleneksel HTTP protokolünün sınırlamalarını aşarak sunucu ve istemci arasında sürekli bir bağlantı sağlar. Bu sayede, canlı sohbet uygulamaları, işbirliği araçları ve anlık bildirimler gibi senaryolarda etkileşimli ve canlı bir deneyim sunabilirsiniz. C# ile kullanıldığında, SignalR kolay kullanımı ve sağlam entegrasyonu ile geliştiricilere büyük bir kolaylık sağlar.
Sağlıcakla kalın..