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.
Github hesabımdan örnek projeyi indirebilirsiniz. Veritabanı işlemleri için benimle iletişime geçin, zira projede Mysql veri tabanı kullandım.
Ö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
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
- controller
şeklinde olmalıdır. App.js’in içinde sadece ufak bir tanımlama yapmamız yeterlidir.
var app = angular.module("startupController"]);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.
//Portal Controller
app.controller('PortalCtrl', function ($scope, $http) {
$('#chat-box').animate({ scrollTop: $('#chat-box').prop("scrollHeight") }, 50);
$scope.userName = null;
$scope.chatHub = null; // holds the reference to hub
$scope.soundObject = null;
$scope.chatHub = $.connection.chatHub; // initializes hub
$.connection.hub.start(); // starts hub
// register a client method on hub to be invoked by the server
$scope.chatHub.client.addNewMessage = function (name, message) {
$scope.playSound();
$scope.getAllPortalMessages();
$scope.$apply();
};
$scope.createMessage = function (obj) {
// sends a new message to the server
var text = $('input[name="text-message"]').val();
$scope.userName = obj;
$scope.chatHub.server.send($scope.userName, text);
};
$scope.init = function () {
$scope.model = {
MessageID: 0,
PortalMessageUserID: '',
TextMessage: '',
SendDate: null,
UserID: '',
UserName: '',
PhotoPath: '',
TagUserName: '',
TagColor: ''
};
//for display message
$scope.flgMessage = false;
//for message
$scope.message = "";
$scope.getAllPortalMessages();
};
//Hide alert message
$scope.hideMessage = function () {
//make message flg false for hide message
$scope.flgMessage = false;
$("#message").removeClass("alert alert-success").removeClass("alert alert-danger");
$("#icon").removeClass("fa-check").removeClass("fa-ban");
};
$scope.getAllPortalMessages = function () {
$http.get("/api/PortalMessages").then(function (result) {
$('input[name="text-message"]').val("");
$scope.lstMessages = result.data;
$('#chat-box').animate({ scrollTop: $('#chat-box').prop("scrollHeight") }, 50);
});
};
$scope.playSound = function () {
var media = document.getElementById("play");
media.pause();
const playPromise = media.play();
if (playPromise !== null) {
playPromise.catch(() => { media.play(); })
}
};
//if the user presses enter button from a keyboard
$scope.keyDown = function (obj,userName) {
if (obj.keyCode == 13) {
$scope.createMessage(userName);
}
};
$scope.deleteMessage = function (obj) {
console.log(obj); //not completed yet
};
//Reset data
$scope.reset = function () {
$scope.model = {
MessageID: 0,
PortalMessageUserID: '',
TextMessage: '',
SendDate: null,
UserID: '',
UserName: '',
PhotoPath: '',
TagUserName: '',
TagColor: ''
};
};
$scope.init();
});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
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 ;
//web apiden mesajları çekiyoruz.
$scope.getAllPortalMessages = function () {
$http.get("/api/PortalMessages").then(function (result) {
$('input[name="text-message"]').val("");
$scope.lstMessages = result.data;
$('#chat-box').animate({ scrollTop: $('#chat-box').prop("scrollHeight") }, 50);
});
};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.
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Ğİ
