Comments on My online Notebook: A Better Way of Using ASP.NET SignalR With Angular JS

nice post thanks for sharing Education Technolog...

2018-12-11T03:42:29.477-08:00

nice post thanks for sharing

Education
Technology

Thanks for the information bro/., A clear post to ...

2017-03-31T06:23:06.051-07:00

Thanks for the information bro/., A clear post to know about the subject. While it is not intended- and surely beyond the scope of this ebook - to give an introduction or even deep dive into SignalR, we need to have a look at some concepts and code in order to realize a smooth integration of SignalR and AngularJS.

Hi Ravi I'm using angular ,jquery and signal ...

2016-12-20T22:30:14.144-08:00

Hi Ravi
I'm using angular ,jquery and signal together for my project but When I try to create hub connection using angular factory approach I am seeing different connections ids getting instead of connection being singleton !!Do we have any solution or any sample code with above posted example .
Any help on this very much appreciated!!

thanks for the informative post on angularjs

2016-12-02T05:40:29.009-08:00

thanks for the informative post on angularjs

For those who would like the complete html/js to m...

2016-05-19T10:18:48.746-07:00

For those who would like the complete html/js to make this sample work...this example requires the controller be added to the 'app' variable as the snippet in the article does not work as shown.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.6.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="Scripts/jquery.signalR-2.2.0.min.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="SignalRAngularCtrl">
<input type="button" name="GreetAll" value="GreetAll" data-ng-click="greetAll()" />
<span>{{text}}</span>
</div>

<script>
var app = angular.module('app', []);
app.value('$', $);
app.service('signalRSvc', function ($, $rootScope) {
proxy: null;
var initialize = function () {
connection = $.hubConnection();
this.proxy = connection.createHubProxy('myHub');
connection.start();
this.proxy.on('acceptGreet', function (message) {
$rootScope.$emit("acceptGreet", message);
});
};

var sendRequest = function () {
this.proxy.invoke('greetAll');
};

return {
initialize: initialize,
sendRequest: sendRequest
};
});

app.controller('SignalRAngularCtrl', function ($scope, signalRSvc, $rootScope) {
$scope.text = "";

$scope.greetAll = function () {
signalRSvc.sendRequest();
}

updateGreetingMessage = function (text) {
$scope.text = text;
}

signalRSvc.initialize();

$scope.$parent.$on("acceptGreet", function (e,message) {
$scope.$apply(function () {
updateGreetingMessage(message);
});
});
});
</script>
</body>
</html>

How to wirte jasmine unit test cases for signalr s...

2016-02-01T03:30:27.711-08:00

How to wirte jasmine unit test cases for signalr service?

I am using angularjs and Entity framework 6 with s...

2015-09-01T04:24:24.759-07:00

I am using angularjs and Entity framework 6 with signalR. The issue I facing is, the sqldependency doesn't triggers on data change. Please let me know if i need to change anything else,

Nice article.....

2015-08-30T23:34:58.370-07:00

Nice article.....

Hi Ravi, Don't you need to declare your metho...

2015-03-13T18:49:42.871-07:00

Hi Ravi,

Don't you need to declare your method before you start the connection ? I specifically remember that this was said during an intro to SignalR in the MS virtual academy.

So the code should be in this order :

//Publishing an event when server pushes a greeting message
this.proxy.on('acceptGreet', function (message) {
$rootScope.$emit("acceptGreet",message);
});
//Starting connection
connection.start();

I personally tried your code and it didn't work until i switched these parts.

Sure. I am working on a sample that will cover som...

2015-01-27T06:55:19.566-08:00

Sure. I am working on a sample that will cover some of the latest updates in both technologies. Will post them in some time. Stay tuned.

More samples with code.?

2015-01-24T12:26:24.998-08:00

More samples with code.?

Hi Ravi, I had to make the following changes to g...

2015-01-02T20:26:17.149-08:00

Hi Ravi,

I had to make the following changes to get this to work for cross domain (PhoneGap/ Cordova). Hope this helps others...

