Bir İçeriğin Görüntülenme Sayısını Redis, Signalr ve Bulk DB İşlemleri ile Bulma ve Anlık Raporlama 2
Selamlar,
Bu makalede bir önceki makale olan Bir İçeriğin Görüntülenme Sayısını Redis, Signalr ve Bulk DB İşlemleri ile Bulma ve Anlık Raporlama kısmının anlık raporlama(angularJs ve Bootstrap) ve soceket kısmını (signalr) işleyeceğiz. Ayrıca var olan son dakika datasını Sql’den çekip, admin bir ekranda göstereceğiz.
Öncelikle datanın göstereleceği Admin sayfası yaratılır ve ilgili packagelar Nugetden indirilir.
HomeController/Index: Aşağıda görüldüğü gibi ilgili actionda hiçbir işlem yapılmamaktadır. Doğrudan view’a gidilmektedir.
|
1 2 3 4 5 |
// GET: Home public ActionResult Index() { return View(); } |
Index.cshtml: Sayfaya aşağıdaki javascript ve css dosyaları yanında bir de signalR magic script’i eklenir.
|
1 2 3 4 5 6 7 8 9 10 11 |
<head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/scripts/angular.min.js"></script> <script src="~/scripts/jquery-3.1.1.min.js"></script> <script src="~/scripts/bootstrap.min.js"></script> <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> <script src="~/scripts/jquery.signalR-2.2.1.min.js"></script> <script src="~/signalr/hubs"></script> <script src="~/scripts/counter.js"></script> </head> |
Counter.js :
- app : Angular module’ü “app” adında yaratılır.
- controller : AngularJs altında app’e ait controller “Controller” adında yaratılır.
- hubProxy : Backend taraftaki “CounterHub” sınıfına bağlanır.
- disconnected: Bu durumda client 2sn sonra tekrar connect olmaktadır.
- GetCounterReport() : İlgili method backend tarafta “OnConnected” durumunda yani client sayfaya geldiğinde ilgili article, video ve photogallery datası çekilip model olarak geriye dönülür. Geri dönen “result” “$scope.ArticlesCounters, $scope.ImagesCounters ve $scope.VideosCounters” angular propertylerine doldurulur.
- GetCounterReport ile minute ve second değişkenleri de paramtere olarak alınır. Bu değişkenler de ileride bahsedilecek olan “CountDown()” yani geri sayım function’ı içinde kullanılır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
var app = angular.module("app", []); app.controller('Controller', function ($scope) { var hubProxy = $.connection.counterHub; $.connection.hub.logging = true; $.connection.hub.start(function () { console.log("hub.start.done"); }); $.connection.hub.disconnected(function () { setTimeout(function () { $.connection.hub.start(); }, 2000); // Re-start connection after 2 seconds }); hubProxy.client.GetCounterReport = function (result,minute,second) { $scope.ArticlesCounters = result.ArticlesCounters; $scope.ImagesCounters = result.ImagesCounters; $scope.VideosCounters = result.VideosCounters; $scope.$apply(); //Bu modelleri kullanan tüm elementler yenilenir. countdown("countdown", minute, second); } }); |
CounterHub : Şimdi gelin isterseniz “OnConnected()” durumunda sadece bağlanan Client’ın “GetCounterReport()” function’ını call eden “Hub” sınıfını yaratalım.
- Last1MinutePeriod : Client’a kalan süreyi belirlemek için 1 dakikalık bir sayaç konulacaktır. Geri sayım için global olarak tutulan bu 1 dakikalık sürenin değeri bu property’de tutulur.
- oneminsub : 1 dakikalık sürenin tamamlanmasına kalan süreyi temsil eder.
- CounterViewModel: İlgili client’a gönderilecek olan, içinde Article,Images ve Video propertylerinin bulunduğu modeldir. “GetCountersReport()” methodu ile doldurulur.
- Son olarak connect olan client’ın “GetCounterReport()” function’ı, bu doldurulan model ve ilgili parametreler ile asenkron olarak SignalR sayesinde trigger edilir. Yani server side’dan ==> client side’a doğru bir push işlemi yapılır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
public class CounterHub : Hub { public override async Task OnConnected() { try { var counterTime = Last1MinutePeriod; var oneminsub = counterTime?.AddMinutes(1).Subtract(DateTime.Now); //DB Process CounterViewModel model = new CounterViewModel(); using (IStatsDao sd = Bootstrapper.GetService<IStatsDao>()) { model.ArticlesCounters = sd.GetCountersReport((int)ContentType.Article).ToList(); model.ImagesCounters = sd.GetCountersReport((int)ContentType.ImageGallery).ToList(); model.VideosCounters = sd.GetCountersReport((int)ContentType.VideoGallery).ToList(); await Clients.Caller.GetCounterReport(model, oneminsub?.Minutes, oneminsub?.Seconds); } } catch (Exception ex) { } } public DateTime? Last1MinutePeriod { get { if (System.Web.HttpContext.Current.Application["Last1MinutePeriod"] == null) { return null; } else { return (DateTime)System.Web.HttpContext.Current.Application["Last1MinutePeriod"]; } } } } |
CounterViewModel: Clientlara gönderilen View model aşağıdaki gibidir.
|
1 2 3 4 5 6 |
public class CounterViewModel { public List<CounterItemResult> ArticlesCounters { get; set; } public List<CounterItemResult> ImagesCounters { get; set; } public List<CounterItemResult> VideosCounters { get; set; } } |
ViewModel’e geri dönülen “<CounterItemResult>” aşağıdaki gibidir:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
public class CounterItem { public long Id { get; set; } public long ContentId { get; set; } public int ViewCount { get; set; } public int PlatformId { get; set; } public int PageNumber { get; set; } public int ContentTypeID { get; set; } public DateTime ViewDate { get; set; } } public class CounterItemResult { public long ContentId { get; set; } public string Title { get; set; } public int ViewCount { get; set; } public int ContentTypeID { get; set; } public int TotalViewsCount { get; set; } public string Url { get; set; } } |
Database işlemlerinin yapılacağı “IStatsDao” interface’i aşağıda görülen methodları içermektedir.
|
1 2 3 4 5 6 |
public interface IStatsDao : IDisposable { bool InsertReportHistory(List<CounterItem> data); bool InsertReportItem(List<CounterItem> data); List<CounterItemResult> GetCountersReport(int contentTypeID); } |
Son olarak ilgili Content içeriğine göre (Makale, Video ve Resim) şeklinde “CounterItemResult” tipinde data dönen “sd.GetCountersReport()” methodu aşağıdaki gibidir. Aşağıda kullanılan “_dbConnectionFactory” bir dapper factory sınıfıdır. Bu sınıf, konu dahilinde olmadığı için deyinilmeyecektir. Bu methodda “GetCounterItemsByParams” procedure’ü çağrılmıştır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
public List<CounterItemResult> GetCountersReport(int contentTypeID) { try { var data = _dbConnectionFactory.StatsConnection.ExecStoredProcedure<StatisticItemResult>("GetCounterItemsByParams", new { ContentTypeID = contentTypeID }).ToList(); return data; } catch (Exception ex) { return new List<CounterItemResult>(); } } |
GetCounterItemsByParams: Aşağıda görüldüğü gibi ilgili içerik tipine (ContentTypeID), başlığa(title) , id’sine(ContentId), sayfada bulunduğu yere (PageComponentId) ve Url’ine göre guruplanıp, son 1 dakikalık ve en başından beri olan toplam okunma sayıları geri dönülür.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
CREATE procedure [dbo].[GetCounterItemsByParams] @ContentTypeID int as SELECT ci.ContentId, con.title , SUM(ci.ViewCount) AS ViewsCount, ci.ContentTypeID, SUM(cit.TotalViewCount) AS TotalViewCount,con.Url,ov.[PageComponentId] FROM [dbo].[CounterItem] AS ci inner join [dbo].[ConterItemTotal] as cit on ci.ContentId=cit.ContenttId and cit.PlatformID=ci.PlatformId inner join [dbo].[Content] as con on ci.ContentId=con.ContentId inner join [OnlineData] as od on ci.ContentId=od.[ContentId] and ci.ApplicationID=od.ApplicationId WHERE ci.ContentTypeID=@ContentTypeID GROUP BY ci.ContentId, con.title,ci.ContentTypeID,con.Url ORDER BY ViewsCount desc, TotalViewCount desc, ci.ContentId desc GO |
Şu ana kadar Client online olunca signalR ile Hub sınıfına connect olduk. İlgili datayı procedure ile çektik ve ilgili modeli Client’ın “GetCounterReport()” function’ına gönderdik.
Şimdi sıra geldi ilgili datayı angularJs ile ekrana basmaya: Gelin her adımı madde madde incelemeye başlıyalım:
Index.cshtml: Aşağıdaki kodlar bölüm bölüm hemen aşağısında anlatılmaktadır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
<body ng-app="app" ng-controller="Controller"> <div class="tab-content"> <div id="menu1" class="tab-pane fade in active"> <div class="container"> <span style="color: #ff0000;"><strong>/* BÖLÜM 1 */</strong></span> <div class="panel panel-default container"> <img style="float: right; width: 150px; margin:10px;" src="/Content/Color.png" /> <h1>Son 1 Dakika</h1> <div id="countdown"></div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="container"> <h2>Haber</h2> </div> <table id="tblNews" class="table table-fixed table-bordered table-striped"> <span style="color: #ff0000;"><strong>/* BÖLÜM 2 */</strong></span> <thead> <tr> <th class="col-md-2">İçerik Id</th> <th class="col-md-6">Haber Başlik</th> <th class="col-md-2"><a href="#" ng-click="sortType = 'article.ViewCount'; sortReverseArticle = !sortReverseArticle">Son 1 Dakka</a></th> <th class="col-md-2"><a href="#" ng-click="sortType = 'article.TotalViewsCount'; sortReverseArticle = !sortReverseArticle">Toplam Okunma Sayısı</a></th> </tr> </thead> <tbody> <span style="color: #ff0000;"><strong> /* BÖLÜM 3 */</strong></span> <tr ng-repeat="article in Articles | orderBy:sortType:sortReverseArticle" ng-style="{'background-color': (article.PageComponentId | customColor)}"> <td class="col-md-2"><a ng-href="http://borakasmer.com/Haber/Edit?contentId={{article.ContentId}}" target-blank>{{article.ContentId}}</a></td> <td class="col-md-6"><a ng-href="http://borakasmer.com/{{article.Url}}" target-blank>{{article.Title}}</a></td> <td class="col-md-2">{{article.ViewCount}}</td> <td class="col-md-2">{{article.TotalViewsCount}}</td> </tr> </tbody> </table> </div> <div class="col-md-4"> <div class="container"> <h2>Galeri</h2> </div> <table id="tblGallery" class="table table-fixed table-bordered table-striped"> <thead> <tr> <th class="col-md-2">İçerik Id</th> <th class="col-md-6">Haber Başlik</th> <th class="col-md-2"><a href="#" ng-click="sortType = 'gallery.ViewCount'; sortReverseGallery = !sortReverseGallery">Son 1 Dakka</a></th> <th class="col-md-2"><a href="#" ng-click="sortType = 'gallery.TotalViewsCount'; sortReverseGallery = !sortReverseGallery">Toplam Okunma Sayısı</a></th> </tr> </thead> <tbody> <tr ng-repeat="gallery in ImagesStatics | orderBy:sortType:sortReverseGallery" ng-style="{'background-color': (gallery.PageComponentId | customColor)}"> <td class="col-md-2"><a ng-href="http://borakasmer.com/Haber/Edit?contentId={{gallery.ContentId}}" target-blank>{{gallery.ContentId}}</a></td> <td class="col-md-6"><a ng-href="http://www.borakasmer.com/{{gallery.Url}}" target-blank>{{gallery.Title}}</a></td> <td class="col-md-2">{{gallery.ViewsCount}}</td> <td class="col-md-2">{{gallery.TotalViewsCount}}</td> </tr> </tbody> </table> </div> <div class="col-md-4"> <div class="container"> <h2>Video</h2> </div> <table id="tblGallery" class="table table-fixed table-bordered table-striped"> <thead> <tr> <th class="col-md-2">İçerik Id</th> <th class="col-md-6">Haber Başlik</th> <th class="col-md-2"><a href="#" ng-click="sortType = 'video.ViewsCount'; sortReverseVideo = !sortReverseVideo">Son 1 Dakka</a></th> <th class="col-md-2"><a href="#" ng-click="sortType = 'video.TotalViewsCount'; sortReverseVideo = !sortReverseVideo">Toplam Okunma Sayısı</a></th> </tr> </thead> <tbody> <tr ng-repeat="video in VideosStatics | orderBy:sortType:sortReverseVideo" ng-style="{'background-color': (video.PageComponentId | customColor)}"> <td class="col-md-2"><a ng-href="http://borakasmer.com/Haber/Edit?contentId={{video.ContentId}}" target-blank>{{video.ContentId}}</a></td> <td class="col-md-6"><a ng-href="http://borakasmer.com/{{video.Url}}" target-blank>{{video.Title}}</a></td> <td class="col-md-2">{{video.ViewsCount}}</td> <td class="col-md-2">{{video.TotalViewsCount}}</td> </tr> </tbody> </table> </div> </div> </div> </div> </body> |
- BÖLÜM 1 : Bu bölümde 1 dakikadan geriye doğru sayılmaktadır. “countdown” divinin içine aşağıdaki function ile kendisine parametre gelen “dakika ve saniye”‘ye göre timer ile geriye doğru sayılır. Burada amaç monitoring işlemi yapan client’a, data yenilemesi yapılmasına daha ne kadar kaldığının gösterilmesidir. Bu süre, admin sayfasına girilen tüm clientlar için geçerli ve aynıdır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
function countdown(elementName, minutes, seconds) { var element, endTime, hours, mins, msLeft, time; function twoDigits(n) { return (n <= 9 ? "0" + n : n); } function updateTimer() { msLeft = endTime - (+new Date); if (msLeft < 1000) { element.innerHTML = "Data Yenilenecek!"; } else { time = new Date(msLeft); hours = time.getUTCHours(); mins = time.getUTCMinutes(); element.innerHTML = '<h2> Kalan Süre: <font color=red>' + (hours ? hours + ':' + twoDigits(mins) : mins) + ':' + twoDigits(time.getUTCSeconds()) + '</font></h2>'; setTimeout(updateTimer, time.getUTCMilliseconds() + 500); } } element = document.getElementById(elementName); endTime = (+new Date) + 1000 * (60 * minutes + seconds) + 500; updateTimer(); } |
- BÖLÜM 2 : Burada gösterilecek kolon başlıkları ve tıklandığında sıralanması istenen kolonlar tanımlanmaktadır. Sıralama işlenminde “sortType” ile hangi kolona göre sıralanacağını, “sortReverseArticle” ile de sıralama yönü yani “asc,desc” belirlenmiştir.
- BÖLÜM 3 : “Articles” modeli gezilerek bir table’a basılır. Burada 2 durum söz konusudur.
- cisi : “orderBy:sortType:sortReverseArticle” yani sıralama işleminin yapıldığı kısımdır. “orderBy” angularJS sıralama directive’dir.
- cisi ÖNEMLİ: “<ng-style=”{‘background-color’: (gallery.PageComponentId | customColor)}“: Burada içeriğin “PageComponentId”‘si yani sayfadaki yerine göre arka renginin angularJS’in Custom Filter’ı ile değiştirilmesidir. İlgili custom filter aşağıdaki gibidir. Geri kalan kolonlara ilgili haberin detayına ve admin ekranına giden linkler angularJS’de “ng-href” directive’i ile tanımlanmıştır. Galeri ve Video tabloları içinde aynı işlemler yapılmıştır. Tek fark “ContentType”‘dır.
Custom Filter[customColor]:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
app.filter('customColor', function () { return function (data) { //console.log("Data:"+data) var color; switch (data) { case 112: color = "#d1c4e9"; break; case 125: color = "#9ccc65"; break; case 642: color = "#ce93d8"; break; case 511: case 512: color = "#dce775"; break; case 144: color = "#ffccbc"; break; default : color = "#ffffff"; } return color; //console.log("Color:" + color); }; }); |
Sıra geldi bir önceki makalede atlanan, eğer gelen içerik 1 dakikalık süreyi doldurmuş ise yapılacak DB’ işleminden sonra çağrılacak olan SignalR adımına:
Amaç 1 dakika süresi dolduğu zaman rediste depolanan tüm 1 dakikalık datayı, monitor eden clientlar’a Push etmektir: Aşağıda görüldüğü gibi yukarıda anlatılan “GetCountersReport()” methodu ile ilgili içerik tipine ait son 1 dakikalık haberler çekilir. Daha sonra oluşturulan bu model
GlobalHost.ConnectionManager.GetHubContext<CounterHub>()
methodu ile ilgili “Hub” sınıfına erişip, o an bağlı olan tüm clientların üzerindeki “GetCounterReport()” function’ını tetikler. Son 1 dakikalık haber datası ve kalan süre dakika ve saniye cinsinden geri dönülür.
hubContext.Clients.All.GetCounterReport(model, countersub.Minutes, countersub.Seconds);
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
try { var counterTime = Last1MinutePeriod; var countersub = counterTime.AddMinutes(1).Subtract(DateTime.Now); //DB Process StatisticsViewModel model = new StatisticsViewModel(); using (IStatsDao sd = Bootstrapper.GetService<IStatsDao>()) { model.ArticlesStatics = sd.GetCountersReport((int)ContentType.Article).ToList(); model.ImagesStatics = sd.GetCountersReport((int)ContentType.ImageGallery).ToList(); model.VideosStatics = sd.GetCountersReport((int)ContentType.VideoGallery).ToList(); //Send Data All Connected Clients var _hubContext = GlobalHost.ConnectionManager.GetHubContext<CounterHub>(); hubContext.Clients.All.GetCounterReport(model, countersub.Minutes, countersub.Seconds); } } catch (Exception ex) { } |
Böylece 1 dakika içinde okunan haberlerin video, photo ve makale tiplerine göre, impression sayılarını redis in memory bir yapıda saydırdık. 1 dakikanın sonunda ilgili “Statistic:*” keyi ile başlıyan tüm haberleri bir data table’da toplayıp, ilgili procedure’e kümülatif bir parametre olarak gönderdik. Toplam okunma sayıları bir tabloya, son 1 dakikalık görüntülenmeleri de bir başka tabloya kaydedilip oluşturulan result set, signalR kullanılarak ilgili tüm clientlara gönderildi. Client Side tarafda angularJs ve bootstarp’in gücü kullanılarak gelen model yapısı, custom filter ve directiveler kullanılarak ekrana basılıp yenilendi. Bu işlem her 1 dakikada bir client tarafda sayılan bir sayaç ile gösterilerek tekrarlandı.
Bu makalede kodların tamamına girmektense, amaca uygun yolları ve mimariyi bir parça olsun size tanıtmak istedim. Böylece hem performans için bir fikir oluşturmuş hem de yenilkçi metodolojiler ile kodlamanın ne kadar kolay olabileceğini göstermiş olduk.
Bir makalenin daha sonuna geldik. Yeni bir makalede görüşmek üzere hoşçakalın.
Son Yorumlar