voryx / angular-wamp Goto Github PK

Hi,
i think this library is missing this function:

http://autobahn.ws/js/reference.html#unregistering

While the documentation in the README.md is helpful. A sub-folder with a working example would be great. With all dependencies (angular, autobahn, angular-wamp) and the html file etc.

For example the lines:

import angular     from 'angular';
import angularWamp from 'angular-wamp';

give error in the browser because they are not pure JS bur rather ES6.

angular-wamp really brings out out the more friendly way of working with wamp but it's a bit difficult to have it working without a complete functional example.

Hi,

I have tried getting AutobahnJS v0.9.9 working with Angular 2, but cannot get it working in the Browser. If you're interested, please see my raised github issue.

It seems silly, but it doesn't seem to recognize a second line of AutobahnJS code (it DOES recognize only 1 line !?!).

Anyway, are there any plans to implement angular-wamp using Angular 2 in the future? Do you have any thoughts on this and/or my issue?

Cheers,
bradws

After connection loss new challenge is sent from server. Promise(onChallengeDeferred) should be reseted so I can resend authorization data from '$wamp.onchallenge' event callback.

One posible solution:

var onChallengeDeferred = $q.defer()

should be moved to function

var onchallenge = function()  (session, method, extra) {
    var onChallengeDeferred = $q.defer() //added
    $rootScope.$broadcast ...

Right now a copy of the autobahnjs script is included in this project. It should be included as a bower dependency instead.

Hard to explain exactly what i meant, but the returned methods (open, setAuthId, ect) use options from the $wampProvider scope rather than using the options set on the current connection (on the $get scope)

this leads to some errors, for me my second connection has "wampcra" with an authid set after the first connection is opened.

The line i'm seeing the error is here: https://github.com/voryx/angular-wamp/blob/master/src/angular-wamp.js#L381

I think options from here needs to be moved to this level

I put a breakpoint in chrome and used the console to print options and connection._options:

> connection._options
Object {url: "ws://localhost:8080/ws", realm: "realm1", authid: "", transports: Array[1]}
> options
Object {url: "ws://localhost:8080/ws", realm: "realm1", prefix: "$wampAuth", authmethods: Array[1], transports: Array[1]}

I have following code in my app.js,

$scope.subscribeTopic = function() {
	$scope.subscription = $wamp.subscribe($scope.topic, function(args, kwargs, details){
		console.log(update);
	});
}

$scope.unsubscribeTopic = function() {
	$scope.subscription.unsubscribe();
}

unsubscribeTopic method is tied to a buttton, but when I click on this button I get following error message,

TypeError: $scope.subscription.unsubscribe is not a function
    at a.$$childScopeClass.$$childScopeClass.$scope.unsubscribeTopic (app.js:51)
    at angular.js:10847
    at f (angular.js:19136)
    at a.$$childScopeClass.$$childScopeClass.$eval (angular.js:12702)
    at a.$$childScopeClass.$$childScopeClass.$apply (angular.js:12800)
    at HTMLButtonElement.<anonymous> (angular.js:19141)
    at HTMLButtonElement.dispatch (jquery-min.js:3)
    at HTMLButtonElement.i (jquery-min.js:3)
(anonymous) @ angular.js:10072
(anonymous) @ angular.js:7364
$apply @ angular.js:12802
(anonymous) @ angular.js:19141
dispatch @ jquery-min.js:3
i @ jquery-min.js:3

am I doing something wrong?

EDIT

I tried with following code as well,

	$scope.unsubscribeTopic = function() {
		$wamp.unsubscribe($scope.subscription);
	}

but then I get following error,

TypeError: a.unsubscribe is not a function
    at angular-wamp.min.js:1
    at angular-wamp.min.js:1
    at F (angular.js:11573)
    at angular.js:11659
    at k.$eval (angular.js:12702)
    at k.$digest (angular.js:12514)
    at a.$$childScopeClass.$$childScopeClass.$apply (angular.js:12806)
    at HTMLButtonElement.<anonymous> (angular.js:19141)
    at HTMLButtonElement.dispatch (jquery-min.js:3)
    at HTMLButtonElement.i (jquery-min.js:3)
(anonymous) @ angular.js:10072
(anonymous) @ angular.js:7364
F @ angular.js:11576
(anonymous) @ angular.js:11659
$eval @ angular.js:12702
$digest @ angular.js:12514
$apply @ angular.js:12806
(anonymous) @ angular.js:19141
dispatch @ jquery-min.js:3
i @ jquery-min.js:3
angular.js:10072 $wamp error Object {type: "unsubscribe", arguments: Arguments[1], error: TypeError: a.unsubscribe is not a function
    at http://localhost:8080/myapp/resources/js/an…}

I haven't dug very deep into this, but it appears that $wamp.onchallenge events are being triggered twice. Just doing this, the console message is output twice:

$scope.$on('$wamp.onchallenge', function (e, data) {
    console.log('foo');
    ...
});

In my particular setup, due to were I was taking the password from, it caused the wrong value to be resolved in the promise and the authentication to fail. Maybe you can see if you can reproduce the event being triggered twice, and if so how to fix that?

As such they don't quite work properly in all cases. $rootScope.$broadcast doesn't automatically trigger digest.

Hi,
I'm having problem to access to $wamp.session after $wamp.open()
I know I'm connected with the WAMP router, I can check it from the router's log. But a

console.log($wamp.session) 

keeps returning null.
I also tried to inspect $wamp object, and I can't find any properties called session... Any suggestion?

This issue had me pulling my hair out. I would recommend updating your docs to:

$scope.$on("$wamp.onchallenge", function (event, data) {
if (data.method === "wampcra"){
return data.promise.resolve(autobahn.auth_cra.sign('someSecret', data.extra.challenge));
}
//You can also access the following objects:
// data.session
//data.extra
});

The app i'm working on only needs a socket connection for one specific part. Our current strategy is to only open a connection when it's required and then close the connection as soon as it's no longer needed.

This strategy worked using 0.0.4, but since updating (to any subsequent version), we've started to get a 'session not open' error when attempting to open any subsequent connections.

I've tracked this down to the fact that sessionDeferred and sessionPromise are instantiated within the scope of $get, but then never re-instantiated for subsequent connections. So once the first connection has been successfully opened, connection.onopen fires and sessionDeferred is resolved. As this controls the queuing action, when the next connection is opened, the queue no longer functions as expected and requests to all actions are immediately executed, before the connection is actually open.

Please – if you have some free time of course – update dependencies (angular and autobahn) in package.json. My problem was this issue. Autobahn 0.9.9 is outdated and does not exclude ws for the browser so JSPM tries to install ws and crashes my app.

Awesome framework. Working well with C# backend Wampsharp.

Anyway, the docs specify providing the Router&Realm literal constants in the 'angular.config(..)'.

I'm wanting to provide these at RUN-TIME (posssibly as constants, not literal strings). I'm openning the connection at 'angular.run(...)' as per the docs, but how do I provide the connection settings after all the angular modules have been loaded? I've played around with '$wamp.connection' but couldn't get it working. (I'm a bit new to angular anyway)

Does the connection settings have to be provided in angular.config(..) ?
Cheers.

I have an application that opens a connection once a user logs in via our apps initial abstract state resolve which calls the following in my service.

// sockets service
if (!this.$wamp.connection.isConnected) {
    this.$wamp.open();
}

It also fires two remote procedure calls at this point to get a list of events and then subscribes to a related channel for subsequent updates I've included one half of this below.

//initial abstract state
resolve: {
            initConnection: ['SocketService', (SocketService) => {
                return Promise.all(
                    [
                        SocketService.openConnection(),
                        SocketService.getInitialEnquiries()
                    ]
                );
            }]


// Socket service
getInitialEnquiries() {
        return this.$wamp.call('store.enquiry.list', [['new', 'cancelled', 'in-progress']]).then(data => {
            return this.EnquiryModel.setCollection(data.result);
        });
    }

subscribeEnquiryStatus() {
        this.$wamp.subscribe('enquiry.channel', args => {
            args.forEach(item => {
                this.EnquiryModel.updateCollectionItem(item.id, item);
            });
        });
    }
//etc etc

We listen for a logout event which we then use to fire a $wamp.close(). This all seems to work fine, but when we login again our initial abstract state resolve fails with the errors session not open for our calls. Once the message that we are connected again is received we can navigate to that state without issue and the calls work fine.

It seems like I need to somehow reset the connection to it's default state in order for it to queue the calls again but I would of thought the close itself would of handled that. Am i doing something wrong here as it seems related to #31

Also in the event that a network error happens and the connection drops I assume i'd need to fire those calls again to make sure my data is up to date but the subscriptions themselves should be still valid unless the connection completely times out and is closed. This will probably lead to similar problem as above.

Any help would be greatly appreciated!

To automatically reconnect after the connection is lost in autobahnjs, you have to return false in the onclose method, like:

connection.onclose = function () {
   return false;
}

Unfortunately, I think there is no way to do this right now in angular-wamp, but I need it in my application. Is there another way, or could we implement it into the library?

Could you please publish the latest version on npm. At the moment of writing current version is 0.3.2, but on npm the latest is 0.1.8.

Hi,

I was trying to uglify my vendor files with gulp.

It produces this error:

GulpUglifyError: unable to minify JavaScript
Caused by: SyntaxError: Unexpected token: name (Commented)

When I tried to remove angular-wamp with my dependency the error is gone.
So I suspect that angular-wamp must be the cause.

Heres my gulp task

//build prod scripts
gulp.task('build', [], function() {

    // build vendors
    var vb = browserify({
        debug: true
    });

    vendors.forEach(function(vendor) {
        vb.require(vendor);
    });

    vb
        .bundle()
        .pipe(source('vendors.js'))
        .pipe(buffer())
        .pipe(uglify({
            mangle: false
        }))
        .pipe(gulp.dest('./web/dist/js/'))
    ;

    var b = browserify({
        entries: './web/app/gol88/app.module.js',
        debug: true,
        paths: ['./web/app/gol88/**/*.js'],
    });

    b.transform(ngAnnotate);

    return b
        .external(vendors)
        .bundle()
        .on('error', swallowError)
        .pipe(source('bundle.js'))
        //.pipe(gAnnotate())
        .pipe(buffer())
        .pipe(uglify({
            mangle: false
        }))
        .on('error', swallowError)
        .pipe(gulp.dest('./web/dist/js/'));
});

Why is that so?

Hi,
error function which we specify for subscribe function is not getting called. Success function is called if subscription is successful.
Following is my code,

$scope.subscription = $wamp.subscribe($scope.topic, function(args, kwargs, details){
	console.log(update);
}).then(
		function (subscription) {
			console.log('Success');
		},
		function (err) {
			console.log('Error' + err);
		}
);

I followed the snippet provided in Autobahn link - http://autobahn.ws/js/reference.html#subscribe

Is this the correct way to use error function or I am doing something wrong?

Is it possible to provide connection alternatives, so if one WAMP-Router is unreachable a connection attempt to another is made?

AutobahnJS seems to provide something like this with transports:

transports: [
      {
         'type': 'websocket',
         'url': 'ws://127.0.0.1:9000/ws'
      },
      {
         'type': 'longpoll',
         'url': 'http://127.0.0.1:9000/lp'
      }
   ],

but if I set these options just connection attempts to the first one will be made.

Wouldn't it be useful to fix the version number of angular?
Now there are two major releases I think it could be useful to set the version to a fixed point.

Hi.

Some (most) of the times when I subscribe to a topic, I want to unsubscribe it when the scope is destroyed.

I did a function that does it on my project, But it will be nice if it will be supported by angular-wamp :

$wamp.subscribeOnScope = function(scope, channel, callback) {
  return $wamp.subscribe(channel, callback).then(function(subscription) {
    scope.$on('$destroy', function() {
      subscription.unsubscribe();
    });
  });
};

b.t.w - If you want, I can pull request it :)

Hi, love this repo, thank you for writing/sharing it!

I'm wondering if you've got any plans to have the ability to manage multiple connections from different WAMP servers. I know it's probably a fringe case, so I don't expect this to be high priority or even on the roadmap.

Here's a use-case, if you're interested:

I have two servers, both on completely separate physical boxes. One of them already talks to my WAMP application using your framework. The other one currently isn't connected, because it appears that $wampProvider's configure only allows 1 connection. I would like to connect the second server as well, if possible with this framework.

We're working on messaging app .
First - I login, and then I'm setting the realm name ('realm_'+username);
Now what I'm doing is
$wamp.connection._ options.realm = 'realm_'+$cookies.get('key');
$wamp.open();
But I think it's not good in practice, because sometimes, when wamp is closing socket and reconnecting - the behavior of socket becomes unpredictable , so your only solution is to restart the page.
Is there any method to set custom realm after login and not doin "$wamp.connection._options.realm " this thingy ?
Because there's method setAuthId and It'll be useful to have a method setRealm.

Is use something like

app.controller('ConnectionMessageCtrl', [
    '$wamp',
    function($wamp) {
      this.connectionEstablished = $wamp.connection.isConnected;
    }

After opening the connection the value connectionEstablished is true but if I cut off my network Angular does not update this value here. I only get a closing message on the console (see line 246 in the source file). It would be nice that the digest cycle is invoked even on close events.

Would you be able to update npm to 0.1.7 please. The current version on there 0.1.5 doesn't include any source files.

Thanks!

Only the angular-wamp client is having trouble with the router that I am using. The issue is only with the subscription, as it is able to publish without error. The issue seems to be with the ID that is returned by the server.

failing transport due to protocol violation: SUBSCRIBED received for non-pending request ID 9223372036854775807

I have tried the fixes proposed on the thruway issues side, and none of them have been effective. The precision setting does not make any difference, and encoding large integers as strings has also failed. The server is currently running on windows 7 x64.

Here is the Autobahn error log.

AutobahnJS debug enabled
autobahn.min.js:33 trying to create WAMP transport of type: websocket
autobahn.min.js:33 using WAMP transport type: websocket
autobahn.min.js:33 WebSocket transport send [1,"realm1",{"roles":{"caller":{"features":{"caller_identification":true,"progressive_call_results":true}},"callee":{"features":{"progressive_call_results":true}},"publisher":{"features":{"subscriber_blackwhite_listing":true,"publisher_exclusion":true,"publisher_identification":true}},"subscriber":{"features":{"publisher_identification":true}}}}]
autobahn.min.js:33 WebSocket transport receive [2,1892156065,{"roles":{"broker":{"features":{"subscriber_blackwhite_listing":true,"publisher_exclusion":true,"subscriber_metaevents":true}},"dealer":{"features":{"caller_identification":true,"progressive_call_results":true}}}}]
angular.js:10264 Congrats!  You're connected to the WAMP server!
autobahn.min.js:33 WebSocket transport send [32,7047175104102400,{},"com.myapp.hello"]
autobahn.min.js:33 WebSocket transport receive [33,"9223372036854775807",3918414]
autobahn.min.js:33 failing transport due to protocol violation: SUBSCRIBED received for non-pending request ID 9223372036854775807
autobahn.min.js:115 Uncaught InvalidAccessError: Failed to execute 'close' on 'WebSocket': The code must be either 1000, or between 3000 and 4999. 1002 is neither.18.a.create.window.c.close @ autobahn.min.js:11516.f._protocol_violation @ autobahn.min.js:8316.f._process_SUBSCRIBED @ autobahn.min.js:8316.f._socket.onmessage @ autobahn.min.js:9418.a.create.window.b.onmessage @ autobahn.min.js:114
angular.js:8644t @ angular.js:8440$get.f @ angular.js:8160n.promise.then.J @ angular.js:11592n.promise.then.J @ angular.js:11592(anonymous function) @ angular.js:11678$get.h.$eval @ angular.js:12769$get.h.$digest @ angular.js:12573$get.h.$apply @ angular.js:12873(anonymous function) @ angular.js:14390e @ angular.js:4498(anonymous function) @ angular.js:4799
autobahn.min.js:33 WebSocket transport send [16,3144473462702080,{},"com.myapp.hello",["Hello World"]]
autobahn.min.js:33 WebSocket transport receive [36,3918414,1216462910,{},["Hello from PHP"]]
autobahn.min.js:33 failing transport due to protocol violation: EVENT received for non-subscribed subscription ID 3918414
autobahn.min.js:115 Uncaught InvalidAccessError: Failed to execute 'close' on 'WebSocket': The code must be either 1000, or between 3000 and 4999. 1002 is neither.

Is it possible to maintain a connection to more than one router?

Hi I have multiple server which have different IPs and ports.
I would like to connect to all of them from the same angular client.
Is that possible?

Is it possible to initialize the provider with async data? (If, for exmaple, I want the user to insert the address of the wamp router)

In reference to #2, I think it would make more sense to use $log.debug instead of console.log. This would then allow me to enable/disable log messages in application configuration with $logProvider. debugEnabled(), rather than having it be based on whether you're using the minified version of the code or not.

please help me. i am stuck with the angular wamp implementation with gosweb socket bundle

The code is like this :

oldsubscription= $wamp.subscribe('xxx',func);
.......



$wamp.unsubscribe(oldsubscription);

that gives an error "subscription.unsubscribe is not a function".

$wamp.unsubscribe(oldsubscription.$$state.value) does not give an error. not sure it is correct usage however.

Am i missing something? Please clarify. IMHO it is a bug.

https://github.com/voryx/angular-wamp/blob/master/src/angular-wamp.js#L399-L401

Suggesting to add:

return subscription;

Currently promise returns undefined. I worked around this with an extension of that method.

Patched:

subscribeOnScope: function (scope, channel, callback) {
    return this.subscribe(channel, callback).then(function (subscription) {
        scope.$on('$destroy', function () {
            return subscription.unsubscribe();
        });
        return subscription;
    });
},

It looks like the wrappers around .call() etc. are not propagating failures; i.e. I can't write:

$wamp.call('foo').then(angular.noop, function (err) { .. });

The .then error callback is never triggered.

Hello,

At the moment I'm trying to connect to two topics on the same WAMP-Server but get this error on start:

Error: [$rootScope:inprog] http://errors.angularjs.org/1.5.5/$rootScope/inprog?p0=%24digest[...]

The shortest code with which I managed to reproduce the error would be:

var app = angular.module("app", ['vxWamp']);
app.config(function ($wampProvider) {
        $wampProvider.init({
            //url: 'ws://127.0.0.1:8080/ws',
            url: 'ws://192.168.0.101:8080/ws',
            realm: 'realm1'
            //Any other AutobahnJS options
        });
    })
    .run(function($wamp){
        $wamp.open();
    });

app.controller('ctrl', function ($scope, $wamp) {   

   function onFirstData(args) {
       console.log('called');     
   }

   function onSecondData(args) {
       console.log('called2');

   }

   $wamp.subscribe('topic1', onFirstData);
   $wamp.subscribe('topic2', onSecondData);
});

I managed to avoid the issue by just subscribing to the second topic a second after the first (with a JS timeout), but wnated to report this nonetheless.

Hi,

I use angular-wamp but i want to create a subscrite all page is not rendered.
Lines used to subscribe to event:

function refreshList(args) {
    console.log('toto');
}
$wamp.subscribe('refresh_add_product', refreshList);

renderd page with this code:

redndered page with wamp.subscribe line commented:

Best regards
Laurent

Hello,

I need to set the caller_disclose_me flat on the session, but it seems that it doesn't work. Do you know why that could be? autobahnjs is on version 0.9.8. (I tried it without angular-wamp on the same server and that works)

$rootScope.$on('$wamp.open', function (event, info) {
    console.log('We are connected to the WAMP Router!', event, info);
    info.session.caller_disclose_me = true;
    $rootScope.$emit('flatoutAuth:connected', info);
});

Thank you very much!

Is wamp fall into category of topic-based publish-subscribe middleware? how is different from content-based publish/subscribe middleware like padres and IBM Gryphon ?

Bower complains that version declared in the bower.json (0.3.0) is different than the resolved one (0.3.1) i. e. the most recent GitHub tag.

I have noticed that if I use this code:

$wamp.call('com.myapp.add2', [2, 3]).then(
      function (res) {
         $scope.add2 = res;
      },
      function(res) {
      //error handler
      }
); 

and I return an error from the server, the error handler is never called.

The problem is related to this line: https://github.com/voryx/angular-wamp/blob/master/src/angular-wamp.js#L311. Indeed, the error part of the Then() is not linked as it should be. The angular doc about $q states that we should use return $q.reject(); in the error block to pass to the next error block. In your case, after the first error block, since we don't call return $q.reject(reason);, the next block is the success one.

Example of chaining:

promiseB = promiseA.then(function(result) {
  // success: do something and resolve promiseB
  //          with the old or a new result
  return result;
}, function(reason) {
  // error: handle the error if possible and
  //        resolve promiseB with newPromiseOrValue,
  //        otherwise forward the rejection to promiseB
  if (canHandle(reason)) {
   // handle the error and recover
   return newPromiseOrValue;
  }
  return $q.reject(reason);
});

I have an issue when handling disconnects and reconnects (unintentional, as in when the network breaks).

When a new connection is established after a disconnect, onOpen is invoked by the $wamp.open event and resubscribes to the channels. This problem occurs when you try to unsubscribe from a channel.

Autobahn will throw an error subscription not active. This is due to that the new id being returned by Autobahn is overwritten by this:

subscription = angular.extend(s, subscription);

Here:

As simple work around I used here is simply removing the old id first.

if (subscription.hasOwnProperty('id')) {
  delete subscription.id;
}

Any thoughts?

I am a newbie on this.

I can make the call with wamp and authenticate. But when I refresh the page I lose my session and will have to login again. This is probably a very basic issue, but comming from a PHP background, a lot is different here.

thank you

Hi,

thanks for creating angular-wamp!

A humble suggestion: Include a production build without console.log() messages or turn of the log in all release versions.

This already does it for me (Gruntfile.js):

        // Minify JavaScript
        uglify: {
            options: {
                preserveComments: 'some',
                compress: {
                    drop_console: true
                }
            },

Hi there,

How would I do something like this:

var conn = new autobahn.Session('ws://localhost:8080',
        function() {
            console.warn('WebSocket connection open');
        },
        function() {
            console.warn('WebSocket connection closed');
        },
        {'skipSubprotocolCheck': true}

I've gotten this example from(http://socketo.me/docs/push).
It's implemented and it works. But now I'm trying to fit this in using angular-wamp.

Can you tell me how I get it working?

It seems like it would be a bit cleaner to use_deferred as $q.defer instead of using $q.when everywhere. Is there a benefit to exposing non-standard types of deferred instances in this context?

Sorry for the issue spam (:

The issue I'm trying to resolve is how to keep a subscription that is persistent across reconnects. Normally, when coding to AutobahnJS, you establish all the subscriptions in the connection.onopen callback.

However, this doesn't work here. If I call $wamp.subscribe, I will have the subscription be made for me as soon as the connection opens via your callback queue, but nothing will happen on reconnect. As such, I'm ending up doing something like this:

        WsBindValue.prototype.init = function () {
            this.subscribe();

            $rootScope.$on(
                '$wamp.open',
                WsBindValue.prototype.subscribe.bind(this)
            );
        };

        WsBindValue.prototype.subscribe = function () {
            $wamp.subscribe(
                this.topic,
                WsBindValue.prototype.onUpdate.bind(this)
            ).then(
                WsBindValue.prototype.onSubscribed.bind(this),
                this.reject
            );
        };

It's a little bit verbose and not very DRY.

One way this could be addressed would be with an alternate subscribePersistent method that takes an additional argument for a callback that lets me attach promises to each subscription attempt, e.g.

$wamp.subscribePersistent(
    topic, handler, options,
    function (subscriptionPromise) {
        subscriptionPromise.then(...);
    }
);

This can then attempt to resubscribe each time we hit $wamp.open. It would take a bit more work to get unsubscribing to work properly.

I would appreciate if you could publish this package to npm for alternative workflows such as browserify and webpack