.factory('SignalRSvc', function ($, $rootScope, applicationConfig) {
var proxy = null;
var initialize = function(){
$.getScript( applicationConfig.apiUrl + 'signalr/hubs', function () {
$.connection.hub.url = applicationConfig.apiUrl + 'signalr';
proxy = $.connection.signalRMessageServiceProviderHub;
$.connection.hub.url = applicationConfig.apiUrl + 'signalr/hubs'

proxy.on('acceptGreet', function (message) {
$rootScope.$emit("acceptGreet",message);
});

$.connection.hub.start().done(function () {
proxy.server.greetAll();
});
});

};
var sendRequest = function () {
proxy.invoke('greetAll');
};
return {
initialize: initialize,
sendRequest: sendRequest
};

})

Hi, Thanks for the update. Yes, Angular 1.3 doesn...

2014-12-19T06:03:54.272-08:00

Hi,

Thanks for the update. Yes, Angular 1.3 doesn't allow global functions as controllers and that is the recommended way of creating a controller. I will update the post accordingly.

It's ok I got it working. I had to change the ...

2014-12-19T05:01:31.928-08:00

It's ok I got it working. I had to change the controller thus:

app.controller('StockTickerCtrl', ['$scope','stockTickerData', function ($scope, stockTickerData) { ... }]);

Hi Ravi, very useful post but I can't make thi...

2014-12-18T11:42:40.233-08:00

Hi Ravi, very useful post but I can't make this work with angular 1.3.7. I am a total angular newb. Something seems to be stopping the controller from executing. Any ideas why?

2014-04-05T04:38:30.054-07:00

This comment has been removed by the author.

Binh, I agree. That's a good point. It makes ...

2014-01-25T07:06:35.512-08:00

Binh,

I agree. That's a good point. It makes sense to have all client callbacks created before starting connection as the callbacks can be invoked at any point from the server.

Jason, Yes, I used $emit as it would be listened ...

2014-01-25T07:01:37.323-08:00

Jason,

Yes, I used $emit as it would be listened only through $rootScope. $broadcast bubbles the event to scopes at all levels, which would slow down in large scale.

Thanks for the suggestion. I could use $rootScope.$on as well, scope.$parent is something you won't like to use in a real app. I used it to just make aware that a parent scope can be accessed using the $parent property as well.

Hi, you must define functions that the hub can cal...

2014-01-24T23:30:16.537-08:00

Hi, you must define functions that the hub can call back befor connection.start().
http://www.asp.net/signalr/overview/signalr-20/hubs-api/hubs-api-guide-javascript-client#cantusegenproxy

Just a question and a comment. Did you use $emit i...

2014-01-24T10:50:51.782-08:00

Just a question and a comment. Did you use $emit instead of $broadcast so that the event would only be published on $rootScope?

Also, wouldn't it be a little cleaner to use $rootScope.$on instead of scope.$parent.$on?

Thanks for the post!

How about creating an open source project where we...

2013-12-09T02:21:58.886-08:00

How about creating an open source project where we can include all of these approaches? Anyone with a new idea can send a pull request and contribute code to it.

Austin, You can find the server code in the follo...

2013-12-05T22:05:57.819-08:00

Austin,

You can find the server code in the following post: http://sravi-kiran.blogspot.com/2013/05/HookingUpAspNetSignalRWithAngularJS.html

You can find a more advanced sample in this github repo: https://github.com/sravikiran/SignalRAngularJSStockTicker

If you still need any specific help, shoot me a mail using the contact me link at the top. I will be happy to help :)

Could you post the server code or whole project?

2013-12-05T07:12:28.685-08:00

Could you post the server code or whole project?

As an addition to that: with this approach there i...

2013-12-02T03:14:48.098-08:00

As an addition to that: with this approach there is a possibility of collision with names. In example name 'aceptGreet' can already emitted in some other module for different purpose.

To solve that how about adding 2 additional methods in service:
var prefix = "myGreatPrefix."
var $emit = function (name, args) {
$rootScope.$apply(function () {
$rootScope.$emit(prefix + name, args);
});
};

var $on = function (name, listener) {
$rootScope.$on(prefix + name, listener);
};

In that case you would use call to service

sigalRSvc.$on("greeting", function (e, message) {
console.debug(message);
});

Thanks Juan. This approach makes the things cleane...

2013-11-12T12:15:35.355-08:00

Thanks Juan. This approach makes the things cleaner!