Angular.js ve SignalR ile gerçek zamanlı mesajlaşma

Merhaba. Asp.net MVC’de Angular.js ve SignalR teknolojilerini kullanarak basit bir gerçek zamanlı mesajlaşma entegresini gerçekleştireceğiz. Ayrıca karşı taraftan mesaj alındığında bir mesaj sesi de eklemiş bulunmaktayız.

Uygulama örneği için http://seize-theday.com web sayfama üye olup daha sonra portal sayfasındaki mesajlaşma entegresini görebilirsiniz.

Öncelikle angular.js ve signalR kütüphanelerinin doğru şekilde indirildiğini varsayıyoruz. Bu iki kütüphanenin gerekli javascript linkleri Layout sayfanızda doğru şekilde sıralanmalıdır.

1.ADIM LİNKLERİ AYARLAMA

Tabi en üstteki Jquery kütüphanesinin en güncel linklini kullanabilirsiniz, benim ki öyle kalmış...

2.ADIM VERİ TABANI TABLOSU

Ben veri tabanı olarak mysql kullanmış bulunmaktayım, mssql kullananlar için bir farklılık yok zaten, tablo bu şekildedir.

3.ADIM ANGULAR KODLARINI YAZMAK

Angular’a geçiş için app.js ve controller.js adlarında 2 tane angular javascript dosyası oluşturmamız gerekiyor.

  • Scripts
    • controller
      • controller.js
      • app.js

şeklinde olmalıdır. App.js’in içinde sadece ufak bir tanımlama yapmamız yeterlidir.

controller.js içinde bir controller oluşturmamız gerekiyor. Mesajlaşmayı hangi sayfada yapmak istiyorsanız o sayfanın adını vermek makul olabilir siz bilirsiniz tabi. controller.js kodları da şu şekildedir. Bu orada kodlara geçmeden öncede gerekli mesajları sql tarafından çekmek için ben angular.js’de birde web api kullandım, web api sayesinde daha hızlı çalıştığına inanmaktayım.

Gördüğünüz gibi controller oluşturmuş bulunmaktayım, görmeniz açısından kodların ekran görüntüsünü aldım, kodların tümünü aşağıdan bulabilirsiniz.

4.ADIM HTML KODLARINI HAZIRLAMAK

Mesajlaşma entegresi için ise html ve css ayarlamalarını yapmak bulunmaktayız. Mesajları göstermek için ng-repeat sayesinde mesajları bir nevi bir foreach döngüsü ile çok kolay bir şekilde gösteriyorum.

Maalesef html kodlarını düzenli bir şekilde buraya yerleştiremiyorum, ama ekran görüntüsünde de açıkça kodlar gözükmektedir. Kodların açıklamalarını bana ulaşarak isteyebilirsiniz.

5.ADIM SIGNALR HUB SINIFI OLUŞTURMAK

  • Hubs
    • ChatHub.cs

ChatHub adlı sınıfımız Hubs adlı klasörün içinde olması gerekiyor. Sınıfı oluştururken normal klasik değilde SignalR Hub Class (v2) olması gerekiyor buna dikkat ediniz lütfen

ChatHub sınıfımız bu şekildedir. Hub adlı interface’dan kalıntı alıyoruz. Projede owin kullanığınızı varsayıyorum, keza SignalR, Owin ile birlikte daha verimli çalışmaktadır. Buradaki amaç kullanıcı her yeni mesaj yazdığında bu mesajı veritabanına kaydediyorum. Repository sayesinde bu işlemleri gerçekleştiriyorum.

6.ADIM Web Api Oluşturmak

Veri tabanındaki girilen mesajların listelenmesi için bir web api oluşturuyoruz. Bu web api’yi angular tarafında şu şekilde kullanıyoruz ;

Yukarı gördüğünüz gibi /api/PortalMessages sayesinde mesajları çekip, $scope.lstMessages = result.data; lstMessages adlı listeye yazıyoruz, ve html tarafında bu listeyi bir foreach olarak kullanıyoruz.

SeizeTheDay.Entities.EntityClasses.MySQL.PortalMessages ise mesajların listelenmesi için bir basit sınıf oluşturdum, aslında direk sınıfı gönderiyorum.

Eğer sorunuz var çekinmeden benimle iletişime geçebilirsiniz. Dediğim gibi takıldığınız yer olursa http://seize-theday.com/ siteye üye olup, portal sayfasındaki uygulama örneğine bakabilirsiniz veya ismaildogaan@gmail.com adlı mail adresime mail atabilirsiniz.

UYGULAMA ÖRNEĞİ

Bu yazı Angular.js, Asp.net MVC, Bilişim, SignalR kategorisine gönderilmiş ve , , , , , , ile etiketlenmiş. Kalıcı bağlantıyı yer imlerinize ekleyin.

Bir cevap yazın

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

Alanı Doldurunuz! *