Ana Sayfa
C#
tr

İlk SignalR Chat Uygulaması Nasıl Yapılır?

İlk SignalR Chat Uygulaması Nasıl Yapılır?

İlk SignalR Chat Uygulaması Nasıl Yapılır?

SignalR, gerçek zamanlı web uygulamaları geliştirmede öne çıkan, Microsoft tarafından geliştirilen güçlü bir kütüphanedir. Özellikle "İlk SignalR Chat Uygulaması Nasıl Yapılır?" sorusuna cevap arayan yazılımcılar için SignalR, canlı chat uygulamaları gibi scenario’larda yüksek performans sağlar. Bu yazıda, temel seviyede bir chat uygulaması oluşturmak için SignalR kullanımı adım adım ve örnek kodlarla anlatılacaktır.

SignalR Nedir ve Neden Kullanılır?

SignalR; sunucu ile istemci arasında gerçek zamanlı çift yönlü veri iletişimini kolaylaştırmak için geliştirilmiştir. Standart HTTP taleplerinde olduğu gibi sadece istemci sunucuya istek göndermez; sunucu da anlık olarak istemciye mesaj gönderebilir. "İlk SignalR Chat Uygulaması Nasıl Yapılır?" başlığı ile yola çıktığımızda, bu teknolojinin gerçek zamanlı mesajlaşma için neden tercih edildiği açıkça görülmektedir: WebSocket, Server-Sent Events ve Long Polling gibi altyapıları otomatik olarak kullanabilir.

Adım Adım İlk SignalR Chat Uygulaması

1. Proje Kurulumu

İlk olarak bir ASP.NET Core boş projesi açın ve NuGet üzerinden Microsoft.AspNetCore.SignalR paketini ekleyin. Ardından bir ChatHub sınıfı tanımlayalım: 


using Microsoft.AspNetCore.SignalR;

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

2. SignalR Bağlantısının Tanımlanması

Startup.cs dosyasında veya Program.cs’de SignalR servisini ekleyip rotamızı belirtelim: 


builder.Services.AddSignalR();
app.MapHub<ChatHub>("/chatHub");

3. Basit HTML ve JavaScript ile Chat İstemcisi

Aşağıda, SignalR ile entegre olan çok basit bir HTML-frontend örneği bulunmaktadır. signalr.js kütüphanesini projenize eklemeyi unutmayın. 


<!DOCTYPE html>
<html>
<head>
  <title>SignalR Chat Uygulaması</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/7.0.5/signalr.min.js"></script>
</head>
<body>
  <input type="text" id="userInput" placeholder="İsim" />
  <input type="text" id="messageInput" placeholder="Mesajınız" />
  <button onclick="sendMessage()">Gönder</button>
  <ul id="messagesList"></ul>
  <script>
    const connection = new signalR.HubConnectionBuilder()
      .withUrl("/chatHub")
      .build();

    connection.on("ReceiveMessage", (user, message) => {
      const li = document.createElement("li");
      li.textContent = `${user}: ${message}`;
      document.getElementById("messagesList").appendChild(li);
    });

    connection.start();

    function sendMessage() {
      const user = document.getElementById("userInput").value;
      const message = document.getElementById("messageInput").value;
      connection.invoke("SendMessage", user, message);
    }
  </script>
</body>
</html>

Sonuç ve Öneriler

"İlk SignalR Chat Uygulaması Nasıl Yapılır?" sorusuna verdiğimiz bu örnek, gerçek zamanlı web uygulamalarında SignalR’ın nasıl kullanılacağının en basit halini göstermektedir. Bu temel uygulama, daha gelişmiş chat uygulamaları veya canlı bildirim sistemleri için başlangıç noktası olabilir. Güvenlik, kimlik doğrulama ve bağlantı yönetimi gereksinimleri için SignalR dökümantasyonunu incelemeniz önerilir.

Yorum Gönder