ReactNative dotnetify ile .Net Core SignalR’a Bağlantı

Hazırda mevcut olan bir react-native projem ve .Net Core projemde socket programlama ihtiyacı için hemen .Net Core tarafında ilgili SignalR kütüphanelerini indirip Hub sınıfları ve metodları bir güzel oluşturdum. Tecrübenin verdiği hızla bir güzel bitirdik, react-native tarafı içinde kolları sıvadık ama o ana kadar düşünmediğim bir şey geldi aklıma acaba react-native tarafında signalr kullanabiliyor muyum? Hemen eller titreyerek aramayı gerçekleştirdim ve react-native-signalr kütüphanesi ile karşılaştım… Hikayenin devamı makalenin detayında 🙂

ReactNative dotnetify ile .Net Core SignalR’a Bağlantı

Hazırda mevcut olan bir react-native projem ve .Net Core soket programlama ihtiyacı için hemen .Net Core tarafında ilgili SignalR kütüphanelerini indirip Hub sınıfları ve metodları bir güzel oluşturduk tecrübenin verdiği hızla bir güzel bitirdik react-native tarafı içinde kolları sıvadık ama o ana kadar düşünmediğim bir şey geldi aklıma acaba react-native tarafında signalr kullanabiliyor muyum? Hemen eller titreyerek aramayı gerçekleştirdim ve react-native-signalr kütüphanesi ile karşılaştım oh be dedim bir an.

Bu kütüphaneyi daha önce de farklı bir projede kullandığımı hatırladım 🙂 Ama asıl sürecin bundan sonra başlayacağını bilemedim çünkü daha önce kullandığım proje ile bu proje arasında bir fark vardı oda daha önce kullandığım .Net Core projesi değildi o yüzden yine titrek ellerle  react-native tarafında geliştirmeleri tamamladım ve mağlesef çalışmadı korktuğum başıma gelmişti 🙁

Hemen kolları tekrar sıvayıp bu defa ne yapabiliriz için bir araştırmaya koyuldum ve .net core tarafında da büyük anlamda emek harcayıp dotnetify adında bir kütüphane ortaya çıkardıklarını gördüm. React-native, vue, .net gibi teknoloji ve diller için kütüphaneler hazırlamışlar, açıkçası benim hoşuma gitti bu vesile ile yeni birşey öğrenmiş olduk. Dotnetify’nin çok gelişmiş kısımlarına kadar girmeyip sadece .net core tarafında random üretilen sayısal değerin react-native tarafında gerçek zamanlı olarak gösterimi ve liste elemanına gerçek zamanlı olarak nasıl yeni kayıtlar eklenir bunlar gösterilecek ayrıca hem react-native hemde .net core tarafında bu ortamın nasıl ayağa kaldırıldığını göreceğiz.

Sırasıyla .net core ve react-native tarafında hangi adımları izleyerek ortamı ayağa kaldıracağımızı göreceğiz.

.Net Core

📄 Yeni Bir .Net Core Projesi Oluşturma

.Net Core projesini isterseniz Visual Studio yada dotnet komut satırı aracını kullanarak kolaylıkla oluşturabilirsiniz tamamen tercih meselesi ama ben makale içerisinde süreçleri komut satırından yürüteceğim.

 D:\Github\reactnative dizini altına dotnetifydemo adında bir klasör oluşturdum dotnetifydemo klasörüne react-native projesini oluşturacağım ama bu klasör altına server adında yeni bir klasör oluşturup bu klasör içerisine altta yer alan dotnet… komutu ile .net core projesini oluşturmuş olacağız.

MyComputer D:\Github\reactnative\dotnetifydemo\server
dotnet new web -n dotnetify

.Net Core tarafında paket yüklemek için isterseniz Nuget Package Manager’ı kullanarak yada cli aracını kullanarak nuget paketini yükleyebilirsiniz eğer nuget paketini yüklemek için alttaki komutlardan uygun olanı kullanabilirsiniz.

Üstteki komutlardan birini kullanarak .net core promize Dotnetify.SignalR kütüphanesini yüklüyoruz ben komut satırından yükleyeceğim için .Net CLI kısmında yer alan kodu kullanarak alttaki gibi yüklüyorum.

MyComputer D:\Github\reactnative\dotnetifydemo\server
dotnet add package DotNetify.SignalR --version 3.3.1

