Alpha Video Training
Page 1 of 2 12 LastLast
Results 1 to 30 of 41

Thread: Google Charts using Web Socket data from Server every 5 seconds - Video

  1. #1
    "Certified" Alphaholic peteconway's Avatar
    Real Name
    Peter Conway
    Join Date
    Oct 2005
    Location
    Melbourne, Australia
    Posts
    2,552

    Default Google Charts using Web Socket data from Server every 5 seconds - Video

    Working on a project with live reporting - thought this may encourage others to give Web Sockets a go.

    Play Video

    Cheers, Pete
    Insanity: doing the same thing over and over again and expecting different results.
    Albert Einstein, (attributed)
    US (German-born) physicist (1879 - 1955)

  2. #2
    Member
    Real Name
    Michael Cornford
    Join Date
    Oct 2011
    Location
    East Sussex, UK
    Posts
    884

    Default Re: Google Charts using Web Socket data from Server every 5 seconds - Video

    Looks great Pete

  3. #3
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    2,060

    Default Re: Google Charts using Web Socket data from Server every 5 seconds - Video

    WOW- again what a really cool use of Alpha Software! I would love to know how you did that, I just thought it was for messaging?
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com "I am not discouraged, because every wrong attempt discarded is another step forward."

  4. #4
    Member
    Real Name
    javier
    Join Date
    Jul 2012
    Location
    Madrid
    Posts
    147

    Default Re: Google Charts using Web Socket data from Server every 5 seconds - Video

    Really cool!!!

  5. #5
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    2,060

    Default Re: Google Charts using Web Socket data from Server every 5 seconds - Video

    I guess what I am seeing is that whatever the UX contains is broadcasting? In other words, your doing a 5 second refresh and it is refreshing, but also because it is using the web-socket system it is also updating the same UX in all listening UX's?
    Like I said, I just thought it was for messaging. I wonder what other uses could be enabled for this scenario...and feel free to correct me as I am interested in learning and possibly implementing this as a feature for my users to see real time data from the office to the field and vice-versa.
    Thanks again Pete for your contribution here, stuff like this keeps me dreaming!
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com "I am not discouraged, because every wrong attempt discarded is another step forward."

  6. #6
    "Certified" Alphaholic peteconway's Avatar
    Real Name
    Peter Conway
    Join Date
    Oct 2005
    Location
    Melbourne, Australia
    Posts
    2,552

    Default Re: Google Charts using Web Socket data from Server every 5 seconds - Video

    No refresh or timing intervals involved - the sever is pushing it out - the, what I call the Listener Page (with the gauges on it), is just sitting there doing nothing until a message arrives and the SocketOnMessageRecieved shows it.
    Insanity: doing the same thing over and over again and expecting different results.
    Albert Einstein, (attributed)
    US (German-born) physicist (1879 - 1955)

  7. #7
    "Certified" Alphaholic peteconway's Avatar
    Real Name
    Peter Conway
    Join Date
    Oct 2005
    Location
    Melbourne, Australia
    Posts
    2,552

    Default Re: Google Charts using Web Socket data from Server every 5 seconds - Video

    To be clear the Alpha Server doesn't know what is happening on the Listener Page as the page isn't calling it for anything. It's just listening to the port for a message (or data) it is entitled to listen to or do something with.
    Insanity: doing the same thing over and over again and expecting different results.
    Albert Einstein, (attributed)
    US (German-born) physicist (1879 - 1955)

  8. #8
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    2,060

    Default Re: Google Charts using Web Socket data from Server every 5 seconds - Video

    I did not mean the data is being refreshed to the client end or the other end of the web-socket listening port, what I meant was the gauges, how are they getting their fresh info? You said that "as they get changed by the call" in other words the original UX that is creating the data must be getting it from somewhere to serve it up.
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com "I am not discouraged, because every wrong attempt discarded is another step forward."

  9. #9
    "Certified" Alphaholic peteconway's Avatar
    Real Name
    Peter Conway
    Join Date
    Oct 2005
    Location
    Melbourne, Australia
    Posts
    2,552

    Default Re: Google Charts using Web Socket data from Server every 5 seconds - Video

    There is no original UX, it is constrained random data (for the demo) being generated by an xbasic script server side. on arrival the message changes the values of the Listener UX (via the WebSocket) so the on change in the ux fires the relevant javascript function to refresh each gauge.
    Insanity: doing the same thing over and over again and expecting different results.
    Albert Einstein, (attributed)
    US (German-born) physicist (1879 - 1955)

  10. #10
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,572

    Default Re: Google Charts using Web Socket data from Server every 5 seconds - Video

    Attached is an example of using Google Gauges with Alpha WebSockets.

    Make sure your Project Properties has WebSockets enabled... just leave the default settings in place.
    Using just LivePreview in a Browser, fire up the UX in Chrome, and again in Firefox... so that both browsers are showing the UX.
    The Google JS Charts library is set in the UX properties.

    Each time you client a button... Users, Clients, or Orders... in either browser... both UXs will update. This demonstrates that any time something happens in a system... a User gets added, or Clients are added, or Orders are changed, you can fire off a WebSocket message sending through data to any UX with WebSockets enabled. The buttons fire off Ajax Callbacks that just create a random number.. but the data can come from anywhere... e.g. sql selects etc. The UX can also 'subscribe' to a channel so that only that UX will receive that channel's message.

    As well, you could fire off a client-side api call to some service, get back data, and then send a WebSocket Client-side message.

    The "message" is just a JSON string... it can be anything. All running WebSocket enabled UXs get the message... and the webSocketOnMessage event 'decodes' the message.

    http://youtu.be/bIEBbz8bPK0?hd=1

    Ya gotta love Alpha for enabling this... and Google for providing stunning visuals.
    Attached Files Attached Files
    Last edited by Davidk; 08-04-2016 at 08:54 PM.

  11. #11
    "Certified" Alphaholic peteconway's Avatar
    Real Name
    Peter Conway
    Join Date
    Oct 2005
    Location
    Melbourne, Australia
    Posts
    2,552

    Default Re: Google Charts using Web Socket data from Server every 5 seconds - Video

    ... - what a good idea. by the way some nice code there..
    Last edited by peteconway; 08-04-2016 at 08:24 PM.
    Insanity: doing the same thing over and over again and expecting different results.
    Albert Einstein, (attributed)
    US (German-born) physicist (1879 - 1955)

  12. #12
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    2,060

    Default Re: Google Charts using Web Socket data from Server every 5 seconds - Video

    yeah I am super stoked about this!
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com "I am not discouraged, because every wrong attempt discarded is another step forward."

  13. #13
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    2,060

    Default Re: Google Charts using Web Socket data from Server every 5 seconds - Video

    Thanks, very interesting - more interesting is this:
    Code:
    it is constrained random data (for the demo) being generated by an xbasic script server side
    While i understand that it's random data, how can I research or learn to create an xbasic script that will "poll" a certain field in a database table for changes? I have never heard of that, obviously you can click a button and get fresh info from a table - how do I create a script to fetch the info automatically say every 5 seconds and finally does THAT tax the alpha server? It would be great to in the end create an app that is simply a listener/dashboard of events!

    I am wondering about this going back to your example of the data appearing to refresh on it's own - updating the listener. Now in your case Pete you said it was random data - same case in Davids - and yes I get that it's sample data for the sake of the demonstration.

    My thoughts are to create a div in the menu of a tabbed UI where users would see something similar to a scrolling shout box that would show the field reports text as they are submitted.
    Maybe one day an automatically updating cost of labor, or a rolling total of billable items charged, total of estimates submitted, invoices paid, etc.

    SO many ideas!

    David and Pete - thanks for sharing your ideas and work! What a treat to come home tonight to have a look at this again, and YES it is really cool that Alpha added in web-sockets like this!
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com "I am not discouraged, because every wrong attempt discarded is another step forward."

  14. #14
    "Certified" Alphaholic peteconway's Avatar
    Real Name
    Peter Conway
    Join Date
    Oct 2005
    Location
    Melbourne, Australia
    Posts
    2,552

    Default Re: Google Charts using Web Socket data from Server every 5 seconds - Video

    Just so you are clear - as the WebSockets resides in the WebProjects Properties - all of your compents can send (share) or recieve information accross the nominated web server port. Also Xbasic scripts would not be polling xbasic on anything - the xbasic script runs in response to an end-point call from another event or even another service like Redis, once the call happens you send out what ever messages required based on the call recieved.
    Insanity: doing the same thing over and over again and expecting different results.
    Albert Einstein, (attributed)
    US (German-born) physicist (1879 - 1955)

  15. #15
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    2,060

    Default Re: Google Charts using Web Socket data from Server every 5 seconds - Video

    Also Xbasic scripts would not be polling xbasic on anything - the xbasic script runs in response to an end-point call from another event or even another service
    Right so my thoughts are how do I poll my own data to update the page? I think that's what I was asking, lol. If I do - I am pretty sure THAT would put a burden on the server. NOW, perhaps I could update a page on an update instead of on short intervals, which would be more efficient.
    Any thoughts on how I can learn to "update" the UX's data with the web-socket during an insert from another UX? I really have no clue what you would do, now if it were in the same running UX you could simply use an OnChange event, but another UX in another tab in a tabbedUI????

    Cheers~
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com "I am not discouraged, because every wrong attempt discarded is another step forward."

  16. #16
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,572

    Default Re: Google Charts using Web Socket data from Server every 5 seconds - Video

    Charles... it doesn't matter what UX you're currently viewing... it's the web-socket server that's handling the broadcast. This is what you have to wrap your head around. The UX (the Client) automatically receives broadcasted messages from the web-socket server. Read the info in the release notes a few times and you'll start to understand what's happening. Also, read the inline notes in the Action Javascript choices for Web-Sockets.

    Once the 'Web-socket server' property has been checked, when the UX or Grid component is run, it will automatically launch the web-socket server (if it is not already running) and it will start listening for messages. When a message is received, the client-side webSocketOnMessage event will fire and your Javascript code can decide what (if anything) to do with the message.
    The web-socket server is like the main post office. You send it a message and it broadcasts that message to all components that say... "sure... I'll receive messages... go ahead". If 10 UXs are currently running, then all 10 get the message. If 1000 users are viewing the same UX... 1000 users will get that message.

    You can send a message from the client (the UX) to the websocket server... or you can send a message from the Alpha Server (XBasic) to the websocket server.
    Sending a message client-side is like sending an email to a group... everyone gets the message except you.
    Sending a message server-side... everyone, including you, gets the message.

    http://youtu.be/19xQJAO35-4?hd=1

    The attached zip contains 2 UX components. One contains a List control... the other does not. I'm controlling the List from the UX which does not have the List.

    As well, I'm sending a client-side message to update the Users Gauge. In this case, the sending UX does not receive the message. So... client-side... I have to also perform whatever the message is.
    Attached Files Attached Files

  17. #17
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    2,060

    Default Re: Google Charts using Web Socket data from Server every 5 seconds - Video

    Okay, I take no issue with the receiving client side - I get that it "receives" and that any changes in the broadcasting UX get messaged out when you tell it to. My problem is triggering the "update" to the info in the UX.
    In other words, let's say I have a UX called UX1 with a list control and a button that says "update list"
    Now I have a seperate UX with a list with a detail view, a user does an INSERT - how can I update the OTHER UX that is actually broadcasting?
    See I don't understand how I would poll the database for changes to even broadcast the change. Now perhaps I am not understanding the premise for web socket servers but when I see gauges updating info automatically I wonder how they get the updated info - FIRST before it gets simultaneously broadcast to listening UX's/components.
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com "I am not discouraged, because every wrong attempt discarded is another step forward."

  18. #18
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    2,060

    Default Re: Google Charts using Web Socket data from Server every 5 seconds - Video

    Can I send a message to the UX1 via an xbasic script in another UX and in that way update the broadcaster?
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com "I am not discouraged, because every wrong attempt discarded is another step forward."

  19. #19
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,572

    Default Re: Google Charts using Web Socket data from Server every 5 seconds - Video

    You're still not quite there... but you'll soon have an epiphany.

    The "OTHER UX" is not broacasting. It is sending messages to the web-sockets server... and receiving messages from the web-sockets server. It is the web-sockets server that is taking in that message and broadcasting it.

    Remember, the web-sockets server is the central post office... a central hub... it gets everything individually from any component... then sends it back out. If the UX initiates a client-side message, then than UX will not get that message back. If the UX initiates a Server-Side message, then that UX will get that message.

    You need to look at the new examples I posted. Run one UX in Chrome... run the other UX in Firefox. One UX has a List... the other doesn't. The UX that does not have a List sends a message to the web-sockets server. The message is "sort the list". The web-sockets server gets the message and then sends it out to all listening components. Each component gets the message and our JS code reads the message and does what it says to do.

    You don't send a message to UX1... you send a message to the web-sockets server (which is running on the Alpha Server) and the web-sockets server sends the message to all listening UXs... including UX1.

    You don't poll a database change... you know you're doing the Insert right? You're in a UX... doing a List Insert. When you click Submit... you would also add code to send a web-socket message. The web-sockets server gets the message and sends it out to all listening components. The message could be... "refresh the List".

    The components get the message and test for "refresh the List". If the message is "refresh the List" then you perform List refresh data.
    Last edited by Davidk; 08-06-2016 at 02:12 PM.

  20. #20
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    2,060

    Default Re: Google Charts using Web Socket data from Server every 5 seconds - Video

    Boom, epiphany... Lol
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com "I am not discouraged, because every wrong attempt discarded is another step forward."

  21. #21
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    2,060

    Default Re: Google Charts using Web Socket data from Server every 5 seconds - Video

    So, question; If I have two UX's with a list control per UX and both list controls are named list1 - If I send a message to the web socket server that says to refresh 'list1' then both "listening" lists would refresh correct ? This seems like I should be very careful in my listening UX's as per naming conventions.
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com "I am not discouraged, because every wrong attempt discarded is another step forward."

  22. #22
    Member
    Real Name
    John
    Join Date
    Jul 2015
    Posts
    33

    Default Re: Google Charts using Web Socket data from Server every 5 seconds - Video

    David, My stumbling point is I don't know Alpha well enough to determine which of the dozens of client/server events is best for a CRUD operation (to Alpha App server) triggering a message (to Web Socket server) and the proper sequence. Any pointers if I'm using an editable grid for transaction entry/edits? Another helpful example would be taking Selywn's chat example one step further by saving the comments to a table periodically.


    Charles, A useful resource for understanding the tech side is Amazon Elasticache https://aws.amazon.com/elasticache/redis/resources/ documentation. There are some good webinars and docs explaining the concepts. AWS Elasticache is just a fancier, more durable, costlier version of what Alpha is providing on install. It can also BE the Redis server used by any component so you don't need to worry about your realtime messaging server bonking.

  23. #23
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,572

    Default Re: Google Charts using Web Socket data from Server every 5 seconds - Video

    Quote Originally Posted by CharlesParker View Post
    So, question; If I have two UX's with a list control per UX and both list controls are named list1 - If I send a message to the web socket server that says to refresh 'list1' then both "listening" lists would refresh correct ? This seems like I should be very careful in my listening UX's as per naming conventions.
    Well... that really depends on how you code the client-side webSocketOnMessage event... and... if you sent a server-side web-socket message.

    But generally... yes... you just need to organize and plan what you want to do.

  24. #24
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,572

    Default Re: Google Charts using Web Socket data from Server every 5 seconds - Video

    Quote Originally Posted by menehune View Post
    David, My stumbling point is I don't know Alpha well enough to determine which of the dozens of client/server events is best for a CRUD operation (to Alpha App server) triggering a message (to Web Socket server) and the proper sequence. Any pointers if I'm using an editable grid for transaction entry/edits? Another helpful example would be taking Selywn's chat example one step further by saving the comments to a table periodically.
    If you're working with a grid, then the dozens of events gets reduced to a few... depending on what you're doing. There are server-side events for after insert, update, delete. There are client-side events you could use as well. I don't know what you're grid is doing or how you're doing it... but it really depends on how it's put together.

  25. #25
    "Certified" Alphaholic iRadiate's Avatar
    Real Name
    Stephen
    Join Date
    Jan 2011
    Location
    London, ON
    Posts
    1,574

    Default Re: Google Charts using Web Socket data from Server every 5 seconds - Video

    Wow, this is amazing stuff indeed. Could this technique be used to push pop-up messages to any logged in user?
    I'm thinking along the lines of an administrator asking "Please save your work and logoff in the next 10 minutes". And where would the message arrive on the client app?

    Thanks Pete & David for demonstrating and sharing.
    Last edited by iRadiate; 08-06-2016 at 10:28 PM.

  26. #26
    Moderator Steve Workings's Avatar
    Real Name
    Steve Workings
    Join Date
    Apr 2000
    Location
    The Dreaded Chair
    Posts
    5,596

    Default Re: Google Charts using Web Socket data from Server every 5 seconds - Video

    Stephen - yes. We have it all set up for a live chat system on a multi-tenant app. Permissions are provided only to the "current" tenant and further only those users so given permission. It works fine on one server but we're stuck without it working across a load balancer and two or more physical boxes.
    -Steve


  27. #27
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    2,060

    Default Re: Google Charts using Web Socket data from Server every 5 seconds - Video

    Steve, I was watching your other thread and ALL I can think is there is something missing - and it will take an Alpha engineer to figure it out because they put this together in the first place. It seems to me that they would work on this because ANY application that has USERS (means makes money!) will probably require a load balanced environment, so therefore - this NEEDS to work!

    I hope they take some time to really get under the hood on this, I KNOW there are some very smart folks working on development and they could solve it in a day if they would just take the time!

    Good LUCK!
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com "I am not discouraged, because every wrong attempt discarded is another step forward."

  28. #28
    Member
    Real Name
    John
    Join Date
    Jul 2015
    Posts
    33

    Default Re: Google Charts using Web Socket data from Server every 5 seconds - Video

    Steve, If using a load balancer you also need to use Redis instead of the simple option. I think the simple option only ties to the physical IP of a single box. I don't need a load balancer at this point so haven't tested, but the AWS link I posted has great in-depth info on the configuration. Also, it's part of their one year free tier trial.

  29. #29
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,572

    Default Re: Google Charts using Web Socket data from Server every 5 seconds - Video

    Quote Originally Posted by iRadiate View Post
    Wow, this is amazing stuff indeed. Could this technique be used to push pop-up messages to any logged in user?
    I'm thinking along the lines of an administrator asking "Please save your work and logoff in the next 10 minutes". And where would the message arrive on the client app?
    In a sense, this doesn't have anything to do with users or being logged in. If you must be logged in to use a component... then fine... but it really doesn't have anything to do with web-sockets. As long as a UX has web-sockets turned on, it will receive a broadcasted message. You can go further and set up and subscribe to channels per UX. The client-side event websocketOnMessage receives the message and you decide what to do with it. It's just JSON so the message can really be anything... and you interpret what is sent.

    So... yes... Admin could send out a message advising of a shutdown. You could even log them out.
    Last edited by Davidk; 08-07-2016 at 10:58 AM.

  30. #30
    "Certified" Alphaholic peteconway's Avatar
    Real Name
    Peter Conway
    Join Date
    Oct 2005
    Location
    Melbourne, Australia
    Posts
    2,552

    Default Re: Google Charts using Web Socket data from Server every 5 seconds - Video

    When I first posted the Gauges video I wanted to spark AA developers in understanding "a message can be anything", many developers take AA video examples too literally.. they are mostly foundation blocks - and AA expect us the build on top of them, not be happy with them as they are. Another recent example of this was the ink control as an image gallery control, it displayed a technique in its simplest form, but when you build on top of it you get the rewards, see the example attached - it is now an integral part of all my builds - it works with S3, using a list bound component, and I could not be happier with the tool. Any AA developer not putting time into these tools right now, needs to take a breath, make some time, just like you Charles and get their head around it, I think these recent developments a total game changers for me, I'm so impressed with the AA Team right now.

    2016-08-07_2157.png

    2016-08-07_2156.png

    Also nice work all around David.

    Peter
    Insanity: doing the same thing over and over again and expecting different results.
    Albert Einstein, (attributed)
    US (German-born) physicist (1879 - 1955)

Similar Threads

  1. Google Charts - Prompting For SQL Agruments
    By iRadiate in forum Mobile & Browser Applications
    Replies: 30
    Last Post: 02-28-2019, 02:37 PM
  2. Google Charts
    By Pete119j in forum Application Server Version 11 - Web/Browser Applications
    Replies: 1
    Last Post: 03-15-2016, 09:30 AM
  3. Google charts API - using a CSV or a dbf file as data source
    By jcarrallo in forum Mobile & Browser Applications
    Replies: 0
    Last Post: 10-06-2013, 04:14 PM
  4. Google Charts API with POST
    By Peter.Wayne in forum Alpha Five Version 10 - Desktop Applications
    Replies: 0
    Last Post: 05-30-2011, 04:16 PM
  5. Google Charts API
    By koga101 in forum Application Server Version 10 - Web/Browser Applications
    Replies: 8
    Last Post: 04-02-2011, 05:52 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •