Skip to content

Commit

Permalink
Initial Commit
Browse files Browse the repository at this point in the history
  • Loading branch information
davidwdan committed Oct 4, 2014
0 parents commit 0c09005
Show file tree
Hide file tree
Showing 9 changed files with 1,198 additions and 0 deletions.
2 changes: 2 additions & 0 deletions .gitignore
@@ -0,0 +1,2 @@
node_modules
.tmp
161 changes: 161 additions & 0 deletions Gruntfile.js
@@ -0,0 +1,161 @@
/* global module */
module.exports = function (grunt) {
'use strict';

grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
meta: {
banner: 'Angular WAMP v2'
},

// merge files from src/ into angular-wamp.js
concat: {
app: {
//options: {banner: '<%= meta.banner %>'},
src: [
'src/autobahn.min.js',
'src/angular-wamp.js'
],
dest: 'release/angular-wamp.js'
}
},

// Run shell commands
shell: {
options: {
stdout: true
},
protractor_install: {
command: 'node ./node_modules/protractor/bin/webdriver-manager update'
},
npm_install: {
command: 'npm install'
},
bower_install: {
command: 'bower install'
}
},

// Create local server
connect: {
testserver: {
options: {
hostname: 'localhost',
port: 3030
}
}
},

// Add Angular Annotations
ngAnnotate: {
options: {
preserveComments: 'none'
},
app: {
files: {
'release/angular-wamp.js': ['release/angular-wamp.js']
}
}
},

// Minify JavaScript
uglify: {
options: {
preserveComments: 'some'
},
app: {
files: {
'release/angular-wamp.min.js': ['release/angular-wamp.js']
}
}
},

// Auto-run tasks on file changes
watch: {
scripts: {
files: ['src/*.js', 'tests/unit/**/*.spec.js', 'tests/lib/**/*.js', 'tests/mocks/**/*.js'],
tasks: ['test:unit', 'notify:watch'],
options: {
interrupt: true,
atBegin: true
}
}
},

// Unit tests
karma: {
options: {
configFile: 'tests/automatic_karma.conf.js'
},
manual: {
configFile: 'tests/manual_karma.conf.js'
},
singlerun: {},
watch: {
autowatch: true,
singleRun: false
},
saucelabs: {
configFile: 'tests/sauce_karma.conf.js'
}
},

// End to end (e2e) tests
protractor: {
options: {
configFile: "tests/local_protractor.conf.js"
},
singlerun: {},
saucelabs: {
options: {
configFile: "tests/sauce_protractor.conf.js",
args: {
sauceUser: process.env.SAUCE_USERNAME,
sauceKey: process.env.SAUCE_ACCESS_KEY
}
}
}
},

// Desktop notificaitons
notify: {
watch: {
options: {
title: 'Grunt Watch',
message: 'Build Finished'
}
}
}
});

require('load-grunt-tasks')(grunt);

// Installation
grunt.registerTask('install', ['shell:protractor_install']);
grunt.registerTask('update', ['shell:npm_install', 'shell:bower_install']);

// Single run tests
grunt.registerTask('test', ['test:unit', 'test:e2e']);
grunt.registerTask('test:unit', ['karma:singlerun']);
grunt.registerTask('test:e2e', ['connect:testserver', 'protractor:singlerun']);
grunt.registerTask('test:manual', ['karma:manual']);

// Travis CI testing
grunt.registerTask('test:travis', ['build', 'test:unit']);

// Sauce tasks
grunt.registerTask('sauce:unit', ['karma:saucelabs']);
grunt.registerTask('sauce:e2e', ['connect:testserver', 'protractor:saucelabs']);

// Watch tests
grunt.registerTask('test:watch', ['karma:watch']);
grunt.registerTask('test:watch:unit', ['karma:watch']);

// Build tasks
grunt.registerTask('build', ['concat', 'ngAnnotate', 'uglify']);

// Default task
grunt.registerTask('default', ['build', 'test']);

grunt.loadNpmTasks('grunt-ng-annotate');
};
135 changes: 135 additions & 0 deletions README.md
@@ -0,0 +1,135 @@

# AngularWAMP

