.Net Core 8 ile SignalR Kullanımı

.NET Core 8 ile real time web uygulamaları geliştirmek, SignalR sayesinde oldukça kolaydır. SignalR, client ve server arasında düşük gecikmeli, iki yönlü iletişimi mümkün kılarak, özellikle chat uygulamaları gibi gerçek zamanlı veriye ihtiyaç duyan projelerde kullanılır. Bu makalede, .NET Core 8 ile SignalR kullanarak basit bir chat uygulaması geliştireceğiz.

SignalR Nedir?

SignalR, ASP.NET Core çatısı altında bulunan bir kütüphanedir. İstemciler ile sunucu arasında çift yönlü, asenkron bir iletişim sağlar ve uygulamanızda gerçek zamanlı özellikler eklemenizi kolaylaştırır. Buna farklı bir örnek daha vermek gerekirse; bildirimler. Bildirimler bulunduğunuz web sitesinde sayfa yenilenmeden ekranınıza düşebilir.

Yeni proje oluşturarak örneğimize başlayalım.

Projemize SignalR ı eklemek için Solution Explorer dan projeye sağ tıklayın > Add > Add Client-Side Library. Provider, Library ve diğer bilgileri aşağıdaki gibi düzenleyip Install edin.

Şimdi mesajlaşmayı yönetecek olan hub ımızı oluşturabiliriz.

using Microsoft.AspNetCore.SignalR;

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

Hub ımızı oluşturduktan sonra Program.cs de SignalR ı inject edelim ve routingini verelim.

Home/Index.cshtml içeriğini aşağıdaki gibi düzenleyelim. Bu tasarımı kullanarak mesaj gönderecek ve gönderilen mesajları sayfada göreceğiz.

<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 src="~/js/chat.js"></script>

Son olarak chat.js i hazırlayalım.

"use strict";

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

document.getElementById("sendButton").disabled = true;

connection.on("ReceiveMessage", function (user, message) {
    var li = document.createElement("li");
    document.getElementById("messagesList").appendChild(li);
    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();
});

Bu script, bir SignalR bağlantısı kurarak kullanıcıların real time mesaj gönderip almasını sağlar. Gönderilen her mesaj, sunucuya iletilir ve sunucudan gelen mesajlar diğer tüm istemcilere iletilir. Bu sayede kullanıcılar, diğer kullanıcıların mesajlarını anında görebilir.

Test:

Bu makalede, SignalR ile basit bir chat uygulaması geliştirdik. SignalR’ın sağladığı kolay entegrasyon ve güçlü özellikler sayesinde, gerçek zamanlı iletişim gerektiren projelerde oldukça etkili çözümler üretebilirsiniz. Gerçek zamanlı web uygulamaları geliştirmek için SignalR gibi güçlü araçların yanı sıra, WebSocket protokolü ve gRPC gibi diğer teknolojilere de göz atabilirsiniz. Bu sayede farklı senaryolar için en uygun çözümü bulabilirsiniz.

Yeni bir yazıda görüşmek dileğiyle.
Kalın sağlıcakla.