Şimdi .Net Core tarafında dotnetify konfigürasyonunun nasıl yapılacağına ve SignalR’da Hub’a karşılık gelen BaseVM sınıflarından türeteceğimiz dotnetify Subscribe-Publisher mekanizmasının nasıl kurulacağınız makale girişinde bahsettiğimiz gibi 2 örnek ile açıklayacağız.

Paketin yüklendiğini varsayıp işlemlere devam ediyoruz Startup.cs dosyamız içerisinde ConfigureServices adlı metod içinde alttaki metodları kullanarak SignalR ve Dotnetify özelliklerini projemize kullanabilmek için kazandırıyoruz.

Sonrasında ise yine aynı Startup.cs dosyası içerisinde Configure adlı metodda altta eklenecek diye işaretlediğimiz kısımları ekleyin.

Dotnetify ortamını geliştirme yapmak için ayağa kaldırdık. Şimdi dotnetify baseVM class’ından türeyecek SignalR’da karşılığı olan Hub sınıfımızı oluşturalım.

Eğer daha önce react-native-signalr’ı kullanarak bir react-native projesi geliştirdiyseniz dotnetify’inin işleyişi ona göre çok farklı olduğundan biraz anlama konusunda sıkıntı çıkarabiliyor mağlesef ama çokta problem olmuyor 1-2 örnek sonrası oturuyor taşlar hemen yerine.

.Net Core projemize Hubs adımda bir klasör oluşturup onun altına LiveGaugeVM adında bir sınıf oluşturuyoruz ve bu sınıf’ın Dotnetify.BaseVM sınıfından türetilmesini sağlıyoruz böylelikle Socket programlama için bir hub oluşturmuş oluyoruz. LiveGaugeVM sınıfının son hali altta yer almaktadır.

🌐 React Native

Alttaki komut ile istediğimiz dizine dotnetifydemo adında bir react-native projesi oluşturuyoruz.

MyComputer D:\Github\reactnative\
react-native init dotnetifydemo

Proje oluştuktan sonra dotnetify dizinine giderek dotnetify kütüphanesini npm üzerinden indiriyoruz.

// İlgili dotnetifydemo dizinine gidiyoruz.
cd dotnetifydemo
// dotnetify kütüphanesini dotnetifydemo adlı react-native projemize ekliyoruz.
MyComputer D:\Github\reactnative\dotnetifydemo\
npm i dotnetify --save

react-native projemize dotnetify’ide yükledikten sonra alttaki gibi App.js dosyamızda dotnetcore projemize ait url’i girelim.

Gerçek zamanlı olarak bir değeri ayrıca gauge chart’ında göstermek istediğimizden bir component’e ihtiyaç doğdu bu yüzden react-native-svg-charts adlı component’i indirdik bu component’in de react-native-svg component’ine bağımlılığı olduğundan 2 paketi alttaki komutlar ile projenize dahil ediniz.

MyComputer D:\Github\reactnative\dotnetifydemo\
npm i react-native-svg --save
npm i react-native-svg-charts --save


Önemli detayları üstteki kodlar arasına yazdım bu notlara dikkate alıp okumanızı öneririm özellikle dotnetify.hubServerUrl kısmında kendi .net core projenizin adresini girmelisiniz.

Sonuç

Peki bu işi olumlu sonuçlandırdığımıza göre o zaman gerçek zamanlı olarak liste elemanı ekleme adımına geçebiliriz. Sırasıyla yine .Net Core tarafında her 1sn’yede bir listeye eleman eklenilmesini sağlayacağız.

.Net Core

.Net Core tarafında yapılması gerekenler yine ilgili açıklamaları kod blokları üzerine yazdım dikkat incelemesinizi tavsiye ederim.

Altta kod blokları arasında Faker. kod blokları göreceksiniz Fake data üretmek için sıklıkla kullandığım Faker.Net kütüphanesini yükleyebilirsiniz.

React Native

React native tarafında yapılan geliştirmeler ise altta kod bloğunda gözüktüğü gibi önceki gauge örneğinden tek farkı connect olduğumuz adres LiveListVM olarak değiştirilerek yeni bir connect nesnesi oluşturduk.

 

Sonuç

Mutlu son…


📚 Kaynaklar


Lütfen olumlu-olumsuz tüm görüşerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.

Makalede kullanılan örneğe ve React Native ile ilgili diğer tüm örneklere github hesabımdan erişebilirsiniz. Buraya tıklayıp github hesabıma erişebilirsiniz.

ReactNative dotnetify ile .Net Core SignalR’a Bağlantı
5 (100%) 2 oy

Bunlar da hoşunuza gidebilir...

Kimler Neler Demiş?

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Bildir