AngularWAMP is an AngularJS wrapper for [AutobahnJS](https://github.com/tavendo/AutobahnJS) (v 0.9.5) for WAMP v2 (Web Application Messaging Protocol).

It simplifies getting WAMP v2 integrated into your AngularJS application. For the most part, it's works just like AutobahnJS, with a couple of angular related changes, which are noted below.



## Installing AngularWAMP

You can [download](https://github.com/voryx/angular-wamp/archive/master.zip) the zip file or install AngularWAMP via [Bower](http://bower.io/#install-bower):

```bash
$ bower install angular-wamp --save
```

To use AngularWAMP in your project, you need to include the following files in your HTML:

```html
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

<!-- AngularWAMP -->
<script src="bower_components/angular-wamp/release/angular-wamp.min.js"></script>
```
The angular-wamp.min.js file includes a copy of AutobahnJS, so you don't need to include that separately.

## Documentation

### Configuration

Before you can use AngularWAMP, you have to inject the 'vxWamp' module into your application.

```Javascript
var app = angular.module("myApp", ["vxWamp"]);
```

Then configure the connection settings, by passing an options object to ``$wampProvider.init()``.

```Javascript
app.config(function ($wampProvider) {
$wampProvider.init({
url: 'ws://127.0.0.1:9000/',
realm: 'realm1'
//Any other AutobahnJS options
});
})
```

Now the $wamp service is available to be injected into any controller, service or factory.

```Javascript
app.controller("MyCtrl", function($scope, $wamp) {

// 1) subscribe to a topic
function onevent(args) {
$scope.hello = args[0];
}
$wamp.subscribe('com.myapp.hello', onevent);

// 2) publish an event
$wamp.publish('com.myapp.hello', ['Hello, world!']);

// 3) register a procedure for remoting
function add2(args) {
return args[0] + args[1];
}
$wamp.register('com.myapp.add2', add2);

// 4) call a remote procedure
$wamp.call('com.myapp.add2', [2, 3]).then(
function (res) {
$scope.add2 = res;
});
});
```

You'll notice that we did not need to wait for the connection to be established before making WAMP calls. That's because, all requests are queued until a connection is established.

### Events
One area that AngularWAMP differs from AutobahnJS, is in how ``onclose`` and ``onopen`` are handled. In AngularWAMP, they're events that are emitted globally. This has the added benefit of allowing the entire app be aware of the connection state.

```Javascript
app.controller("MainCtrl", function($scope, $wamp) {
$scope.$on("$wamp.open", function (event, session) {
console.log('We're connected to the WAMP Router!');
});
$scope.$on("$wamp.close", function (event, data) {
$scope.reason = data.reason;
$scope.details = data.details;
});
});
```
###Authentication
The other major change from AutobahnJS is authentication. The auth methods can be added to the connection options through the ``$wampProvider`` within ``.config()``.
```Javascript
app.config(function ($wampProvider) {
$wampProvider.init({
url: 'ws://127.0.0.1:9000/',
realm: 'realm1'
authmethods: ["myauth"]
});
})
```
If the router sends a Challenge Message, it gets emitted with the event ``$wamp.onchallange`` that has to return a promise.
note: This will probably change in the future, if I can figure out a better way to do this.
```Javascript
$scope.$on("$wamp.onchallenge", function (event, data) {
if (data.method === "myauth"){
return data.promise.resolve("some_sercet");
}
//You can also access the following objects:
// data.session
//data.extra
});
```
###Other Properties
You can also access the ``connection`` and ``session`` through the ``$wamp`` service:
```Javascript
$thruway.session;
$thruway.connection;
```
For more information, you can reference the AutobahnJS [documentation](http://autobahn.ws/js/reference.html).
29 changes: 29 additions & 0 deletions bower.json
@@ -0,0 +1,29 @@
{
"name": "angular-wamp",
"version": "0.0.1",
"main": "./release/angular-wamp.min.js",
"authors": [
"David Dan <davidwdan@gmail.com>"
],
"description": "Angular library for Autobahn.js (WAMP v2)",
"keywords": [
"WAMP",
"websockets",
"AutobahnJS",
"Thruway",
"Ratchet"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"app/bower_components",
"test",
"tests"
],
"dependencies": {
"angular": ">= 1.2.0",
"autobahnjs": "./include/autobahn.min.js"
}
}
56 changes: 56 additions & 0 deletions package.json
@@ -0,0 +1,56 @@
{
"name": "angular-wamp",
"description": "Angular library for Autobahn.js (WAMP v2)",
"version": "0.0.1",
"author": "David Dan <davidwdan@gmail.com>",
"homepage": "https://github.com/voryx/angular-wamp",
"repository": {
"type": "git",
"url": "https://github.com/voryx/angular-wamp.git"
},
"licenses": [
{
"type": "MIT"
}
],
"keywords": [
"WAMP",
"websockets",
"Autobahn",
"Thruway",
"Ratchet"
],
"main": "dist/angular-wamp.min.js",
"files": [
"dist/**",
"LICENSE",
"README.md",
"package.json"
],
"devDependencies": {
"grunt": "^0.4.1",
"grunt-autoprefixer": "^0.7.3",
"grunt-concurrent": "^0.5.0",
"grunt-contrib-clean": "^0.5.0",
"grunt-contrib-concat": "^0.4.0",
"grunt-contrib-connect": "^0.7.1",
"grunt-contrib-copy": "^0.5.0",
"grunt-contrib-cssmin": "^0.9.0",
"grunt-contrib-htmlmin": "^0.3.0",
"grunt-contrib-imagemin": "^0.7.0",
"grunt-contrib-jshint": "^0.10.0",
"grunt-contrib-uglify": "^0.4.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-filerev": "^0.2.1",
"grunt-google-cdn": "^0.4.0",
"grunt-newer": "^0.7.0",
"grunt-ng-annotate": "^0.4.0",
"grunt-svgmin": "^0.4.0",
"grunt-usemin": "^2.1.1",
"grunt-wiredep": "^1.7.0",
"jshint-stylish": "^0.2.0",
"load-grunt-tasks": "^0.4.0",
"time-grunt": "^0.3.1"
}
}

0 comments on commit 0c09005

Please sign in to comment.