SignalR ile Açık Artırma Uygulaması

Web uygulamalarında gerçek zamanlı etkileşimi yeni ve daha kolay bir boyuta taşıyan SignalR teknolojisini deneme fırsatım oldu. Geliştirmekte olduğum projede açık artırma uygulamasını daha işlevsel yapma çalışmalarımız sonucunda SignalR uygulamasının da tecrübe kazandıracağı kanısıyla uygulamaya anlık teklif gönderme/alma yeteneği kazandırdık.

Öncelikle SignalR nedir?

SignalR, HTML5 API ile birlikte web hayatımıza giren WebSockets protokolünü kullanarak gerçek zamanlı iletişimi sağlayan bir kütüphanedir.

Bu noktada Microsoft tekelinden az da olsa uzaklaşabilmek için alternatif olarak SuperWebSocket‘ı gösterebilirim. Aynı işlemleri yapabilirsiniz, mamafih doküman bakımından SignalR tercih sebebidir. MSDN makaleleri de cabası.

NuGet paketleri arasında Microsoft.AspNet.SignalR ismiyle bulabilirsiniz. Yüklemeniz gerçekleştikten sonra yapmanız gerekenler ise;

1_ Root dizininde Startup.cs oluşturmak. Bu SignalR’ı çalışır hale getirecektir.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
using Owin;
using Microsoft.Owin;
[assembly: OwinStartup(typeof(Loyalty.CustomerApp.Startup))]
namespace Presentation.MVC
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // Her türlü ayarı buraya girebilirsiniz ama ben o detaya girmiyorum.
            app.MapSignalR();
        }
    }
}

2_ Kullanacağımız sayfa içerisinde SignalR scriptlerine referans vermek.

1
2
3
4
<!--Reference the SignalR library. -->
<script src="~/Scripts/jquery.signalR-2.0.3.min.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="~/signalr/hubs"></script>

3_ Hub sınıfını Hubs klasörü içerisinde oluşturmak.

1
2
3
4
5
6
7
8
9
using Microsoft.AspNet.SignalR;

namespace Presentation.MVC.Hubs
{
    public class BidHub : Hub
    {
        
    }
}

4_ İstediğimiz Controller içerisinde ki metodda tüm kullanıcılara gönderilecek şekilde çağrının yapılması.

1
2
var hubContext = GlobalHost.ConnectionManager.GetHubContext<BidHub>();
hubContext.Clients.All.updateBid(biddingRequest.ProductId, biddingRequest.AuctionId, biddingRequest.CustomerId, biddingRequest.CustomerName, biddingRequest.BiddingAmount);

5_ Son ve en güzel adım, sayfa üzerinde javascript metodunun hazırlanması. Artık hazır olan ortamımızda, bu metot sayesinde tüm kullanıcılara bilgileri istediğimiz şekilde gösterebiliriz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//jQuery alert!!! Bu noktada ölümcül seviyede jQuery kullanılmıştır. Olmazsa olmaz!
$(function () {
    // Proxy referansını alırız.  
    var salud = $.connection.bidHub;
    // Sunucu tarafından tetiklenecek fonksiyonu hazırlarız.
    salud.client.updateBid = function (biddingProductId, biddingAuctionId, biddingCustomerId, biddingCustomerName, biddingAmount) {

        //ilgili açık artırma güncellenir.
        
    };

    // SignalR bağlantısının pilot ateşidir.
    $.connection.hub.start();
});

Ben bu işlemlerin sonunda anında girilen teklifleri göstermekle kalmayıp, kullanıcıyla daha fazla iletişim halinde olabileceğimiz mesajlar da verdim. Böylece sayfanın yenilenmesine gerek kalmadan, tüm kullanıcılar için ilgi çekici bilgi ve mesajlar göstermiş olduk.

Proje hakkında detaya giremediğim için karşılaştığım sorunlardan tam olarak bahsedemiyorum. Uygulamalarınızda karşılaştığınız sorunları yorum olarak yazarsanız, yardımcı olmaya çalışırım.

Otomatik Mühendis