Merhaba arkadaşlar öncelikle hepinizi saygıyla selamlıyorum :). Bugün sizlerle SignalR teknolojisi ile bir chat uygulaması yapacağız.

SignalR hakkıında detaylı bilgiyi kendi sitesinden yani signalr.net‘ten alabilirsiniz.

Sanırım internette chat uygulamısıyla ilgili türkçe kaynaklarda sadece mesaj gönderme ve mesaj alma fonksiyonları anlatılmış. Bizim yapacağımız ise o an online olan kullanıcıların listesini güncel (gerçek zamanlı) olarak göstermek ve bir grup chat sistemi kurmak.

Ben projeyi Visual Studio 2013’te Framework 4.5.1 ile ASP.NET MVC4 olarak yapacağım .

Öncelikle Boş bir MVC 4 projesi açıp proje ismini verdikten sonra çıkan ekranda Empty ‘yi seçiyoruz.

Create_Project

Projeyi oluşturduktan sonra ilk işimiz SignalR’ı projemize eklemek olacak. Bunun için Tools>NuGet Package Manager yolunu izleyip Package Manager Console’u açıyoruz ve PM> yanına

Install-Package Microsoft.AspNet.SignalR  yazıp enter diyoruz.

Eğer “Successfully added ‘Microsoft.AspNet.SignalR 2.2.0’ to SignalRChatApp.” yazısını görürseniz gerekli dosyalar başırılı bir şekilde yüklenmiş demektir. Ve açılan Readme.txt dosyasınıda kapatabilirsiniz. Solution Explorer penceresine bakacak olursanız bir Scripts klasörü oluştuğunu görürsünüz burda ihtiyacımız olan jquery.js ve jquery.signalR.js dosyalarımız mevcut. Artık başlamaya hazır gibiyiz sanırım. İlk olarak bir controller oluşturuyorum ve Adını HomeController koyuyorum ve buna bağlı bir Index View’i oluşturuyorum. Daha sonra bir Owin Startup Class oluşturmamız gerek bunun için projeye sağ tıklayıp Add New Item diyerek bir Owin Startup class ekleyip adını aynen Startup yapıyoruz ve aşağıdaki kısa kodu ekliyoruz.

startrupArdından projeye sağ tıklayıp bir klasör oluşturup adını Hubs koyuyoruz ve içine yine Add-New Item’den bir adet SignalR Hub dosyası ekliyoruz ve adını ChatHub koyuyoruz.

Bu hub dosyasının içinde dinleyici metodlarımız olacak.

Şimdi sıra tasarımda Index.cshtml dosyasını açıp tasarımı yapalım. Ben solda chat alanı ve sağda online kullanıcılar şeklinde düşündüm.

design

Tasarımda bitti, şimdi biraz çalışma mantığından bahsedeyim. Sayfa ilk açıldığında kullanıcıdan bir isim girmesi istenicek ve ziyaretçi kısmında ismi görünücek.

Önce ChatHub.cs dosyamızı açıp ilk metodumuz olan Connect’i tanımlayalım. Kullanıcı ismini girdiğinde bu metoda girmiş olucak. Aynı zamanda aktif olan kullanıcıları tutacağımız bir class’a ihtiyacımız var .

Screenshot_2

En üstte bir public class oluşturduk ve bir ConnectionId ve bir username alanı oluşturduk.

Bu clasın public static List olarak bir örneğini aldık çünkü her bir kullanıcı eklendiğinde bunun içine ekleyip çıkaracağız. Ardından ilk metodumuz olan Connect’i yazdık Index.cshtml dosyasına yazacağımız javascript kodu ile kullanıcıdan adını aldıktan sonra bu Connect metoduna yollicaz bu metod başta benzersiz bir ConnectionId oluşturacak bu Id ile her kullanıcıya kolayca ulaşabileceğiz. (Bu GuId benzeri birşey olacağı için string yaptım.).AllConnectedUsers.Add içinde yeni kullanıcıyı oluşturuyorum. Clients.Caller.onConnected satırında sadece giriş yapmış kullanıcının  onConnected fonksiyonuna kullanıcı adını ve oluşturulan  ConnectionId’yi gönderiyoruz bunun sebebi client tarafında bunu yakalayıp birer hiddenfield nesnesine yazdıracağız çünkü ileride lazım olacak. Clients.All.showAllUsers satırındada yeni bir kullanıcının geldiğini bütün kullanıcılara duyurmak için clients.all kullanıyoruz , showAllUsers fonksiyonuna o an static classımızda bulunan tüm kullanıcıları gönderiyoruz.

Şimdi Index.cshtml dosyasını açıp yazmaya başlayalım.

