.NET Core & SignalR

Merhaba, Medium da ilk yazımı sizinle .Net Core (3.1.8) ile beraber nasıl SignalR kütüphanesi kullanabilirim sorusunu küçük bir MVC uygulamasıyla beraber anlatmaya çalışacağım.

Client seçimimi Angular düşünüyordum fakat konudan da çok fazla sapmamak amacıyla böyle bir seçim yaptım. Konuyu çok fazla uzatmadan hemen başlayalım.

Hepimiz gerçek dünyada bir şekilde SignalR kütüphanesini dolaylı veya bilinçli olarak kullanıyoruz. Benim ilk SignalR kullanma deneyimim herkesinde sıklıkla duyduğu gibi kurum içi chat projesi oldu. Ancak bu kütüphaneyi daha farklı ve daha geniş alanlarda kullanmamız mümkün.(Örnek: monitoring,log izleme,anlık raporlama, açık arttırma vs.. Daha fazlası ve farklı kullanımı tamamen hayal gücümüze kalmış).

Benim bu günlerde gerçek hayatta kullanacağım durum ise anlık raporlamaları, sayfa yenilenmeden güncelleyecek bir proje olacak.

Bizim ise şöyle bir senaryomuz var;

Client ve Api arasında projemizin bağlı olup olmadığını kontrol edeceğiz bu durumda clientten başka bir client’a mesaj göndereceğiz..

Asp .Net Core 2.1 den önce tarayıcı desteği olmayan SignalR tarayıcıları ile sorunlar oluşturabiliyordu. Fakat Asp .Net Core 2.1 sürümüyle beraber tarayıcı SignalR desteklemezse bile SignalR kendi altyapısını kullanarak bu sorunu çözmektedir. Asp.Net Core kendi kütüphanesinde SignalR otomatik olarak geleceğinden dolayı ekstra olarak eklemenize gerek kalmayacaktır.

Bazı yapılarda SignalR şu şekilde bulunmaktadır;

Asp .Net Core : SignalR

Node.js :Socket.IO

Python :Websockets

Kısacası SignalR ‘ın yaptığı işi anlatmak gerekirse;

Client tarafından(publisher) Hub üzerine bir mesaj yollar ve diğer client lar ise hub üzerinden subscriber olarak gönderileni alacaktır.

Hemen küçük bir proje yapalım.

Bir tane Asp .Net Core da API yi seçiyorum. Yazıyı yazdığım anda en son sürüm olan .Net Core 3.1 sürümünü kullanıyorum.

Projemi build edip hiçbir hata olmadığını gördükten sonra sırasıyla işlemlerime geçiyorum. Bir tane Hubs klasörü oluşturacağım. Bu klasör içerinde ConnectionHub adında bir class oluşturacağım.

Bu class ın inherit alacağı yer ise Hub classıdır. Bu class yukarıda da söylediğim gibi .Net Core içerisinde hazır geldi ve Nuget Package den hiçbir eklenti yapmadım. Daha sonra mesaj göndereceğim methodu asenkron olarak geriye bir değer döndürmeyeceğim şekilde yazıyorum..

Şimdi ise bu oluşturduğum class ı Startup da tanımlama işlemlerini yapacağım.

Yukarıda görüldüğü gibi Client için Cors ayarlarını ConfigureServices de yaptım. Middleware olarak ise ConnectionHub sınıfını endpointlerime eklemiş oldum.

Api tarafını bu şekilde tamamladıktan sonra, Hemen Client da haberleşmesi için Solution’ a SignalR.Web adında bir MVC projesi ekleyelim.

Oluşturduktan sonra Client in SignalR mesajlarını olabilmesi için hızlıca scriptlerimi ekliyorum.

SignalR.Web Projesine sağ tıklarak; Add =>Client-Side Library dedikten sonra,Library alanına @microsoft/signalr@3.1.7 ekledikten sonra Provider ‘i unpkg olarak seçiyorum. Daha sonra Choose specifig files ‘dan aşağıdaki gibi alanları seçiyorum.

signal.js dosyasını development zamanında kullanabilirim fakat production zamanında daha küçük ve sıkıştırılmış dosya olan signal.min.js dosyasını kullanmam performans açısından yararlı olacaktır. Yukarıdaki seçenekleri işaretledikten sonra Install diyerek indirilmesini bekliyorum.

Indirme işlemi tamamlandıktan sonra root da dosya yolunu belirttiğim gibi dosyaları indirmiş oldum.

Bu eklentilerden sonra index.html ile script tag lerinde SignalR tanımlanıyorum. burada jquery den faydalanacağım.

connection olarak tanımladığım yer api de middleware olarak tanımladığım adrestir. Bu adres üzerinden ConnectionHub class’ı içerisinde tanımladığım method’un(SendName) içerisinde göndermek istediğim mesajın adını(ReceiveName)işaretledim. Bu adres’e bağlantı var mı yok mu incelemek için altta basit bir html kod bloğu da ekledim. Şimdi Api katmanımı Ctrl+F5 çalıştırdıktan sonra şimdi de web katmanımı aynı işlemden geçiriyorum.

Şimdi bağlantı sağlayabildik mi inceleyelim.

Projemi çalıştırdığımda Cors policy hatası ile karşılaştım bunun sebebi cors ayarlarımızda sorun olmasındandır.

Bu sorunu beraber inceleyelim.

Configure Service tarafında WithOrigins olarak web adresimi tanımladım.

Bu adresi tanımlarken Default olarak bir policy oluşturmak yerine CorsPolicy yazıdığım için ve bunu Configure tarafında belirtmediğim için hata ile karşılaştık. Tekrardan düzenleyerek projemi tekrardan derleyip çalıştırıyorum…

Süperrrr.. SignalR ‘a başarılı bir şekilde bağlandık 👊👊

Şimdi de client dan bir mesaj atalım bakalım diğer client bu mesajı anlık olarak görecek mi?

Evet sol taraftaki publisher Hub ‘ a izin attığı anda sağ taraftaki client mesajı başarılı bir biçimde almış oldu.

Biraz uzun bir yazı oldu ancak sabırla inceleyip okuduğunuz için teşekkür ederim. Hoşçakalın.

Kaynak Kod :https://github.com/serkanyurttapan/SignalR.Api