ASP.NET Core 2.2 Hosted Service ile Angular SPA’a Real Time Veri Gönderilmesi

Herkese merhaba. Bugün genel olarak ASP.NET Core’da Hosted Service’in kullanımından bahsedeceğim. Sonrasında Hosted Service üzerinde SignalR service’i çağırarak Angular SPA’a real time veri göndereceğiz.

Geliştirme sırasında ASP.NET Core 2.2 ve Angular 7 kullanılmıştır.

ASP.NET Core projesini buradan Angular SPA projesini de buradan indirebilirsiniz.

Peki Nedir Bu Hosted Service?

Bir uygulama geliştirirken background olarak ilerlemesini istediğiniz task’ler olabilir. ASP.NET Core tarafında bu işlemleri Hosted Service aracılığıyla gerçekleştirebiliyoruz.

ASP.NET Core ile bir API projesi oluşturduktan sonra kodlamaya başlayalım.

Öncelikle “MessagesHub” isimli bir SignalR Hub oluşturuyoruz. Hub SignalR’da gönderilen verinin istemcilere iletilmesini sağlıyor.

Random olarak mesaj döndürecek olan “MessageProvider” class’ımızı kodluyoruz. (Evet sıkı bir Guns N’ Roses fanıyım 😊 )

Şimdi sıra geldi HostedService’imize.

“StartAsync” ve “StopAsync” metotlarımız “IHostedService” interface’i ile implement ettiğimiz metotlar. Bir Hosted Service çalışmaya başladığında constructor’ından sonra “StartAsync” metodu çağrılıyor. Durdurulduğunda ise “StopAsync” metotu çağrılıyor.

“Dispose” metotu ise “IDisposable” interface’i ile implement ediliyor. Hosted Service’imiz dispose edilirse bu metot çağrılıyor.

“IServiceProvider” türünde olan “Services”’i constructor injection ile inject ediyoruz. Service provider ile Hosted Service içinde diğer servislerimizi çağırabiliyoruz.

Timer’ın kullanılma amacı Hosted Service’in belirli aralıklarla istediğimiz işleri gerçekleştirmesini sağlamak. “DoWork” ise timer’ın çağıracağı metot.

Şimdi “DoWork” içerisinde nelerin gerçekleştiğini inceleyelim. İlk olarak using kalıbı içerisinde “Services”e ait “CreateScope” metodu ile “scoped” isimli, Hosted Service içerisinde başka bir servis çağırmamızı sağlayacak nesnemizi oluşturuyoruz.

“IHubContext” interface’i ile “MessagesHub”ımızı servis olarak çağırıyoruz.

Son olarak “MessagesHub” üzerinde “getSendMessage” isimli SignalR metoduna subscribe olmuş tüm client’lara random olarak ürettiğimiz mesajların gönderilmesini sağlıyoruz.

Projeyi geliştirme aşamasında Cors ile ilgili bir problem yaşadım. ASP.NET Core 2.0 ile aynı projeyi geliştirdiğimde “AllowAnyOrigin” metodunu kullanarak Hub’a bağlanabilirken, ASP.NET Core 2.2’de aynı projeyi geliştirdiğimde SPA’dan Hub’a bağlanırken browser tarafından Cors hatası alıyordum. Kısa bir araştırmadan sonra “SetIsOriginAllowed” metodunu kullanarak Cors’la ilgili bu hatayı çözdüm.

Sonrasında HostedService’i ve SignalR’ı servis olarak ekliyoruz.

“ConfigureService” metodu içerisinde Cors’u ekliyoruz ve Hub’a ulaşacağımız path’i belirtiyoruz.

Şimdi sıra Angular SPA’ı geliştirmekte

“ng new HostedServiceClient “ ile bir Angular projesi oluşturuyoruz. Working directory’e gittikten sonra “npm install @aspnet/signalr” ile gerekli SignalR paketlerini projeye ekliyoruz.

“ng generate service hubconnection” ile projede bir servis oluşturuyoruz.

“Hubconnection” servisi kısaca açıklamak gerekirse Hub’a bağlanmamızı sağlayacak olan “hubConnection” nesnesini tanımlıyoruz ve “createConnection” metodu içinde Hub’ın adresini belirtiyoruz.

“registerOnServerEvent” metotu ile Hub üzerindeki “getSendMessage” ismi ile belirttiğimiz metoda subscribe oluyoruz ve gelen mesajı “message” isimli “EventEmitter”a atıyoruz.

“startConnection” metodu ile de Hub’a bağlanıyoruz.

Component’in içinde DI ile servisimizi çağırıyoruz ve servisin içinde bulunan “EventEmitter<string>” tipindeki “message” nesnesine, component tarafında “subscribeToMessageEvent” metodu ile “subscribe” oluyoruz.

Son olarak html kodlarımız.

Ve sonuç:

Hosted Service üzerinden client’a gönderilen mesajlar sayfa üzerinde real time güncelleniyor.

Bir makalenin daha sonuna geldik. Kodla kalın.