Asp.Net Core’da Memory Cache ve AngularJs Kullanma

Selamlar,

Bugün bir önceki makalede işlenen, Osx işletim sisteminde webapi den çekilen datanın, Mvc bir ara yüzde gösterilmesi konusuna derinlemesine devam edeceğiz. Bu makalede ilgili datanın değişmesi durumunda, bunun client’lara nasıl yansıtılacağını  hep beraber inceleyeceğiz. Performans amaçlı Memory Cache kullanıp, view katmanını AngularJS ile kodlayacağız.

Update Asp.Net Core 1.0.1:

İlk makalenin üstünden bu yana(1 hafta :) ) geçmesine rağmen Asp.Net Core 1.0.1 çıktı. Osx ortamında güncelleme için yandaki adresten https://www.microsoft.com/net/download macOS3 işletim sistemine ait paket indirilir. Daha sonra var olan projede, versiyon güncellenmesi için project.json dosyasında, aşağıdaki satırlar değiştirilir. Son olarak “dotnet restore” komutu çalıştırılarak ilgili paketler indirilir.

MameCache:

İlk yapılması gereken iş, datalar çekilmeden önce yüksek trafiğin kaldırabilmesi için bir Mame Cache’in projeye dahil edilmesidir.

Project.json: dosyasına aşağıdaki paketler eklenir.

Startup.cs’inConfigureServices()” methoduna aşağıda görüldüğü gibi “Caching” servisi eklenir.

Startup.cs’in Startup()” : Aşağıda görüldüğü gibi singleton olarak yeni bir “MemoryCache” oluşturulur. Bunun HomeController  sınıfının constructor’ı içinde injection ile oluşturulması malesef “Asp.Net Core 1.0.1” versiyonunda başarılı olmadı.

Home Controller.cs: “ShowExchange()” ve “ShowExchange(string title)” aşağıdaki gibi değiştirilmiştir.

  • Startup._memoryCache.TryGetValue()” methodu ile ilgili “Cache_Data” veya “title“‘a göre value olup olmadığına bakılır.
  • Eğer kayıt yok ise sayfanın başında tanımlanan “cached” değişkenine, “MemoryCacheEntryOptions()” sınıfı ile tanımlanan 1 dakkalık timeout süreli option ve webapi servisinden çekilen data, belirlenen Cache ismi ile atanır.

AngularJS : Projeye angularJs’i “Bower” kullanarak aşağıdaki komut ile yüklenir. “bower install angular“. Daha sonra da “dotnet restore” komutu ile ilgili paketler indirilir.

screen-shot-2016-09-16-at-01-31-52-am

Eğer makinanızda Bower yok ise aşağıdaki komut ile indirebilirsiniz.

Bütün bu işlemlerden sonra proje açıldığında “wwwroot/lib/angular” altında aşağıdaki fileların gözükmesi gerekmektedir.

screen-shot-2016-09-16-at-01-41-04-am

Şimdi gelin kodları angularJS’e göre tekrardan yeni bir view ile kodlayalım.

Views/Home/AngularExchnage.cshtml : “AngularExchange” adında yeni bir view aşağıdaki komut yeoman kullanılarak eklenir.

HomeController.cs (AngularExchange()):

exchange.js(1): Sayfa içerisinde ilgili “app” module aşağıda görüldüğü gibi oluşturulduktan sonra, tanımlanan “Controller” altında, sayfanın yüklenmesi sırasında ilgili webapi servisine bağlanılır. Ve “$scope.Exchange” dizisi “List<DataModel>” ile doldurulur.

Custom Filter olan  “spaceless”: Servisden gelen kağıt isimlerindeki ” ” boşluk karakterini “-” karakter ile değiştiren custom bir functiondir. Amaç url bilgisinde boşluk karakteri koymamaktır.

screen-shot-2016-09-19-at-01-03-19-am

screen-shot-2016-09-19-at-01-03-42-am

AngularExchange.cshtml: Aşağıda görüldüğü gibi “exchange.js” sayfaya eklenmiştir. “ng-repeat” ile çekilen “Exchange” datası, bootstarp css kullanılarak ekrana yukarıda görüldüğü gibi basılmıştır.

ng-href” ie tanımlanan url bilgisi [“data.name | spaceless“] filter’i ile ekrana basılmıştır.

Şimdi sıra geldi datanı sürekli değiştiği durumda bunu client’a bildirmeye. Bu iş için “Socket” teknoloji kullanmak gayet mantıklı bir çözümdür. Ben OsX işletim sisteminde signalR kullanmaya çalıştım. Asp.Net Core 1.0.1, windows 10 işletim sisteminde signalR in RC versiyonları ile çalışsa da, ben OsX işletim sisteminde henüz çalıştırmayı başaramadım. 4 gözle signalR 3.0’ı beklemekteyim :) Bu durumda angularJS modeli timer ile belli bir zaman aralığında doldurmak 2. bir alternatif çözüm.

Önemli Not: Bu projede timer’ın çalışacağı ekran, client sayısı 5’i geçmeyecek bir admin monitör sayfasıdır. Bu neden ile performansı etkiliyecek pek bir durum yoktur. Ancak bu admin sayfası 1000’lerce kişinin göreceği bir sayfa olsa idi, bu yöntem çok yanlış ve kesin sunucuları tavan yapan bir çözüm olurdu. O zaman tek çareniz node.js, Go veya signalR gibi socket teknolojileri kullanmak olacaktı. 

exchange.js(2): Aşağıda görüldüğü gibi “$interval” directive’i kullanılmıştır. Ve her “60000” yani dakikada 1 kere, webapi servisinden yeni bir data çekilmektedir.

Böylece geldik bir makalenin daha sonuna. Bazen ihtiyaçlara göre daha basit çözümler üretmek, hem zaman hem de emek anlamında büyük kazançlar sağlıyabilir. Örneğin bu projede olduğu gibi, çekilen datanın real time olmasının hayati bir önem taşımaması ve kullanıcı sayısının bir elin parmaklarını geçmemesi, websocket teknolojisi yerine basit bir “timer interval” kullanımının çok daha başarılı bir sonuç vermesini sağlıyabilir.

Yen bir makalede görüşmek üzere hoşçakalın.

Herkes Görsün:

Sevebilirsin...

2 Yanıt

  1. Kaan dedi ki:

    Hocam gayet stabil çalışıyor .net core mac osx de https://github.com/aspnet/SignalR-Server

    • borsoft dedi ki:

      Selamlar Kaan,

      Kendin 0 dan bir proje yaratıp ilgili paketleri indirmeyi denedin mi?
      Eğer herşeyi kendin yapıp çalıştırdı isen bir github adresini alırım :)

      İyi çalışmalar.

Bir Cevap Yazın

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