Mvc ve SignalR İle Hatırlatıcı Notlar Bölüm2

Selamlar;

Bugünkü makalede ilk bölümde anlattığımız projemize SignalR socket teknolojisini ekleyerek neler yapabileceğimize hep beraber inceleyeceğiz. Daha sonra da Azure’a publish edip herkesin kullanımına açacağız. Öncelikle signaR için aşağıdaki paketler NuGet’den indirilir.

Untitled

İlk olarak sayfaya yeni bir note iliştirdiğimizde ilgili note’un o an sayfada olan tüm cilentlar için gözükmesini sağlayalım. Öncelikle bu işlemin yapılabilmesi için, ekleyen kişinin  bu işlemden çıkarılması gerekir. Çünkü ilgili kişide note zaten gözükmektedir. Bunun için note’u ekleyen client’ın “connectionID”‘sinin alınıp “exclude” edilmesi gerekmektedir.

1-) Reciver adında bir signalR sınıfı yaratılır. “OnConnected()” methodunda ilgili client’ın “ConnectionID”‘si alınıp geri döndürülür. Aşağıdaki kodda “Caller“, online olan tek bir client’ı temsil etmektedir. “GetConnectionID()” client-side tarafta çalışan client’ın connectionID’sini alan bir functiondır.

HomeController.cs/(Reciver): “Context.ConnectionID” o an connect olan client’ın ConnectionID’sini bize verir.

2-)Client side tarafta Index.cshtml sayfasına ilgili javascript kütüpahaneleri aşağıdaki sırada eklenir. Dikkat edilir ise “jquery” kütüpahanesi, “signalR”‘dan önce sayfaya konulmuştur. Burdan da anlaşılacağı gibi signalR, Jquery kütüphanesini kullanmaktadır.

3-)Aşağıda görüldüğü gibi öncelikle signalR “reciver” hub class’ına connect olunmuş ve “GetConnectionID()” function’ı ile ilgili connectionID alınmıştır.

Index.cshtml/GetConnectionID:

Şimdi sıra geldi yeni bir note eklendiğinde tetiklenen “AddNote()” function’ını ve post ettiği “/Home/PostMessage” action’ını değiştirmeye.

AddNote() function’ına aşağıda görüldüğü gibi bize ait olan”ConnectionID” parametresi de eklenerek “PostMessage()” methodun’a gönderilir. ConnectionID’nin de gönderilmesinde amaç notu ekleyen yani biz hariç diğer clientlarda ilgili note’un gösterilmesidir.

what_is_signalr_invocation

4-)Şimdi sıra geldi “PostMessage()” methodunda yapılması gereken değişikliğe. Aşağıda görüldüğü gibi ilgili “Reciver” signalR Hub classına asenkron olarak connect olunup “AddNote()” methodu “imgName” ve “ConnectionID” parametreleri ile birlikte trigger edilir.

HomeCotroller.cs/PostMessage(): Son hali aşağıdaki gibidir.

5-)Şimdi sıra geldi ilgili signalR “Reciver” hub classında “AddNote()” methodunu oluşturmaya: Aşağıda görüldüğü gibi notu ekleyen client hariç diğer tüm clientlardaki, “AddNote()”  function’ı, yeni oluşturulan image ismi ile birlikte tetiklenmektedir. “AllExcept()” methodunda note’u ekleyen client’ın ConnectionID ‘si verilerek kendisinin bu işlemden hariç tutulması, böylece kendisine aynı note’un 2. kere gösterilmesi engellenmiştir.

6-)Şimdi sıra geldi tetiklenen client side taraftaki “AddNote()” functionını kodlamaya. Aşağıda görüldüğü gibi gelen image, ismine göre “draggable” divinin içine eklenir. Önemli bir konu da hareket ettirilebilmesi için style’ına “position:absolute” verilmesidir.

init(): Function’ı önceki makalede de anlatıldığı gibi resimlerin sürüklenmesinden sonra kordinatlarının isminin sonuna eklenerek değiştirilmesini sağlar. Ayrıca resme çift tıklanması durumunda “DeleteImage()” methoduna post işlemi yaparak silinmesini sağlar.

ReminderAddDel2

