angular service for autobahn?

[Greg Fausak]

I guess the subject says it all :-)

Is there an angularjs service already defined for autobahn?  Is anybody using angular with autobahn?

-g

[Tobias Oberstein]

Hi Greg,

there is whole integration library for Sencha ExtJS
(https://github.com/tavendo/AutobahnExtJS) which is MVC based, and we've
been using AutobahnJS alot with KnockoutJS which is MVVM based.

I am not aware of an AngularJS integration library though. I guess it
could be done .. well, obviously;)

/Tobias

>
> -g
>
> --
> You received this message because you are subscribed to the Google
> Groups "Autobahn" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to autobahnws+...@googlegroups.com.
> For more options, visit https://groups.google.com/groups/opt_out.

[Greg Fausak]

Tobias,

Thanks, I went and integrated Autobahn and Angularjs, actually, no real work at all.  Since angular is javascript, everything just works as you would expect.

I have run in to some interesting problems, though!

My current implementations all work with ajax calls.  Ajax has a fairly long setup / execution time, on the order of seconds between calls.  I reimplemented one project with web sockets.  I only 'setup' one time now, with each subsequent rpc call riding on the initial authentication//authorization, I can run calls so fast that they their order is hard to determine.  Have you seen that before?  I run 3 web socket calls from javascript one after the other.  On the server side they might run at the same time, or in a different order than presented.  It is a very interesting problem having the code execute so quickly that I can't rely on 'order'.

I guess one needs to use promises even on the client side to insure serialization?

-g

[Tobias Oberstein]

Am 16.01.2014 22:41, schrieb Greg Fausak:
> Tobias,
>
> Thanks, I went and integrated Autobahn and Angularjs, actually, no real
> work at all. Since angular is javascript, everything just works as you
> would expect.
>
> I have run in to some interesting problems, though!

What are you using on client, and what on server?

>
> My current implementations all work with ajax calls. Ajax has a fairly
> long setup / execution time, on the order of seconds between calls. I
> reimplemented one project with web sockets. I only 'setup' one time
> now, with each subsequent rpc call riding on the initial
> authentication//authorization, I can run calls so fast that they their
> order is hard to determine. Have you seen that before? I run 3 web

WAMP is fast, since there is no head-of-line blocking, and RPCs are
fully pipelined. But the RPC requests are nevertheless ordered. The RPC
response order depends on how they execute on server-side.

> socket calls from javascript one after the other. On the server side
> they might run at the same time, or in a different order than presented.

If you are using AutobahnJS, a sequence of 3 RPCs will arrive at the
server in exactly that order.

The responses to those 3 RPCs are asynchronous, and order depends on how
they are run at the server.

> It is a very interesting problem having the code execute so quickly
> that I can't rely on 'order'.
>
> I guess one needs to use promises even on the client side to insure
> serialization?

AutobahnJS already uses promises. You can pretty much to as you like:

a) fire off 3 RPCs, and immediately continue in your client code with
other stuff

b) fire off 3 RPCs, and only continue with other stuff if all 3 have
returned (collect the 3 promises returned in a list, create a
Deferred/Promise from that list, and attach a handler to that latter
promise)

c) fire off the 1st RPC, and only fire the 2nd after the 1st returns
(have session.call() called in the response handler for the first
session.call())

Of course you can also combine above.

>
> -g
>
>
> On Monday, January 6, 2014 6:10:34 PM UTC-6, Tobias Oberstein wrote:
>
> Am 07.01.2014 00:29, schrieb Greg Fausak:
> > I guess the subject says it all :-)
> >
> > Is there an angularjs service already defined for autobahn? Is
> anybody
> > using angular with autobahn?
>
> Hi Greg,
>
> there is whole integration library for Sencha ExtJS
> (https://github.com/tavendo/AutobahnExtJS

> <https://github.com/tavendo/AutobahnExtJS>) which is MVC based, and

> we've
> been using AutobahnJS alot with KnockoutJS which is MVVM based.
>
> I am not aware of an AngularJS integration library though. I guess it
> could be done .. well, obviously;)
>
> /Tobias
>
> >
> > -g
> >
> > --
> > You received this message because you are subscribed to the Google
> > Groups "Autobahn" group.
> > To unsubscribe from this group and stop receiving emails from it,
> send

> > an email to autobahnws+...@googlegroups.com <javascript:>.

> > For more options, visit https://groups.google.com/groups/opt_out

> <https://groups.google.com/groups/opt_out>.

[jinn...@openmailbox.org]

Could you probably share you progress? I would be very interested in how to best integrate Angularjs and Autobahn.

Cheers,
Jinnog

[Greg Fausak]

Hi,

I have been using Autobahn v1 with Angular with great success.  I am not really a javascript programmer but lately i have been doing quite a bit of it.  The connection techniques that you use with straight up javascript work with angular.  I assume you don't have any problems with basic connectivity, you are interested in the techniques I used?  If you have some specific questions I'd be happy to answer them.

Specific to angularjs, I did two things:

First, set up a Query service. That service has a method that executes a query.  Any of my angular code simply injects QueryService and uses it to run a query from the activeq() method, like:

Query.activeq('run_my_query', function callback() {});

(the service can modify timeouts, error callback, etc..)

Second, I wrote an Authentication service which updates a common data I keep in the $rootScope containing the current web socket connection and other information.  Query service references this, if it contains a web socket session it uses that to run rpc and pubsub stuff via session.call(...), otherwise it throws an error.

My Authentication service uses WampCra to establish a connection and authenticate.  Upon success, the $rootScope session is updated so that subsequent Query.activeq() will run.

Since the $rootScope.session is updated via the Authentication service, I use this (lack of session setting) to direct the user to a login page if they try to run a query and aren't logged in.

My Querys are all named queries.  I have a single rpc call which takes the name of the query to run and runs it, returning the results of that query (the named query is a postgres stored procedure). All arguments and responses are json making for a good interface with javascript.

That's it in a nutshell.  Again, I'd be happy to answer specific questions.  The actual integration with angular is exactly the same as javascript integration.

-g

[Roger Erens]

Hello Greg,

complete AngularJS newbie here; would it be possible for you to show the basic connectivity in combination with Angular?

Maybe by showing the changes in the index.html of the hello-template

https://github.com/crossbario/crossbar/blob/master/crossbar/crossbar/templates/hello/python/appname/web/index.html
e.g. on a blog or in the crossbar wiki

https://github.com/crossbario/crossbar/wiki/Choose-your-Weapon

(suggestion: add a page called Getting started with AngularJS).

And, as a bonus or follow-up you could replace calling to console.log() by something using the {{}} moustache notation?

Hope I'm not overasking you :-),

Roger

Op maandag 16 juni 2014 21:30:20 UTC+2 schreef Greg Fausak:

Hi,

I have been using Autobahn v1 with Angular with great success.  I am not really a javascript programmer but lately i have been doing quite a bit of it.  The connection techniques that you use with straight up javascript work with angular.  I assume you don't have any problems with basic connectivity, you are interested in the techniques I used?  If you have some specific questions I'd be happy to answer them.

...

[Greg Fausak]

Hi Roger,

I did this stackoverflow which has a complete client authorization implementation, including client connectivity...

http://stackoverflow.com/questions/24339328/building-realtime-app-using-laravel-and-latchet-websocket

There is a learning curve associated with angularjs, it would help you if you could write a trivial hello world angularjs application.   The trick for me was the services, I created a authentication service, and a query service. the authentication is key. you need to figure out how you want to authorize access.

There is also basic 'routing' that has to be learned.  Angularjs comes with routing, but, I used  angular-ui-router.js, which I found to be much better. https://github.com/angular-ui/ui-router.  This is what you were talking about, I think, with the moustache syntax.  Routing is how you get to different views.

I am not by any means a angularjs programmer, I write python/c/php code.  Angular was hard for me not knowing anything about html5, javascript, etc.. if I can learn it, anybody can :-)

I did end up subscribing to this :

https://egghead.io/technologies/angularjs

which has some great getting started tutorials for angularjs.  Lots of them are even free, but, I paid for it for a couple of months to learn about how it all works.

Best,

-g

--
You received this message because you are subscribed to a topic in the Google Groups "Autobahn" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/autobahnws/eNKr4WDUS0M/unsubscribe.
To unsubscribe from this group and all its topics, send an email to autobahnws+...@googlegroups.com.

To post to this group, send email to autob...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/autobahnws/24141e45-8ed1-4778-a9a5-4ffc0410be8f%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
Greg Fausak
lgfa...@gmail.com

[Roger Erens]

Hey Greg,

client authorization is still beyond my horizon of things to learn and do... So probably I misunderstood what you meant with client connectivity.

I was aiming for something like I now created on the Crossbar wiki:

https://github.com/crossbario/crossbar/wiki/AngularJS-Application-Components

where angular.js and autobahn.js functions are calling each other, etc.

It is a rewrite of the HTML5 Application Components page (and obviously, unfinished).

Maybe you could have a quick look at it and share your thoughts about it?

At least it might make for some starting point.

Op woensdag 16 juli 2014 15:09:21 UTC+2 schreef Greg Fausak: