ASP.NET Core 2.0 SignalR – Basit Chat

Selamlar arkadaşlar,

Bu makalede macOS Sierra işletim sisteminde, .Net Core 2.0 ile bir Mvc projesinde, signalR kullanarak basit bir chat uygulaması yazacağız. Öncelikle baştan belirteyim, .net Core için signalR kütüphanesi bu makale yazılırken halen “1.0.0-alpha2-final” versiyonunda bulunmaktadır.

Peki kısaca signalR nedir ? Real Time yani canlı işlemler yapılmak için kullanılan bir socket teknolojisidir. Örneğin bir web sayfasında, canlı maç skoru bilgisinin client’ın herhangi bir servisi ya da yapıyı dinlemeden hatta sayfa refresh olmadan değiştirilmek istendiğinde, kullanılabilecek teknolojilerden sadece biridir.

Öncelikle gelin .Net Core Mvc projemizi oluşturalım. İlgili kurulumlar yapıldıktan sonra : Bash ortamında “dotnet new mvc -o signalRCore” yazılarak ilgili proje yaratılır.

  • Oluşan Mvc projede “signalRCore.csproj” dosyası aşağıdaki gibi güncellenir. ==>”<PackageReference Include=”Microsoft.AspNetCore.SignalR” Version=”1.0.0-alpha2-final” />” dosyası eklenir. Kaydetme işleminden sonra VS Code’un sorduğu Restore işlemine izin verilir. Ya da “dotnet restore” komutu gerek olmasa da çalıştırılabilir.
  • <Folder Include=”wwwroot\scripts\” />” : Aşağıda görülen bu ekleme ile “.cshtml” sayfa üzerinde eklenecek script dosyalarına kısa yol verilmiş olunur.

 

HomeController.cs : Aşağıda görüldüğü gibi Index() action’ına hiçbir değişiklik yapılmadan ilgili View’ın gelmesi sağlanmıştır.

Chat: Hub class’ı : Hub “Microsoft.AspNetCore.SignalR” namespace’i altında bulunan, real time socket işlemlerinin yapıldığı signalR sınıfıdır.

  • OnConnectedAsync()” : Methodu ile, client sayfayı ilk açtığı an, Chat Hub sınıfına connect olunur ve tam bu esnada bir ConnectionID alınır. Aslında bu her bir client için tekil oluşan bir tanımlayıcıdır. İşte tam bu anda devreye giren method “OnConnectedAsync()” methodudur. Burada herbir client için unique oluşturulan ConnectionID alınıp, tekrar ilgili client’ın kendisine gönderilir. Kısaca bir client spesific bir başka client’a bir bildiri gönderecek ise, aynı bir mail adresi veya telefon numarası gibi bu connectionID’ye ihtiyaç duymaktadır.
    • Clients.Client” : SignalR sınıfına connect olan herhangi bir client’ı belirtmektedir.
    • Clients.Client(Context.ConnectionId)“: Spesifik olarak connect olan client’ı temsil etmektedir.
    • “.InvokeAsync(“SetConnectionId”,Context.ConnectionId)” : Methodu ile client tarafındakiSetConnectionId()function’ı tetiklenmiş ve parametre olarak, ilgili client’a ait “Context.ConnectionId” gönderilmiştir. Burası bence signalR’ın en büyük gücüdür. Tekrarlamak gerekir ise Server Side Taraftan ==> Client Side Tarafdaki bir Function() tetiklenmişti.
  • SendMessage(string message)“: Connect olan tüm clientlara yazlmış olan mesajın gönderilmesi için kullanılan methoddur.
    • “Clients.All”: Tüm clientları temsil etmektedir.
    • “Clients.All.InvokeAsync(“GetMessage”, message)” : Hub sınıfına bağlı olan tüm clientlara, front taraftaki “GetMessage()” function’ı, server side taraftan parametre olarak gönderilemek istenen string mesaj değişkeni ile tetiklenir. Client Side ==> Her bir client’ın açtığı browser ekranı anlamına gelmektedir.

Not : Alttaki resimde signalR için kodlar biraz eskide kalsa da, mantık hep aynıdır. SignalR kısaca, server side tarafdan client side tarafdaki bir function’ın çağrılmasıdır. Aynı şekilde client side taraftan, server side tarafdaki bir method da çağrılabilir. Ama bu zaten pek de alışık olmadığımız bir durum değildir :)

