Saturday, August 16, 2014

Initialize SignalR hub within controller of AngularJS

In this example we will see how SignalR and AngularJS fits side by side in single application. We know that SignalR is the microsoft’s solution to push data from server and AngularJS is google’s solution to implement MVC architecture in client code.


From my personal experience I can say that, both the technologies are just awesome and they work cool together.

So, let’s start with code implementation. Take one MVC or Web Form application and give reference of SignalR hub. The latest version of SignalR at the time of writing this article is 2.0
Once the hub created, just create one hub class (I have created chatHub) and derive it from Hub.  In The hub class is located in below namespace.

using Microsoft.AspNet.SignalR.Hubs;

Again,the Hub class is derived from BaseHub class. which is the parent class of all. Here is our simple hub implementation.


    [HubName("chatHub")]
    public class chatHub : Hub
    {

        public void broadcastHello()
        {
            Clients.All.receiveHello("Welcome to Hub");
        }
    }

Fine, now we will implement controller in AngularJS where we are going to consume hub function. So proxy will create within controller.
Let’s define one module which we will use in application. Here is “myApp” module

var app = angular.module('myApp', []);

Let’s attach one controller to the module. Here we have implemented “dataService” controller. Have a look on below code.


app.controller('dataService', function ($scope) {

    var proxy = $.connection.chatHub;

    $.connection.hub.start().done(function () {
        console.log('Hub Connected');
    });

    //listener to hub
    proxy.client.receiveHello = function (message) {
        alert(message);
    }

    //call hub method from here.
    $scope.getMessage = function () {
        proxy.server.broadcastHello();
    };

});


Just have a look that, we have created proxy to chatHub on fly and assigned to proxy object. There are two methods which is defined associated with scope of angular controller.

The receiveHello function will listen to hub and hub can able to invoke it from server side and the getMessage will ca;; broadcastHello() function which we have defined to hub class.

Now, we will implement the client page from where we will invoke controller function.


@{
    Layout = null;
}
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Data</title>
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/jquery-1.6.4.min.js"></script>
    <script src="~/Scripts/jquery.signalR-2.1.1.min.js"></script>
    <script src="~/signalr/hubs"></script>
    <script src="~/Scripts/SignalRHub.js"></script>

</head>
<body>
    <div>
    <body ng-controller="dataService">

        <input type="button" name="gatdata" value="Get Data" ng-click="getMessage()" />
    </body>
    </div>
</body>
</html>

Once we click on the button, it will invoke getMessage function and will call to boradcastHello()  function. You should see the below output, if everything goes well.



No comments:

Post a Comment