Şimdi sıra geldi silme işleminde bunu tüm clientlara duyurmaya. Aşağıdaki kod önceki makalede bahsettiğimiz “DeleteImage()” methodunun sonuna eklenir. “HubConnection” ile signalR sınıfının bulunduğu http yolu tanımlanır. Burdan da anlaşılacağı gibi signalR sınıfına bir servis gibi dışarıdan erişilmektedir. Bunun için “Microsoft.AspNet.SignalR.Client” kütüpahanesi kullanılır. “IHubProxy” ile signalR sınıfı olan “Reciver“‘a erişilir. Son olarak connect olunduktan sonra “Invoke” ile “DeleteImage()” methodu tetiklenir. Connect işlemi asenkron olduğu için “DeleteMethod()“‘u da asenkron hale getirilmiştir.

HomeController.cs/DeleteImage(): Aşağıda sil methodunun tam hali gözükmektedir.

Yeni bir note yaratma ve silme işlemlerinin, tüm clientlarda da gerçekleşmesi için signalR web socket teknolojisini var olan kodlara hepberaber ekledik.. Şimdi sıra geldi bir note’u hareket ettirdiğimizde, bunun tüm clientlarda gerçekleşmesini sağalamaya.

Önceki makaleden hatırlayacağımız gibi herhangi bir note’u hareket ettirdiğimizde: “Coordinate()” function’ı call edilmekte ve “ChangeImageName()” methoduna post işlemi yapılmaktadır.

ChangeImageName(): Aşağıda görüldüğü gibi Note’un ismi değiştirildikten sonra “Reciver” signalR sınıfına bağlanılıp “MovePaper()” methodu tetiklenmiştir. Parametre olarak, note’un sürüklenmedene sonraki yeni adı ve eski adı “æ” ayracı ile birleştirilerek, kordinatları “x” ayracı ile birleştirilerek ve son olarak ConnectionID’si gönderilmiştir.

Reciver/MovePaper(): Aşağıda görüldüğü gibi işlemi yapan client haricinde(AllExcep()) methodu ile diğer tüm clientlardaki “MovePaper()” function’ı ilgili parametreler ile tetiklenir.

Index.cshtml/MovePaper(): Aşağıda görüldüğü gibi “top ve left” kordinatları “split” ile ayrıldıktan sonra aynı işlem eski ve yeni kordinatlar için yapılmıştır. Daha sonra hareket ettirilecek image eski “src” değerine göre jquery ile bulunmuştur. Son olarak yeni “src” değeri atanıp “animate()” function’ı ile yeni kordinat değerlerine animatif olarak hareket ettirilmiştir.

azure Son olarak uygulama Azure üzerinde: http://stickypaper.azurewebsites.net/ adresine publish edilmiştir. Bu makalede yazdığımız bir yazıyı seçtiğimiz renkteki bir note’a iliştirip resme çevirdik. Daha sonra signalR web socket teknolojisi kullanılarak ilgili resim tüm clientlarda real time olarak oluşturuldu. Hatırlatıcı note hareket ettirildiğinde, yeni kordinatları ile ilgili resmin yolu değişirildi. Daha sonra signalR ile işlemi yapan client haricindeki tüm clientlarda da aynı function yeni kordinatlar ile tetiklenir ve note animatif olarak hareket ettirildi. Son olarak çift tıklanan resim, serverdan ve tüm client ekranlarından signalR web socket teknolojisi kullanılarak kaldırıldı ve sunucudan silindi.

Geldik bir makalenin daha sonuna. Yeni bir makalede görüşmek üzere hoşçakalın.

Source Code: http://www.borakasmer.com/projects/Reminder.rar

Index.cshtml(Full):

HomeController.cs(Full):

 

 

 

 

 

Herkes Görsün:

Sevebilirsin...

3 Yanıt

  1. Cemil dedi ki:

    Visual Studio 2013 altında kodları aynen aldım. Ama “The type or namespace name ‘Hub’ could not be found (are you missing a using directive or an assembly reference?)” hatası veriyor.
    Dosyalarını paylaşma durumunuz var mı?

    • borsoft dedi ki:

      Tabiki…Nuget’den signalR paketlerini indirdin mi?
      Bir de sayfanın yukarısına alttaki kütüphaneleri eklemen gerekiyor…

      using Microsoft.AspNet.SignalR;
      using Microsoft.AspNet.SignalR.Client;
      using Microsoft.AspNet.SignalR.Client.Transports;

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir