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