SignalR i AngularJS – Związek doskonały

Mniej więcej 3 miesiące temu zainteresowałem się biblioteką SignalR i bardzo szybko stała się ona jednym z moich ulubionych narzędzi. Z mojego polecenia skorzystało z niej kilka osób i każdy chwalił ją za bardzo szybkie widoczne efekty i banalną implementację. O czym nie wspomniałem w poprzednich postach, to połączenie SignalR z jednym z najpopularniejszych obecnie frameworków JavaScriptowych – AngularJS.

Na samym początku podlinkuję swój pierwszy i drugi post o SignalR ze wspomnianego okresu, które dosyć szybko wprowadzają w temat i przedstawiają podstawowe funkcjonalności biblioteki. Jednakże wszystko oparte jest o jQuery i chociaż nie jest to antyczna technologia, to o wiele lepiej i dynamiczniej wypada połączenie możliwości jakie oferuje nam SignalR z funkcjonalnością Angulara.

Jeśli znamy choćby podstawy Angulara, to podpięcie do niego SignalR nie będzie stanowiło żadnego problemu. Wystarczy tylko przekazać obiekt jQuery do kontrolera jako serwis. Zdecydowanie najszybszym rozwiązaniem jest użycie angularowej funkcji value. Zaczynamy standardowo od otwarcia połączenia z hubem.

$(function(){
  $.connection.hub.start();
});

$(function(){

$.connection.hub.start();

});

Obiekt, który w naszym Javascripcie reprezentuje hub zamiast tak jak poprzednio przypinać do zmiennej przekazujemy do funkcji value. Pierwszym parametrem jest nazwa, pod którą będzie dostępny nasz serwis, drugim obiekt, z którego go utworzymy.

angular.module("app").value("hubServiceName", $.connection.samplehub);

1	angular.module("app").value("hubServiceName", $.connection.samplehub);

Tak stworzony serwis przekazujemy do kontrolera jako zależność i możemy go wykorzystywać do nasłuchiwania co słychać w wielkim świecie.

angular.module("app").controller("someController", function ($scope, hubServiceName) {
     $scope.msgFromHub = "";

     hubServiceName.client.someHubMethod = function hubMethodInvoked(data){          
          $scope.msgFromHub = data;
     };
});

angular.module("app").controller("someController", function ($scope, hubServiceName) {

$scope.msgFromHub = "";

hubServiceName.client.someHubMethod = function hubMethodInvoked(data){

$scope.msgFromHub = data;

};

});

Wywoływanie metod z huba jest równie proste:

$scope.sendSomething = function(){     
    hubServiceName.server.sendMessage("Message to Hub!");
}

$scope.sendSomething = function(){

hubServiceName.server.sendMessage("Message to Hub!");

}

Taką funkcję możemy podpiąć tak naprawdę gdziekolwiek, pod ng-click, ng-blur lub jakiegoś watcha. Możliwości są naprawdę duże, a łatwość połączenia Angulara z SignalR i ogólnie niski próg wejścia sprawia, że jest to nie tylko ciekawe zagadnienie do eksperymentów, ale też rozwiązanie, które szybko i bezproblemowo możemy wdrożyć do komercyjnego projektu bez większych poślizgów.