https://github.com/roylee0704/angular-signalr
Signalr.NET component for AngularJS
https://github.com/roylee0704/angular-signalr
Last synced: 7 days ago
JSON representation
Signalr.NET component for AngularJS
- Host: GitHub
- URL: https://github.com/roylee0704/angular-signalr
- Owner: roylee0704
- License: mit
- Created: 2015-05-12T06:58:45.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2016-02-23T15:47:51.000Z (about 9 years ago)
- Last Synced: 2025-03-29T01:34:37.508Z (24 days ago)
- Language: JavaScript
- Homepage:
- Size: 57.6 KB
- Stars: 21
- Watchers: 5
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# angular-signalr
[](https://travis-ci.org/roylee0704/angular-signalr)
[](https://codeclimate.com/github/roylee0704/angular-signalr)
[](https://coveralls.io/r/roylee0704/angular-signalr?branch=master)
[](https://gemnasium.com/roylee0704/angular-signalr)
Bower Component for using AngularJS with [SignalR.NET](http://signalr.net/).
## Install
1. `bower install angular-signalr` or [download the zip](https://github.com/roylee0704/angular-signalr/archive/master.zip).
2. Make sure the SignalR.NET client lib is loaded.
3. Include the `jquery.signalR.min.js` script provided by this component into your app.
4. Add `roy.signalr-hub` as a module dependency to your app.
## Usage
This module exposes a `hubFactory`, which is an API for instantiating
signalr-hubs that are integrated with Angular's digest cycle.
### Making a Hub Instance
```javascript
// in the top-level module of the app
angular.module('myApp', [
'roy.signalr-hub',
'myApp.MyCtrl'
]).
factory('myHub', function (hubFactory) {
return hubFactory('yourHubName');
});
```
With that, you can inject your `myHub` service into controllers and
other serivices within your application!
## API
For the most part, this component works exactly like you would expect. The only API
addition is `hub.forward`, which makes it easier to add/remove listener in a way that
works with [AngularJS's scope](https://docs.angularjs.org/api/ng/type/$rootScope.Scope)
### `hub.on`
Takes an event name and callback.
Works just like the method of the same name from SignalR.NET.
### `hub.off`
Takes an event name and callback.
Works just like the method of the same name from SignalR.NET.
### `hub.invoke`
Sends a message to the server.
Works just like the method of the same name from SignalR.NET.
### `hub.forward`
`hub.forward` allows you to forward the events received by SignalR.NET's hub to
AngularJS's event system. You can then listen to the event with `$scope.on`. By default,
hub-forwarded events are namespaced with `hub:`.
The first argument is a string or array of strings listing the event names to be forwarded.
The second argument is optional, and is the scope on which the event are to be broadcasted. If
an argument is not provided, it defaults to `$rootScope`. As a reminder, broadcasted events are
propagated down to descendant scopes.
#### Example
An easy way to make hub events available across your app:
```javascript
//in the top level module of the app
angular.module('myApp', [
'roy.signalr-hub',
'myApp.MyCtrl'
]).
factory('myHub', function(hubFactory) {
var myHub = hubFactory();
myHub.forward('interesting-event');
return myHub;
});
angular.module('myApp.MyCtrl', []).
controller('MyCtrl', function() {
$scope.$on('hub:interesting-event', function(ev, data) {
});
});
```
### `hubFactory(hubName, { hub: }}`
The first argument: `hubName` is a required parameter, it specifies the name of the Hub that you have created on the Server.
For next argument is optional, this option allows you to provide the `hub` service with a `SignalR.NET hub` object to be used internally.
This is useful if you want to connect on a different path, or need to hold a reference to the `SignalR.NET hub` object for use elsewhere.
#### Example
```javascript
angular.module('myApp', [
'roy.signalr-hub'
]).
factory('myHub', function (hubFactory) {
var mySpecialHub = $.hubConnection('/some/path', {useDefaultPath: false});
myHub = hubFactory('yourHubName', {
hub: mySpecialHub
});
return myHub;
});
```
### `hub.error`
A handler for error events.
Works just like the method of the same name from SignalR.NET.
#### Example
```javascript
angular.module('myApp', [
'roy.signalr-hub'
]).
factory('myHub', function (hubFactory) {
myHub = hubFactory('yourHubName');
return myHub;
}).
controller('MyCtrl', function (myHub) {
myHub.error(function (error) {
console.log('SignalR error: ' + error)
});
});
```
### `hub.stateChanged`
Raised when the connection state changes.
Works just like the method of the same name from SignalR.NET.
#### Example
```javascript
angular.module('myApp', [
'roy.signalr-hub'
]).
factory('myHub', function (hubFactory) {
myHub = hubFactory('yourHubName');
return myHub;
}).
controller('MyCtrl', function (myHub) {
myHub.stateChanged(function(state){
switch (state.newState) {
case $.signalR.connectionState.connecting:
//your code here
break;
case $.signalR.connectionState.connected:
//your code here
break;
case $.signalR.connectionState.reconnecting:
//your code here
break;
case $.signalR.connectionState.disconnected:
//your code here
break;
}
});
});
```