ASP.NET Core 3.0 ile SignalR Kullanımı
Herkese tekrardan merhabalar, React ile JWT kullanarak SignalR Core ile nasıl iletişim kurulur serisinin bu kısmında ASP.NET Core 3.0 ile SignalR’ı nasıl kullanırız? Konusunu açıklamaya çalışacağım. Serinin bir önceki yazısına buradan ulaşabilirsiniz:
Kuruluma geçmeden önce ne yapacağımızı anlatayım. SignalR ile ilgili yazılara ve eğitimlere baktığımda çok fazla Mesajlaşma uygulaması gördüm ben hiçbir amaca hizmet etmeyen farklı bir şey olsun istedim 😂 Yön tuşlarına basarak ekranda dolaşabileceğiniz bir kutu yapmaya karar verdim.
Kurulum ve Proje Oluşturma
Öncelikle sisteminizde ASP.Net Core 3.0 sürümü kurulu değilse buradan indirebilirsiniz. Kullandığınız IDE neyse ona göre projemizi ASP.Net Core Web API projesi olarak oluşturuyoruz. Ben ileride Docker ile alakalı örnek yaparsam diye Docker desteğini ekledim. Visual Studio 2019 kullananlar en son adımda şöyle bir ekranla karşılaşması gerekiyor:
Hub
Kurulum işini hallettiysek hemen işlemlerimize geçelim. İstemcilerimizin bağlanacağı Hub sınıfımızdan kalıtım almış olan bir sınıf oluşturalım.
Öncelikle Hub sınıfından gelen OnConnectedAsync() metotunu override edip bu hub’a bağlanan her kullanıcıyı bir HashSet’e atıyorum. Böylece sistemde aktif olarak kaç tekil kullanıcı var bileceğim.
Burayı detaylıca incelemek istiyorum. “ChangePosition” metodumuz istemci tarafından gelecek değerleri dinleyen bir metottur. Kullanıcının ismini, X ve Y kordinatlarını alıyorum. Bu hub’a bağlı bütün kullanıcılara gelen bu bilgiyi göndermesini söylüyorum. Burada farklı yöntemlerde var belli kişiye veya bir gruba da gönderebiliyorsunuz. Daha fazla bilgi için.. Çok da detaylı olmadı ama umarım kafanızda bir şeyler canlanmıştır😊
Startup
Gelelim SignalR için startup yapılandırmamızı yapmaya.
SignalR middlewarelarımızı ekliyoruz ve PositionHub sınıfımıza hangi endpoint üzerinden ulaşacağımızı belirtiyoruz. Basit bir şekilde tanımlamalarımızı yaptık. Burada services.AddSignalR(); derken karşınıza services.AddSignalRCore(); çıkacaktır. O arkadaş ise daha low-level işler için kullanılan bir arkadaşmış. AddSignalR(); içinde de zaten AddSignalRCore(); kullanılıyor. Detaylı bilgi için..
Javascript Client
Gelelim istemci tarafına orada ne yapıyoruz. Ben basit bir HTML sayfası üzerinden yapacağım işlemlerimi. Öncelikle javascript üzerinden signalr kullanabilmemiz için signalr paketini projeye dahil etmemiz gerekiyor. Bunun bir çok yolu var ama ben cdnjs üzerinden dosyayı indirip kullandım. Sizde aynı şekilde buradan indirebilirsiniz.
SignalR ile işlemleri yapabilmek için coordinate.js isminde bir javascript dosyası oluşturdum. Belirlediğimiz endpoint üzerinden hub için bir connection nesnesi oluşturdum. Bu nesne üzerinden bağlantıyı başlattım.
Oluşturdurduğum bu bağlantı üzerinden klavyeden tuşa her basıldığında hub’a kullanıcının şuanki konumunu connection.invoke metoduyla hubdaki ChangePosition metodunun istediği parametrelerle birlikte gönderiyorum.
Yukarıdan hatırlayalım hub’a gönderdiğim her istekle beraber geriye kullanıcı ismi, X ve Y koordinatları ve aktif kullanıcı sayısını döndürüyordum. Burada da o tarife uyan bir fonksiyon oluşturdum. Gelen istekte bulunan kullanıcı bilgisi yoksa yeni bir div oluşturup onu da ekrana çiziyorum. Varsa gelen değerleri güncelliyorum. Bu fonksiyona gelen her isteği sayabilmek içinde Request Counter oluşturdum oradan istekleri sayıyorum.
Ve çıktımız şöyle anlamsız bir şey oldu 😂
Önemli Güncelleme
Son olarak geçen yazımdan sonra ASP.NET Core 3.0 kararlı sürümüyle birlikte gelen json serialize becerisi SignalR Core için de kullanılmaya başlandı. Eski SignalR da olan ama yenisine eklenmemiş olan otomatik bağlanma(AutomaticReconnect) da eklendi. Detaylara buradan ulaşabilirsiniz.
Bu yazımında böylece sonuna gelmiş bulunuyorum. Seriyi biraz daha hızlandırmak amacıyla direk SignalR Core ile React üzerinden JWT authentication ile kullanmayı anlatacağım. Umarım faydalı bir içerik olmuştur(farklı bir şey yapayım derken saçma bir şey yapmama rağmen)
Seriye en baştan başlamak için :
Projeye ulaşmak için :