html1

 

Öncelikle unutmamanız gereken şey <script src=”/signalr/Hubs”></script> satırı, bu hub dosyamızı bulması için önemli.İkinci işaretli yer ise $.connection.[hub adı] yalnız dikkat etmişsinizdir hub classımızın isminin ilk harfini burda küçük yazmamız gerekiyor. Son işaretli kısımda ise prompt ile aldığımız kullanıcı adını hub.server.connect kodu ile hub daki connect metoduna gönderiyoruz. (hub tarafından çağırılacak olan bir fonksiyon burda hub.client.[fonk_adı] burdan hubtaki bir fonksiyon çağırılacaksa hub.server.[fonk_adı] şeklinde kullanırız.)

Ardından sayfamıza iki adet input hidden nesnesi ekliyoruz birinin adı “hdUserName” diğerinin “hdUserConId” olacak burda kullanıcı bilgilerini tutacağız.Screenshot_1

 

Hidden’ları ekledikten sonra resimdeki onConnected metodunu yazıp parametrelerini username ve connectionId yapıyoruz. server tarafındaki connect metodundan buraya bu parametreleri yolluyoruz.

Burdaki diğer bir fonksiyonumuzda showAllUsers olacak yani bir kullanıcı giriş yaptığında hem ona hemde diğer kullanıcılara bütün kullanıcıları göstereceğiz. Aynı zamanda kullanıcı kendi ismini siyah diğerlerini mavi görecek.

showallusers

 

Gördüğünüz gibi buraya server tarafından bir List<Users> gönderiyoruz ve burda allUsers olarak çekiyoruz tasarımımızdaki kullanıcı listesinin bulunduğu ul nin içini boşaltıp bir for döngüsüyle her kullanıcı için bir <li> oluşturup id’ sini connectionId değerinide UserName yapıyoruz listedeki kullanıcının hangisini siyah yapmamız gerektiğinide önceden adını ve Id sini yazdığımız hidden lardan çekip anlayabiliyoruz.

Unutmadan kullanıcı giriş yaptığı gibi çıkışda yapacak yani pencereyi kapattığında, sayfa yenilendiğinde veya sayfa değiştiğinde otomatik olarak çalışacak olan bir override OnDisconnected metodu var bu metodu yazmak için override yazıp boşluk bıraktığımızda veya boşluktan sonra ctrl+boşluk yaptığımızda önceden tanımlanmış olan metodların listesi gelecektir onDisconnected’ı bulup enter diyelim metodu kendisinin yazdığını göreceksiniz. İçindeki tek satırlık kodun üstüne pencereyi kapatan veya yenileyen vs. kullanıcıyı bulup AllConnectedUsers classımızdan sileceğiz ve client tarafındaki onDisconnected metoduna yönlendirip tasarımsal olarakda o kullanıcının listeden silinmesini sağlayacağız.

sfasdf

Şimdi dediğim gibi client tarafındaki onDisconnected i yazmak için Index.cshtml’ i açalım.

clientondisc

Evet bu kadar basit 😀 Çünkü kullanıcıyı eklerken id’ sini connectionId yaptığımız için burdanda kolayca silebiliyoruz. Şimdi buraya kadar olan kısmı denemek için çalıştıralım. Yanyana iki pencere açıp deniyorum.

 

tets1

Tamamdır. Örn. birinci pencereyi kapattığımızda ikinci penceredende “Emrullah” yazısı siliniyor bunuda yazarak söylim dedim her harekete ekran görüntüsü alamam 😀

Şimdi geriye bir tek chat olayı kaldı buda basit zaten Öncelikle şu fonksiyonu yazalım.

Screenshot_6

 

“Gönder” butonuna tıklandığında hdUserName ‘den kulanıcı adını , txtMsg ‘ den de gönderilecek mesajı aldıktan sonra server tarafında oluşturacağımız sendMessage metoduna gönderiyoruz.

 

img

Parametre olarak mesaj metni ve kullanıcı adı geliyor. Bunları clienttaki sendmessage fonksiyonuna yolluyorum.

Daha sonra Index.cshtml’ e  sendmessage fonksiyonunu oluşturuyorum.

Screenshot_5

 

Gelen kullanıcı adı ve mesajı append ile .groupmessages içindeki ul’ ye bastırıyorum.

Son olarak bununda testini yapıp kapatalım 😀 .

finish

Evet örnekte atılan trip dışında herşey güzel. SihnalR’ ı oyunlar dahil bir çok yerde kullanabilirsiniz. Sorusu olan varsa sorabilir. Yararlı olması dileğimle, hadi görüşürüz 😀

Facebook'dan yorumla