.Net’te SignalR Kullanımı

SignalR Real Time uygulamalar geliştirmek için çözüm sunan bir framework’tür. Bize sunduğu kolaylık sayesinde anlık olarak istekler göndermemize yardımcı olmaktadır.

SignalR çalışma mantığı aşağıdaki gibidir. Bir event tetiklenir. Tetiklenen event oluşturduğumuz Hub sınıfını tetikler. Hub sınıfıda isteği client(lar)’a gönderilmesini sağlar.

İlk olarak Visual Studio’da bir ASP.NET MVC projesi oluşturuyoruz. Ve daha sonradan Nuget Package Manager’dan Microsoft.AspNet.SignalR projemize ekliyoruz.

Paketle beraber aşağıdaki paketlerde yükleniyor.

Aynı şekilde Microsoft.AspNet.SignalR.Client kurulumunu yapıyoruz.

Kurulumları yaptıkdan sonra projemizin dizinine Hubs adında bir klasör ekliyoruz. Ve bu klasöre aşağıdaki gibi bir Hub ekliyoruz.

Oluşturduğumuz Hub sınıfının içi aşağıdaki gibi olacaktır.

    public class HubIsmiHub : Hub
    {
        public void Hello(string message)
        {
            Clients.All.hello(message);
        }
    }

Burada Hello methodu Hub tarafından tetiklenen method’dur. Client.All.hello  ise client tarafında tetiklenmesini istediğimiz methoddur.

Şimdi ise Controller sınıfımıza aşağıdaki methodu ekliyoruz.

        [HttpPost]
        public ActionResult SendMessage(string message)
        {
            var hubConnection = new HubConnection("http://localhost:49813/signalr", useDefaultUrl: false);
            IHubProxy hubProxy = hubConnection.CreateHubProxy("HubIsmiHub");
            hubConnection.Start().Wait();


            hubProxy.Invoke("Hello", message).Wait();

            return Json(true);
        }

Hub connection’ımızı oluşturuyoruz. Ve projemizin çalıştığı port ile birlikte yukarudaki gibi “http://localhost:49813/signalr” ekliyoruz.

Daha sonra tetikleceğimiz hub’ı oluşturuyoruz. Burada projemizde tetiklemek istediğimiz Hub ismini kullanıyoruz. Ve Hub’da ki fonksiyonu parametreleri ile birlikte Invoke ederek tetiklenmesini sağlıyoruz.

Şimdi sıra cshtml ve script kodlarımızı oluşturmaya geldi.

<script src="~/Scripts/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.signalR-2.4.0.min.js" type="text/javascript"></script>
<script src="~/signalr/Hubs"></script>
<input id="messageText" type="text" placeholder="Mesaj" />
<input id="sendMessage" type="button" value="Gönder" />
<ul id="messageList">

</ul>

<script type="text/javascript">
    var person = prompt("Please enter your name", "Personal Info");


    $('#sendMessage').click(function () {
        var message = person + "->" + $('#messageText').val();
        $.post('/Home/SendMessage', { 'message': message },
    });


    var con = $.connection.hubIsmiHub;
    con.client.hello = function (data) {
        $('#messageList').append('<li>' + data + '</li>');

    }

    $.connection.hub.start();
</script>

Yukarıdaki gibi projemize jquery, signalr js dosyalarını ekliyoruz. “~/signalr/Hubs” şeklinde eklediğimiz script dosyası ise proje çalıştıkdan sonra oluşacaktır. Ve signalR’ı kullanabilmemiz için bunu eklememiz gerekiyor.

$.connection.hubIsmiHub methodu ile client tarafında bağlanmak istediğimiz hub ismini yazıyoruz.

con.client.hello methodu ise Hub tarafından client tarafında tetiklediği methodddur.

Proje’de prompt methodu ile girişte bir isim alınmasını sağladım. Daha sonra buttona tıklandığında Controller’da ki Post methoduna text’deki değerin post edilmesini sağladım. Controller’da Hub’u başlatarak diğer client’lara gönderilecek methodu belirledim.

Son olarak Projemizi çalıştırmadan önce projemize bir Startup.cs dosyası ekliyoruz. Ve signalR’ın için aşağıdaki gibi signalR’ı başlangıç konfigürasyonlarına ekliyoruz.

using System;
using System.Threading.Tasks;
using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(SignalRDeneme.Startup))]

namespace SignalRDeneme
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}