angular service for autobahn?

#1

I guess the subject says it all :slight_smile:

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

-g

0 Likes

#2

I guess the subject says it all :slight_smile:

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) 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

···

Am 07.01.2014 00:29, schrieb Greg Fausak:

-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.

0 Likes

#3

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

···

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 :slight_smile:

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) 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.

0 Likes

#4

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.

···

Am 16.01.2014 22:41, schrieb Greg Fausak:

-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 :slight_smile:
     >
     > 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 autobah...@googlegroups.com <javascript:>.
     > For more options, visit https://groups.google.com/groups/opt_out
    <https://groups.google.com/groups/opt_out>.

--
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.

0 Likes

#5

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

Cheers,
Jinnog

···

On Thursday, 16 January 2014 23:41:57 UTC+2, Greg Fausak wrote:

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

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 :slight_smile:

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) 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.

0 Likes

#6

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

···

On Sunday, June 15, 2014 9:57:09 AM UTC-5, jin...@openmailbox.org wrote:

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

Cheers,
Jinnog

On Thursday, 16 January 2014 23:41:57 UTC+2, Greg Fausak wrote:

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

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 :slight_smile:

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) 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.

0 Likes

#7

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.

0 Likes

#8

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 :slight_smile:

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

···

On Wed, Jul 16, 2014 at 5:27 AM, Roger Erens snere...@gmail.com wrote:

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.

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

0 Likes

#9

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:

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 :slight_smile:

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

On Wed, Jul 16, 2014 at 5:27 AM, Roger Erens sner...@gmail.com wrote:

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.

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 auto...@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
lgf...@gmail.com

0 Likes