Startup.cs: Aşağıdaki gibi düzenlenir. Asp.Net Core’da en başta herşey ham hali ile başlar. Amaç performans ve gereksiz hiçbir nesnenin bulunmayışının istenmesidir. Bu neden ile :

  • ConfigureServices() methodunda gerekli tüm servisler burada tanımlanır.==> services.AddMvc() ve services.AddSignalR() methodları eklenerek, projenin bir Mvc projesi olması ve SignalR kütüphanesinin bu projede kullanılacağı tanımlanmıştır.
  • Configure() methodunda bir takım ayarlamalar yapılır.
    • app.UseStaticFiles() : Proje içinde static dosyaların kullanılması sağlanır(wwwroot altında). Örnek resim dosyaları,script dosyaları gibi..
    • app.UseMvc(routes => : Mvc routing tanımlamalarının yapıldığı yerdir.
    • app.UseSignalR(routes => : “chat” sınıfının SignalR sınıfı olarak “chat” adı ile tanıtıldığı yerdir ==>”routes.MapHub<Chat>(“chat”);

Program.cs : dotnet run” komutu çalıştırıldığında, uygulamanın ayağa kalktığı default port 5000‘dir. Bunun istendiği gibi değiştirildiği yer, uygulamanın ilk ayağa kalktığı Program.cs sınıfıdır.

  • void Main() : İlk çalıştırılan methoddur.
  • BuildWebHost() : İlgili methodda host işlemi ile web sayfası ayağa kaldırılırken ==> “UseUrls(“http://localhost:1453”) komutu ile 5000 default portu 1453 olarak değiştirilmiştir.

Index.cshtml: Genel mesajlaşma işleminin yapıldığı ekrandır.

  • Dikkat edilir ise artık signalR’da önceden kullandığımız magic script denilen “<script src=”/signalr/hubs”></script>” kullanılmamaktadır.
  • Signalr, kendi içerisinde artık Jquery’e ihtiyaç duymamaktadır. Yehuuu :) Aşağıda kullanılma nedeni,  custom kullanılan functionlardır. Kısaca signalR değil ben kullandım :)
  • Sayfanın başında signalR için gerekli client script yanda görüldüğü gibi eklenmiştir.==>”<script src=”scripts/signalr-client-1.0.0-alpha2-final.min.js”></script>
    • İlgili signalR script kütüphanesi “npm install @aspnet/signalr-client –save”  komutu ile indirilebilir.
    • npm install @aspnet/signalr-client” komutu ile ilgili kütüphane, golbal’e de indirilebilir. İlgili dosya globalde yandaki klasörden erişilebilir==>”/usr/local/lib/node_modules/@aspnet/signalr-client/dist/browser/signalr-client-1.0.0-alpha2-final.min.js“. Bu script dosyasının projede “wwwroot” altında “scripts” klasörü altına kopyalanması gerekmektedir.
  • let connection = new signalR.HubConnection(‘/chat’)“: signalR Chat hub sınıfına bağlanılır.
  • connection.on(‘GetMessage‘, data => {” : Client Side tarafda signalR için function’ın yeni tanımlama şekli budur. “GetMessage()” functionın da, kendisine server side’dan gönderilen mesajları “messageList” id değerine sahip textare’ya eklemektedir.
  • connection.on(‘SetConnectionId‘, data => {” : Client’ın ilk connect olması durumunda, server side tarafındaki “OnConnectedAsync()” methodunda, ilgili bağlanan user’ın browserında çağrılan client side functiondır. Yani, server side taraftan ==> client side tarafa doğru tetiklenen bir functiondır.
  • connection.start()” : Ilgili Chat hub sınıfına bağlanıldığı kısımdır. Bu işlmeden sonra “OnConnectedAsync” methodu tetiklenir ve yeni bağlanan user’ın client side tarafındaki SetConnectionId() function’ı tetiklenerek, yeni alınan ConnectionID konsola yazılır.
  • function SendMessage(){” : Bu functionda da client side taraftan ==> server side tarafa doğru bir tetikleme mevcuttur. Yazılan mesajın tüm clientlara gönderilmesi için server side taraftaki “SendMessage()” methodu, yazılan text parametresi ile birlikte tetiklenir. “textarea”‘daki text mesajın değerinin alınması için $ jquery kullanılmıştır. Yoksa artık signalR paketinin jquery’e ihtiyacı yoktur :)
  • $(document).ready(function() {” : Bu jquery methodunda, sayfa yüklemesi yani render işlemi tamamlandığı zaman, içine mesaj yazılan textarea’ya “keypress()” eventi ile bağlanılır. Bu işlemde eğer basılan tuş “e.which==13” ==> Enter ise “SendMessage()” methodu çağrılır. Yani ilgili mesaj tüm clientlara gönderilir.

Bu makalede kısaca, signalR socket’in .Net Core ile cross platformda nasıl kullanıldığını, kurulumunu ve yapılması gereken configuration işlmelerini, basit bir chat uygulaması üzerinde inceledik.

Geldik bir makalenin daha sonuna. Yeni bir makalede görüşmek üzere hoşçakalın. Proje kodlarına aşağıdaki linkden ulaşabilirsiniz.

Source Code : https://github.com/borakasmer/.NetCore-SignalR-Basic-Chat

Herkes Görsün:

Bunlar da hoşunuza gidebilir...

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir